테이블 레이아웃이있는 테이블 : 고정; 한 열을 더 넓게 만드는 방법

81

그래서이 스타일의 테이블이 있습니다.

table-layout: fixed;

모든 열의 너비를 동일하게 만듭니다. 하나의 열 (첫 번째 열)을 더 넓게 만들고 나머지 열을 동일한 너비로 테이블의 나머지 너비를 차지하고 싶습니다.

그것을 달성하는 방법?

table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid black;
  background: #ddd;
  table-layout: fixed;
}

table th, table td {
  border: 1px solid #000;
}

table td.wideRow, table th.wideRow {
  width: 300px;
}
<table class="CalendarReservationsBodyTable">
  <thead>
    <tr>
      <th colspan="97">Rezervovane auta</th>
    </tr>
    <tr>
      <th class="corner wideRow">Auto</th>
      <th class="odd" colspan="4">0</th>
      <th class="" colspan="4">1</th>
      <th class="odd" colspan="4">2</th>
      <th class="" colspan="4">3</th>
      <th class="odd" colspan="4">4</th>
      <th class="" colspan="4">5</th>
      <th class="odd" colspan="4">6</th>
      <th class="" colspan="4">7</th>
      <th class="odd" colspan="4">8</th>
      <th class="" colspan="4">9</th>
      <th class="odd" colspan="4">10</th>
      <th class="" colspan="4">11</th>
      <th class="odd" colspan="4">12</th>
      <th class="" colspan="4">13</th>
      <th class="odd" colspan="4">14</th>
      <th class="" colspan="4">15</th>
      <th class="odd" colspan="4">16</th>
      <th class="" colspan="4">17</th>
      <th class="odd" colspan="4">18</th>
      <th class="" colspan="4">19</th>
      <th class="odd" colspan="4">20</th>
      <th class="" colspan="4">21</th>
      <th class="odd" colspan="4">22</th>
      <th class="" colspan="4">23</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="alignRight wideRow">KE-260 FC - Octavia combi</td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td colspan="16" class="highlighted borderLeft" title="Richard Knop">
        Richard Knop
      </td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td colspan="14" class="highlighted" title="Richard Knop">
        Richard Knop
      </td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
    </tr>
  </tbody>
</table>
스 니펫 확장

jsfiddle : http://jsfiddle.net/6p9K3/

첫 번째 열을 확인하십시오. 저는 그것이 300px넓기 를 원합니다 .

html  css  xhtml 
— Richard Knop
소스

답변:

87

첫 번째 셀 (따라서 열)에 너비를 지정하고 나머지는 기본값으로 설정할 수 있습니다. auto

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
td {
  border: 1px solid #000;
  width: 150px;
}
td+td {
  width: auto;
}
<table>
  <tr>
    <td>150px</td>
    <td>equal</td>
    <td>equal</td>
  </tr>
</table>
스 니펫 확장

또는 열 너비를 가져 오는 "올바른 방법"은 col요소 자체 를 사용하는 것입니다.

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
td {
  border: 1px solid #000;
}
.wide {
  width: 150px;
}
<table>
  <col span="1" class="wide">
    <tr>
      <td>150px</td>
      <td>equal</td>
      <td>equal</td>
    </tr>
</table>
스 니펫 확장

— 클레어 수지
소스
참으로 보인다 - 확실하게 col기술하지 어쨌든 : ** 업데이트 바이올린을 참조 - 너무 필요에 따라 열 병합 방법 당신은 세트 다른 열 너비에 갈 수
— clairesuzy
13
당신이있는 경우 thead폭이 자사에 설정해야합니다th
— 조나단 드 M.
사용 가능한 테이블 캡션이있는 경우 작동하지 않습니다.<table><caption>...</caption><tbody>....</tbody></table>
— malisokan
2
사용하십시오 td:first-of-type { width: 150px; }. 두 개의 선택기가 필요하지 않습니다. 또한 표의 첫 번째 행 table-layout: fixed이 너비 를 결정합니다.
— Zach Saucier 20.02.14
1
@ZachSaucier는 여기서 간과하기 쉬운 정말 중요한 점을 설명합니다. table-layout : fixed를 해당 특정 행으로 설정하여 브라우저가 너비를보기 시작할 행을 지정할 수 있습니다. 내가 본 다른 모든 곳에서 "첫 번째 세포를보기 시작한다"고만 말했다.
— J215D
43

테이블 레이아웃의 중요한 점은 열 너비가 테이블의 첫 번째 행에 의해 결정된다는 것입니다.

그래서

테이블 구조가 다음과 같으면 (표준 테이블 구조)

<table>
  <thead>
      <tr>
          <th> First column </th>
          <th> Second column </th>
          <th> Third column </th>        
      </tr>
  </thead>

   <tbody>
      <tr>
          <td> First column </td>
          <td> Second column </td>
          <td> Third column </td>        
      </tr>
  </tbody>

두 번째 열에 너비를 지정하려면

<style> 
    table{
        table-layout:fixed;
        width: 100%;
    }

    table tr th:nth-child(2){
       width: 60%;
     }

</style>

우리가 td가 아닌 스타일을 봐주세요.

— kta
소스
2
좋은 팁 - 테이블 그럴 일 : n 번째 자녀 (4)
— Paramvir 싱 Karwal
7

매우 큰 테이블 (수백 개의 행과 열)을 만들고 있습니까? 그렇다면 table-layout: fixed;브라우저가 전체를 계산하고 렌더링하기 위해 첫 번째 행만 읽으면 table되므로 더 빨리로드되는 것이 좋습니다.

그러나 그렇지 않은 경우 table-layout: fixed;다음과 같이 CSS를 덤프 하고 변경하는 것이 좋습니다 .

table th, table td{
border: 1px solid #000;
width:20px;  //or something similar   
}

table td.wideRow, table th.wideRow{
width: 300px;
}

http://jsfiddle.net/6p9K3/1/

— 제이슨 제나로
소스
1
제대로 작동하지 않습니다. 8,9,10,11 열을보세요. 너무 좁습니다.
— Richard Knop 2011
잡았다. 다음 과 같이 td4 개에 걸쳐 있는 콘텐츠를 배치하여 문제를 해결할 수 있습니다 . 를 모든 개별 의 합계로 설정합니다 . 여기를 참조하십시오 jsfiddle.net/6p9K3/2th<div style="width:80px;">Richard Knop</div>widthtd
— Jason Gennaro
3

할 수있는 일은 다음과 같습니다 (의사 코드).

<container table>
  <tr>
    <td>
      <"300px" table>
    <td>
      <fixed layout table>

기본적으로 테이블을 두 테이블로 분할하고 다른 테이블에 포함되도록합니다.

— 케이
소스
23
중첩 된 테이블은 가장 좋은 테이블입니다
— user1721135
나는 이것이 의사 코드라는 것을 알고 있지만 이것은 Pug.js와 같은 HTML 프레임 워크로서 완전히 굉장 할 것입니다!
— alistair 16.09.19
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.