0

「名前」列の幅を200pxに固定したテーブルがあります。

いずれかの行のテキストが次の行に折り返される (2 行のセルを作成する) と、1 つおきの列が拡張されます。再現可能なコード スニペットについては、以下を参照してください。

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

差分テーブルの代わりにヘッダーをヘッドに配置します

<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 に答える