带表格的表格：固定的; 以及如何使一列变宽

所以我有这种风格的桌子：

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宽。

Answer 1

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

Answer 2

表格布局的重要之处在于：列的宽度是由表格的第一行决定的。

所以

如果你的表结构如下（标准表结构）

 <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。

Answer 3

你正在创build一个非常大的表（数百行和列）？ 如果是这样， table-layout: fixed; 是一个好主意，因为浏览器只需要读取第一行来计算和渲染整个table ，所以加载速度更快。

但是，如果没有，我会build议倾销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/

Answer 4

你可以做的是这样的（伪代码）：

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

基本上，将表分成两个表，并由另一个表包含它。