programing

테이블 내부의 텍스트 정렬 클래스

instargram 2023. 4. 12. 21:45
반응형

테이블 내부의 텍스트 정렬 클래스

Twitter의 Bootstrap 프레임워크에 텍스트를 정렬하는 일련의 클래스가 있습니까?

를 들어, '아까', '아까', '아까', '아까'가 있는 표가 있어요.$★★★★★★★★★★★...

<th class="align-right">Total</th>

그리고.

<td class="align-right">$1,000,000.00</td>

부트스트랩 3

v3 텍스트 정렬 문서

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

부트스트랩3 텍스트 정렬 예시

부트스트랩 4

v4 텍스트 정렬 문서

<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

부트스트랩4 텍스트 정렬 예시

부트스트랩 5

v5 텍스트 정렬 문서

text-left has has has has has has has has has has has 로 바뀌었습니다.text-start,text-right has has has has has has has has has has has 로 바뀌었습니다.text-end

<p class="text-start">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-end">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Bootstrap 3.x 를 3 의 text-right완벽하게 동작합니다.

<td class="text-right">
  text aligned
</td>

아니요, 부트스트랩에는 그런 클래스가 없습니다만, 이러한 클래스는 @anton이 언급한 ".pull-right" 클래스와 유사한 "유틸리티" 클래스로 간주됩니다.

유틸리티를 보면 Bootstrap에서는 유틸리티 클래스가 거의 표시되지 않습니다.이러한 클래스는 일반적으로 거부감을 느끼기 때문에 a) 프로토타이핑과 개발 중 하나에 사용할 것을 권장합니다.그러면 페이지를 빠르게 작성할 수 있습니다.그런 다음 풀 우클래스와 풀 좌클래스를 제거하여 플로트를 보다 의미적인 클래스나 요소 자체에 적용하거나 b) 확실히 의미적인 솔루션보다 실용적인 경우.

당신의 경우, 당신의 질문에는 표의 오른쪽에 특정 텍스트가 정렬되기를 원하는 것처럼 보이지만, 모든 텍스트가 정렬되는 것은 아닙니다.의미론적으로 다음과 같은 작업을 수행하는 것이 좋습니다(기본 부트스트랩 클래스인 .table을 제외하고 여기서 몇 개의 클래스를 구성합니다). 

  <table class="table price-table">
    <thead>
      <th class="price-label">Total</th>
    </thead>
    <tbody>
      <tr>
        <td class="price-value">$1,000,000.00</td>
      </tr>
    </tbody>
  </table>

그냥 돼요.text-align: left ★★★★★★★★★★★★★★★★★」text-align: right가격-값 및 가격-라벨 클래스(또는 자신에게 맞는 클래스)에 대한 선언입니다.

「」의 적용에 align-right클래스로서 테이블 팩터를 리팩터링 하려면 마크업과 스타일을 다시 해야 합니다.시멘틱 클래스를 사용하면 CSS 콘텐츠만 리팩터링할 수 있습니다.또, 클래스를 요소에 적용하는 데 시간이 걸리는 경우는, 다른 프로그래머(또는 3개월 후의 사용자)가 마크업을 조작하기 쉽게 하기 위해서, 그 클래스에 의미치를 할당하는 것을 추천합니다.

한 가지 방법은 다음과 같습니다. "이 td의 용도는 무엇입니까?"라는 질문을 던지면 "align-right"라는 답변이 명확해지지 않습니다.

2. 클래스 '2.3'이 .text-left,text-right , , , , 입니다.text-center하지 않습니다. 3) 수 있을 까지 Bootstrap 3.0 에 이 했습니다.bootstrap.css:

.text-right {
    text-align: right !important;
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

Bootstrap 스타일시트 뒤에 로드되는 "커스텀" 스타일시트를 추가합니다.따라서 클래스 정의가 오버로드됩니다.

이 스타일시트에서 다음과 같이 정렬을 선언합니다.

.table .text-right {text-align: right}
.table .text-left {text-align: left}
.table .text-center {text-align: center}

이제 td 및 th 요소에 대해 "공통" 정렬 규칙을 사용할 수 있습니다.

「CSS」가 있기 에,text-align:rightAFIK, Bootstrap은 특별한 클래스가 없습니다.

부트스트랩에는 오른쪽의 부동 div 등에 대한 "pull-right"가 있습니다.

부트스트랩 2.3이 출시되어 텍스트 정렬 스타일이 추가되었습니다.

부트스트랩 2.3 출시(2013-02-07)

부트스트랩 4가 온다!부트스트랩에서 익숙한 유틸리티 클래스3.x이것으로 브레이크 포인트가 유효하게 되었습니다.은 다음과 같습니다.xs,sm,md,lg ★★★★★★★★★★★★★★★★★」xl 이 는 이렇게 있어요..text-[breakpoint]-[alignnment].

<div class="text-sm-left"></div> //or
<div class="text-md-center"></div> //or
<div class="text-xl-right"></div>

중요:현재 Bootstrap 4는 Alpha 2에만 있습니다.이러한 클래스와 사용 방법은 예고 없이 변경될 수 있습니다.

v3.3.5에서의 부트스트랩 텍스트 얼라인먼트:

 <p class="text-left">Left</p>
 <p class="text-center">Center</p>
 <p class="text-right">Right</p>

CodePen의 예

다음 코드 행은 올바르게 동작하고 있습니다.텍스트 센터, 왼쪽 또는 오른쪽과 같은 클래스를 할당할 수 있습니다. 텍스트는 그에 따라 정렬됩니다.

<p class="text-center">Day 1</p> 
<p class="text-left">Day 2</p> 
<p class="text-right">Day 3</p>

여기서는 외부 클래스를 만들 필요가 없습니다.이들은 부트스트랩클래스로 독자적인 속성이 있습니다.

이 CSS는 다음과 같이 사용할 수 있습니다.

.text-right {text-align: right} /* For right align */
.text-left {text-align: left} /* For left align */
.text-center {text-align: center} /* For center align */

.text-align하고, 합니다..price-label ★★★★★★★★★★★★★★★★★」.price-value아!

100% 커스텀 유틸리티 클래스로 이행할 것을 권장합니다.

.text-right {
  text-align: right;
}

난 마법을 부리고 싶지만 그건 너한테 달렸어.

span.pull-right {
  float: none;
  text-align: right;
}

예를 들어 간결하고 달콤한 답변이 여기 있다.

table{
    width: 100%;
}
table td, table th {
    border: 1px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <table>
    <tr>
      <th class="text-left">Text align left.</th>
      <th class="text-center">Text align center.</th>
      <th class="text-right">Text align right.</th>
    </tr>
    <tr>
      <td class="text-left">Text align left.</td>
      <td class="text-center">Text align center.</td>
      <td class="text-right">Text align right.</td>
    </tr>
  </table>
</body>

에서는 Bootstrap 3의 할 수 text-center정렬의 , 앙앙 、text-left 정렬의 , "예"는 "예"입니다.text-right 및 "Right Alignment"에 대한 설명입니다.text-justify적절한 정렬을 위해.

부트스트랩은 프런트엔드의 매우 간단한 프레임워크입니다.취향에 맞게 커스터마이즈 할 수 있습니다.

David의 답변을 자세히 설명하자면, 다음과 같이 Bootstrap을 강화하기 위한 간단한 클래스를 추가합니다.

.money, .number {
    text-align: right !important;
}

부트스트랩 5

v5 텍스트 정렬 문서

부트스트랩 버전5에서는 텍스트 얼라인먼트 유틸리티 클래스가 변경됩니다.다음 새 클래스를 사용하여 텍스트를 정렬합니다.

  • 텍스트 왼쪽의 text-start왼쪽 정렬에 사용합니다.
  • text-center중앙 정렬에 사용합니다.
  • 텍스트 권리 text-end올바르게 정렬할 수 있습니다.

이 클래스는 테이블 내에서도 사용할 수 있습니다.셀 내에서 텍스트를 오른쪽 정렬하려면

    <td class="text-end">$1,000.00</td>

전체 열 내에서 텍스트를 오른쪽 정렬하려면 css를 사용할 수 있습니다.nth-child소유물

/* || right aligns text of third column; change 3 to your desired column number*/
tr > th:nth-child(3),
tr > td:nth-child(3) {
    text-align: right;
}

완전한 솔루션에 대해서는, 다음의 예를 참조해 주세요.

/* to right align text within whole column */
.custom-table tr>th:nth-child(3),
.custom-table tr>td:nth-child(3) {
  text-align: right;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<body>
  <table class="table table-bordered custom-table">
    <thead>
      <tr>
        <th scope="col">Date</th>
        <th scope="col">Customer</th>
        <th scope="col">Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>11 May 2021</td>
        <td>Paula Allen</td>
        <td>$104.98</td>
      </tr>
      <tr>
        <td>10 May 2021</td>
        <td class="text-end">Kevin(right-align)</td>
        <td>$233.00</td>
      </tr>
      <tr>
        <td>09 May 2021</td>
        <td>Joyes Murray</td>
        <td>$170.25</td>
      </tr>
    </tbody>
  </table>
</body>

부트스트랩4에는 이를 위한 5개의 클래스가 있습니다.text-left,text-center,text-right,text-justify그리고.text-nowrap.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="text-left">Left aligned text.</div>
<div class="text-center">Center aligned text.</div>
<div class="text-right">Right aligned text.</div>
<div class="text-justify">Justified text starts here. The quick brown fox jumps over the lazy dog. Justified text ends here.</div>
<div class="text-nowrap">No wrap text starts here. The quick brown fox jumps over the lazy dog. No wrap text ends here.</div>

여기 가장 간단한 해결책이 있습니다.

텍스트 센터, 왼쪽 또는 오른쪽 등의 클래스를 할당할 수 있습니다.텍스트는 이러한 클래스에 따라 정렬됩니다.따로 수업을 만들 필요는 없습니다.이러한 클래스는 BootStrap 3에 내장되어 있습니다.

    <h1 class="text-center"> Heading 1 </h1> 
    <h1 class="text-left"> Heading 2 </h1> 
    <h1 class="text-right"> Heading 3 </h1>

이쪽: 데모

부트스트랩 버전4 。텍스트를 배치하기 위한 기본 제공 클래스도 있습니다.

테이블 머리글과 데이터 텍스트의 중심을 맞추는 경우:

 <table>
    <tr>
      <th class="text-center">Text align center.</th>
    </tr>
    <tr>
      <td class="text-center">Text align center.</td>
    </tr>
  </table>

이 클래스를 사용하여 임의의 텍스트를 배치할 수도 있습니다.

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider</p>

상세한 것에 대하여는

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
Left aligned text on viewports sized MD (medium) or wider.

Left aligned text on viewports sized LG (large) or wider.

Left aligned text on viewports sized XL (extra-large) or wider.

사용하다text-align:center !important다른 방법이 있을 수 있습니다.text-aligncss의 규칙은!important중요합니다.

table,
th,
td {
  color: black !important;
  border-collapse: collapse;
  background-color: yellow !important;
  border: 1px solid black;
  padding: 10px;
  text-align: center !important;
}
<table>
  <tr>
    <th>
      Center aligned text
    </th>
  </tr>
  <tr>
    <td>Center aligned text</td>
    <td>Center aligned text</td>
  </tr>
</table>

이 3개 클래스의 부트스트랩이 유효하지 않은 클래스입니다.

 .text-right {
     text-align: right; }

 .text-center {
     text-align: center; }

 .text-left {
    text-align: left; }

Bootstrap 4.5에서 동작하지 않는 것 같으면text-sm-right내용물이 테이블에 너무 많고 테이블이 용기의 100%에 있지 않을 수 있다는 점을 고려합니다(예: 색상).

여기에 이미지 설명 입력

테이블의 폭을 100%로 합니다.

 <table class="w-100">

언급URL : https://stackoverflow.com/questions/12829608/text-align-class-for-inside-a-table

반응형

'programing' 카테고리의 다른 글

VBA 코드로 IP 주소를 ping하고 결과를 Excel로 반환  (0) 2023.04.12
iPhone 앱크래시 보고서 상징화  (0) 2023.04.12
SQL Server에서 날짜만과 날짜/시간을 비교하는 방법  (0) 2023.04.12
WPF IOException에서 리소스를 찾을 수 없습니다.  (0) 2023.04.12
VBA에서 글로벌 변수를 선언하려면 어떻게 해야 하나요?  (0) 2023.04.12

'programing'의 다른글

  • 현재글테이블 내부의 텍스트 정렬 클래스

관련글

댓글

티스토리툴바