[英]Change column width of table with table-layout: fixed with CSS
I have this markup 我有这个标记
<table class="small" style="table-layout: fixed;" width="600px" cellspacing="0">
<col style="100px" />
<col style="20px;"/>
<col style="20px;"/>
<col style="20px;"/>
<col style="20px;"/>
<col style="20px;"/>
<col style="20px;"/>
<col style="20px;"/>
<col style="360px;" />
<tr>
<td style="width:100px;">.</td>
<td style="width:500px;" colspan="8">.</td>
</tr>
<tr>
<td style="width:100px;">.</td>
<td style="width:40px;" colspan="2">.</td>
<td style="width:40px;" colspan="2">.</td>
<td style="width:420px;" colspan="4">.</td>
</tr>
<tr>
<td style="width:100px;">.</td>
<td style="width:100px;" colspan="5">.</td>
<td style="width:400px;" colspan="3" align="right">.</td>
</tr>
<tr>
<td style="width:100px;">.</td>
<td style="width:20px;">.</td>
<td style="width:20px;">.</td>
<td style="width:20px;">.</td>
<td style="width:20px;">.</td>
<td style="width:20px;background:red;">.</td>
<td style="width:20px;">.</td>
<td style="width:20px;">.</td>
<td style="width:360px;">.</td>
</tr>
<tr>
<td style="width:100px;">.</td>
<td style="width:20px;">.</td>
<td style="width:20px;">.</td>
<td style="width:20px;">.</td>
<td style="width:20px;">.</td>
<td style="width:20px;background:red;">.</td>
<td style="width:20px;">.</td>
<td style="width:20px;">.</td>
<td style="width:3600px;">.</td>
</tr>
<tr>
<td style="width:200px;" colspan="6">.</td>
<td style="width:20px;">.</td>
<td style="width:20px;">.</td>
<td style="width:360px;">.</td>
</tr>
<tr>
<td style="width:200px;" colspan="6">.</td>
<td style="width:20px;">.</td>
<td style="width:20px;">.</td>
<td style="width:360px;">.</td>
</tr>
<tr>
<td style="width:240px;" colspan="8">.</td>
<td style="width:360px;">.</td>
</tr>
<tr>
<td style="width:240px;" colspan="8">.</td>
<td style="width:360px;">.</td>
</tr>
<tr>
<td style="width:240px;" colspan="8">.</td>
<td style="width:360px;">.</td>
</tr>
<tr>
<td style="width:240px;" colspan="8">.</td>
<td style="width:360px;">.</td>
</tr>
<tr>
<td style="width:240px;" colspan="8">.</td>
<td style="width:360px;">.</td>
</tr>
</table>
I am trying to change the width of the first and last column. 我正在尝试更改第一列和最后一列的宽度。 Setting the width of the first column to
100px
seems to work, however trying to set the width of the last column to 360px
doesn't? 将第一列的宽度设置为
100px
似乎可行,但是尝试将最后一列的宽度设置为360px
无效吗?
What am I doing wrong here? 我在这里做错了什么? Have tried a bunch of things.
尝试了一堆东西。 Setting the widths of every cell (above) and setting the widths of the cells I just want changed (row 1 cell 1 and row 4 cell 9).
设置每个单元格的宽度(上方)并设置我刚要更改的单元格的宽度(行1单元1和行4单元9)。
Here is a JSFiddle to demonstrate: table layout example 这是一个JSFiddle来演示: 表布局示例
One of your rows says 3600! 您的其中一行说3600!
<tr>
<td style="width:100px;">.</td>
<td style="width:20px;">.</td>
<td style="width:20px;">.</td>
<td style="width:20px;">.</td>
<td style="width:20px;">.</td>
<td style="width:20px;background:red;">.</td>
<td style="width:20px;">.</td>
<td style="width:20px;">.</td>
<td style="width:3600px;">.</td>
</tr>
Best.(screen)resolution.ever. 最佳(屏幕)分辨率
In your col style definitions you are not specifying what property you are resizing. 在col样式定义中,您未指定要调整大小的属性。 It should be:
它应该是:
<col style="width: 100px" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.