[css] <td>에 고정 너비를 설정하는 방법은 무엇입니까?

간단한 계획 :

  <tr class="something">
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>

에 대해 고정 너비를 설정해야합니다 <td>. 난 노력 했어:

tr.something {
  td {
    width: 90px;
  }
}

또한

td.something {
  width: 90px;
}

…에 대한

<td class="something">B</td>

그리고 심지어

<td style="width: 90px;">B</td>

그러나 너비 <td>는 여전히 동일합니다.

답변

부트 스트랩 4.0의 경우 :

Bootstrap 4.0.0에서는 col-*클래스를 안정적으로 사용할 수 없습니다 (Firefox에서는 작동하지만 Chrome에서는 작동하지 않음). OhadR의 답변 을 사용해야합니다 .

<tr>
  <th style="width: 16.66%">Col 1</th>
  <th style="width: 25%">Col 2</th>
  <th style="width: 50%">Col 4</th>
  <th style="width:  8.33%">Col 5</th>
</tr>

부트 스트랩 3.0의 경우 :

트위터 부트 스트랩 3에서 다음을 사용하십시오. class="col-md-*"여기서 *는 여러 열의 열입니다.

<tr class="something">
    <td class="col-md-2">A</td>
    <td class="col-md-3">B</td>
    <td class="col-md-6">C</td>
    <td class="col-md-1">D</td>
</tr>

부트 스트랩 2.0의 경우 :

트위터 부트 스트랩 2를 사용하면 : class="span*"*는 여러 열의 열입니다.

<tr class="something">
    <td class="span2">A</td>
    <td class="span3">B</td>
    <td class="span6">C</td>
    <td class="span1">D</td>
</tr>

** <th>요소 가있는 경우 요소가 아닌 너비를 설정하십시오 <td>.

답변

나는 같은 문제가 있었고 테이블을 수정 한 다음 내 td 너비를 지정했다. 당신이 일을하면 당신도 할 수 있습니다.

table {
    table-layout: fixed;
    word-wrap: break-word;
}

주형:

<td style="width:10%">content</td>

레이아웃을 구성 할 때는 CSS를 사용하십시오.

답변

col-md-*각 td행에 클래스를 적용하는 대신 클래스를 생성 colgroup하고 col태그에 적용 할 수 있습니다 .

    <table class="table table-striped">
        <colgroup>
            <col class="col-md-4">
            <col class="col-md-7">
        </colgroup>
        <tbody>
        <tr>
            <td>Title</td>
            <td>Long Value</td>
        </tr>
        </tbody>
    </table>

여기 데모

답변

잘하면이 사람이 도움이 될 것입니다 :

<table class="table">
  <thead>
    <tr>
      <th style="width: 30%">Col 1</th>
      <th style="width: 20%">Col 2</th>
      <th style="width: 10%">Col 3</th>
      <th style="width: 30%">Col 4</th>
      <th style="width: 10%">Col 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Val 1</td>
      <td>Val 2</td>
      <td>Val 3</td>
      <td>Val 4</td>
      <td>Val 5</td>
    </tr>
  </tbody>
</table>

https://github.com/twbs/bootstrap/issues/863

답변

당신이 사용하는 경우 <table class="table">테이블에서 하는 Bootstrap의 테이블 클래스는 테이블에 너비를 100 % 추가합니다. 너비를 자동으로 변경해야합니다.

또한 테이블의 첫 번째 행이 머리글 행인 경우 td가 아니라 th에 너비를 추가해야 할 수도 있습니다.

답변

필자의 경우 셀 min-width: 100px대신 또는 width: 100px을 사용하여 해당 문제를 해결할 수있었습니다 .thtd

.table td, .table th {
    min-width: 100px;
}

답변

Bootstrap 4의 경우 클래스 도우미를 사용하면됩니다.

<table class="table">
  <thead>
    <tr>
      <td class="w-25">Col 1</td>
      <td class="w-25">Col 2</td>
      <td class="w-25">Col 3</td>
      <td class="w-25">Col 4</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      ...