Стіл зі столом-макетом: фіксований; і як зробити один стовпець ширшим

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 
— Річард Ноп
джерело

Відповіді:

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>
Розгорніть фрагмент

— clairesuzy
джерело
так, здається, - безумовно, colтехніка все одно робить: ** дивіться оновлену скрипку - і за допомогою методу colspan ви можете потім перейти до набору інших ширин стовпців, як теж потрібно
— clairesuzy
13
Якщо у вас є theadширина повинна бути встановлена ​​на їїth
— Джонатан де М.
Не працює, якщо є доступна підпис таблиці:<table><caption>...</caption><tbody>....</tbody></table>
— malisokan
2
Просто використовуйте td:first-of-type { width: 150px; }. Не потрібно двох селекторів. Також майте на увазі, що перший рядок таблиці з table-layout: fixedвизначає ширину.
— Зак Сосьє
1
@ZachSaucier робить тут справді важливий момент, який легко не помітити. Ви можете вказати, який рядок для браузера починати переглядати ширину, встановивши таблицю-макет: закріплену для цього конкретного рядка. Всюди, де я бачив, лише говорили: "це починає дивитися на першу клітинку".
— 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>

Будь ласка, зверніть увагу, що ми стилюємо не тд.

— kta
джерело
2
великий підказковий стіл tr th: nth-child (4)
— Paramvir Singh 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 стовпців, вони занадто вузькі.
— Річард Ноп,
gotcha. Ви можете це виправити, помістивши вміст у те, tdщо охоплює чотири ths таким чином: <div style="width:80px;">Richard Knop</div> Встановіть widthдля суми всіх окремих tds. Дивіться тут jsfiddle.net/6p9K3/2
— Jason Gennaro
3

Що ви могли б зробити, це щось подібне (псевдокод):

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

В основному, розділіть таблицю на дві таблиці і додайте її до іншої таблиці.

— кей
джерело
23
вкладені таблиці - найкращі таблиці
— user1721135
Я знаю, що це псевдокод, але це було б чудово, як HTML-фреймворк, такий як Pug.js!
— alistair
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.