td.rhead { width: 300px; }
为什么CSS宽度不能工作?
<table>
<thead>
<tr>
<td class="rhead">need 300px</td>
<td colspan="7">Week #0</td>
<td colspan="7">Week #1</td>
<!-- etc..-->
</tr>
<tr>
<td class="rhead"></td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<!-- etc... -->
</tr>
<thead>
</table>
此外,position:fixed,absolute等对td宽度有什么作用?我要找的是一个理由,而不仅仅是一个解决办法。我希望了解它是如何工作的。
发布于 2018-04-02 09:51:03
display: table-cell
不会考虑宽度,并会根据整个表的宽度进行折叠。你可以很容易的解决这个问题,只display: block
需要在表格单元格内有一个指定宽度的元素,例如
<td><div style="width: 300px;">wide</div></td>
如果它<table>
本身是position: fixed
或绝对的,这应该不会有太大的区别,因为单元格的位置相对于表格是全部静态的。
你可以使用,min-width
而不是width
。
发布于 2018-04-02 11:13:12
你最好用table-layout: fixed
Auto是默认值,对于大型表,当浏览器迭代它以检查所有大小时,可能会造成一些客户端滞后。
Fixed更好,并且呈现得更快。表的结构取决于表的总体宽度和每个列的宽度。
table {
width: 100%;
table-layout: fixed;
}
.header-row > td {
width: 100px;
}
td.rhead {
width: 300px
}
https://stackoverflow.com/questions/-100003755
复制相似问题