0

我有一个表，我将固定的“名称”列宽设置为 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 移到代码片段中，使其不是外部来源。

4

1 回答 1

0

将您的标题放在 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}

这应该照顾标题和数据的宽度

于 2013-10-16T17:00:03.893 回答