Html 带有表格布局的表格:固定;以及如何使一列更宽
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6253963/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Table with table-layout: fixed; and how to make one column wider
提问by Richard Knop
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/
jsfiddle:http: //jsfiddle.net/6p9K3/
Notice the first column, I want it to be 300px
wide.
注意第一列,我希望它很300px
宽。
回答by clairesuzy
You could just give the first cell (therefore column) a width and have the rest default to auto
你可以只给第一个单元格(因此是列)一个宽度,其余的默认为 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
elementitself
或者,获取列宽的“正确方法”可能是使用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>
回答by kta
The important thing of table-layout: fixed is that the column widths are determined by the first row of the table.
table-layout: fixed 的重要一点是列宽由表格的第一行决定。
So
所以
if your table structure is as follow (standard table structure)
如果您的表结构如下(标准表结构)
<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>
if you would like to give a width to second column then
如果你想给第二列一个宽度
<style>
table{
table-layout:fixed;
width: 100%;
}
table tr th:nth-child(2){
width: 60%;
}
</style>
Please look that we style the th not the td.
请注意我们的风格不是 td。
回答by Jason Gennaro
Are you creating a very large table (hundreds of rows and columns)? If so, table-layout: fixed;
is a good idea, as the browser only needs to read the first row in order to compute and render the entire table
, so it loads faster.
您是否正在创建一个非常大的表(数百行和数百列)?如果是这样,这table-layout: fixed;
是个好主意,因为浏览器只需要读取第一行即可计算和渲染整个table
,因此加载速度更快。
But if not, I would suggest dumping table-layout: fixed;
and changing your css as follows:
但如果没有,我建议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;
}
回答by kei
What you could do is something like this (pseudocode):
你可以做的是这样的(伪代码):
<container table>
<tr>
<td>
<"300px" table>
<td>
<fixed layout table>
Basically, split up the table into two tables and have it contained by another table.
基本上,将表拆分为两个表并将其包含在另一个表中。