表与表格：固定;以及如何使一列更宽 [英] Table with table-layout: fixed; and how to make one column wider

问题描述

所以我有一个这样的表格：

  table-layout：fixed; 
  

这使得所有列具有相同的宽度。我想有一列（第一个）更宽，然后剩下的列占据表的等宽度的剩余宽度。

如何

  table {border-collapse：collapse;宽度：100％; border：1px solid black;背景：#ddd; table-layout：fixed;} table th，table td {border：1px solid＃000;} table td.wideRow，table th.wideRow {width：300px;}  
 < table class =CalendarReservationsBodyTable> < aad> < tr> < th colspan =97> Rezervovane auta< / th> < / tr> < tr> < th class =corner wideRow> Auto< / th> < th class =oddcolspan =4> 0< / th> < th class =colspan =4> 1< / th> < th class =oddcolspan =4> 2< / th> < th class =colspan =4> 3< / th> < th class =oddcolspan =4> 4< / th> < th class =colspan =4> 5< / th> < th class =oddcolspan =4> 6< / th> < th class =colspan =4> 7< / th> < th class =oddcolspan =4> 8< / th> < th class =colspan =4> 9< / th> < th class =oddcolspan =4> 10< / th> < th class =colspan =4> 11< / th> < th class =oddcolspan =4> 12< / th> < th class =colspan =4> 13< / th> < th class =oddcolspan =4> 14< / th> < th class =colspan =4> 15< / th> < th class =oddcolspan =4> 16< / th> < th class =colspan =4> 17< / th> < th class =oddcolspan =4> 18< / th> < th class =colspan =4> 19< / th> < th class =oddcolspan =4> 20< / th> < th class =colspan =4> 21< / th> < th class =oddcolspan =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 =16class =highlighted borderLefttitle =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 =14class =highlightedtitle =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： a href =http://jsfiddle.net/6p9K3/> http://jsfiddle.net/6p9K3/

请注意第一列，

解决方案

你可以给予第一个单元格（因此列）的宽度，其余默认为 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>等于< / td> < td>等于< / td> < / tr>< / table>  

---

或者正确方式获取列宽可能是使用 col 元素本身

  table {table-layout ：固定; border-collapse：collapse; width：100％;} td {border：1px solid＃000;}。width {width：150px;}  

 < table> < col span =1class =wide> < tr> < td> 150px< / td> < td>等于< / td> < td>等于< / td> < / tr>< / table>  

So I have a table with this style:

table-layout: fixed;

Which makes all columns to be of the same width. I would like to have one column (the first one) to be wider and then rest of the columns to occupy the remaining width of the table with equal widths.

How to achieve that?

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/

Notice the first column, I want it to be 300px wide.

解决方案

You could just give the first cell (therefore column) a width and have the rest default to 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>

---

or alternatively the "proper way" to get column widths might be to use the col element itself

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>

这篇关于表与表格：固定;以及如何使一列更宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！