我有一个表格，我将固定的“名称”列宽度设置为 200 像素。
当任何一行中的文本环绕到下一行(形成一个 2 行单元格)时，每隔一列都会被扩展。有关可重现的代码片段，请参见下文:
<!DOCTYPE html>
<html>
<head>
<style>
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
tr:nth-child(even) {
background-color: #ddddff;
}
</style>
</head>
<body>
<table style="position:fixed;background-color:white;top:0;left:100px;">
<tr>
<td width="200px;">
Park Name
</td>
<td>
Park Viewed
</td>
<td>
Book Now Button
</td>
<td>
Website Button
</td>
<td>
Call Button
</td>
<td>
Email Button
</td>
<td>
Book Now Call Button
</td>
</tr>
</table>
<table style="margin-left:100px;margin-top:20px">
<tr>
<td width="200px;">
Park Name
</td>
<td>
Park Viewed
</td>
<td>
Book Now Button
</td>
<td>
Website Button
</td>
<td>
Call Button
</td>
<td>
Email Button
</td>
<td>
Book Now Call Button
</td>
</tr>
<tr>
<td>
Camp Hatteras RV Resort and Campground
</td>
<td>
1
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</body>
</html>
如果您对其进行测试，缩短公园名称(使其不换行)将提供预期的行为。问题是，当表被扩展时，固定表头(它本身就是一个表)不再与数据表大小相同。
编辑:将 CSS 移动到代码片段中，这样它就不会外包。
最佳答案
将标题放在 thead 而不是 diff 表中
<table>
<thead>
<tr>
<th class="name">col1</th>
<th>col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>data col1</td>
<td>data col2</td>
</tr>
</tbody>
</table>
然后给类设置样式
th.name {width: 200px}
这应该同时处理 header 和数据的宽度
关于html - Chrome 表格在换行时会扩展，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19409126/