1

我有一张简单的桌子

表格中的单元格适合文本加上一些额外的空间，大约 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>

这与长公园名称环绕到下一行的事实有关

4

2 回答 2

0

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

注意：避免使用width的属性<td>，而是使用 CSS。

于 2013-10-16T15:04:18.947 回答
0

工作演示：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>
于 2013-10-16T15:13:50.023 回答