1

シンプルなテーブルがあります

テーブル内のセルは、テキストと余分なスペース、約 4 スペース程度に収まります。2 番目の同様のテーブルがposition:fixed;あり、テキストの周りの余分なスペースがゼロに縮小されるため、2 つのテーブルは同じ幅ではなくなります。

必要なのは、実際のテーブルと同じ幅で、同じ画面位置に固定されたヘッダー「テーブル」です

編集:これは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 に答える