Question

我有一个表，我将固定的“名称”列宽设置为200px。

当任何行中的文本环绕到下一行（形成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移动到代码段中，以便它不在外部来源。

Answer 1

将标题放在thead中而不是差异表

<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}

这应该考虑标题和数据的宽度

包裹时Chrome表格会延伸

1 个答案: