Question

我有一张简单的表

表格中的单元格适合文本加上一些额外的空间，大约4个空格左右。我有第二个类似的表，position:fixed;，它将文本周围的额外空间缩小为零，因此两个表不再是相同的宽度。

我需要的是一个标题“表格”，其宽度与实际表格相同，但固定在同一个屏幕位置

修改：仅限Chrome浏览器。

编辑：要重现此问题，请将以下代码复制到html文档中并使用chrome打开它：

<!DOCTYPE html>
<html>
<head>

<link href="http://bookyoursite.com/assets/admin.css" media="screen" rel="stylesheet" type="text/css" />
</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>

这与长公园名称包裹到下一行

的事实有关

Answer 1

默认情况下，表格单元格中的文本周围没有空格 - 它们会自动展开，足以容纳内容（直到达到表格容器边界，之后内容可能会换行）。听起来像在非标头表中，单元格被某些行中的单元格内容扩展（其中文本比列标题长）。如果您希望两个表中的列具有相等的宽度，则最简单的解决方案是明确指定所有宽度。

注意：请避免使用width的{{1}}属性，而是使用CSS。

Answer 2

工作演示：http://jsfiddle.net/L7tzB/

代码：

<table cellpadding="0" cellspacing="0" border="1" align="center" style="text-align:  center;">
<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 cellpadding="0" cellspacing="0" border="1" align="center" style="text-align: center;">
<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>

设置固定位置时表格列宽缩小（仅限Chrome）

2 个答案: