所以我有一个这种风格的桌子:
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
宽。
答案 0 :(得分:65)
你可以给第一个单元格(因此是列)一个宽度,其余部分默认为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
element本身
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>
答案 1 :(得分:33)
table-layout的重要之处:fixed是列宽由表的第一行决定。
所以
如果您的表结构如下(标准表结构)
<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。
答案 2 :(得分:6)
您是否正在创建一个非常大的表(数百行和列)?如果是这样,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;
}
答案 3 :(得分:3)
你能做的就是这样(伪代码):
<container table>
<tr>
<td>
<"300px" table>
<td>
<fixed layout table>
基本上,将表拆分为两个表并将其包含在另一个表中。