HTML テーブルの Colgroup でテキストの配置を制御できますか?

HTML テーブルの Colgroup でのテキストの配置

テーブル要素内の一貫性を維持するために、テーブル要素内のすべてのセルを均一にスタイル設定するために Colgroup が頻繁に使用されます。指定された列。コルグループは背景色などの要素を効果的に制御しますが、テキストの配置にはこのメソッドではアクセスできないままです。

次の例を考えてみましょう。

<code class="html"><table id="myTable" cellspacing="5">
    <colgroup id="names"></colgroup>
    <colgroup id="col20" class="datacol"></colgroup>
    <colgroup id="col19" class="datacol"></colgroup>
    <colgroup id="col18" class="datacol"></colgroup>

    <thead>
        <th> </th>
        <th>20</th>
        <th>19</th>
        <th>18</th>
    </thead>
    <tbody>
        <tr>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
        </tr>
    </tbody>
</table></code>

<code class="css">#names {
    width: 200px;
}

#myTable .datacol {
    text-align: center;
    background-color: red;
}</code>

CSS コードで示されているように、「」を割り当てます。 text-align: center" を "datacol" クラスに追加しても、予期した結果が得られません。これは、テキストの配置を除き、列の CSS プロパティの適用範囲が制限されているためです。

この問題を修正するには、次の CSS ルールを実装できます。

<code class="css">#myTable tbody td { text-align: center }
#myTable tbody td:first-child { text-align: left }</code>

この調整により、すべての表のセルが中央に配置されます。ただし、最初の列は左揃えのままです。特に、この回避策は IE6 と互換性がなく、互換性がないにもかかわらず、テキストの配置が誤って列に適用されます。

さらに、提供された HTML コードには無効な要素構造が含まれています。 セクションに必要な がありません。タグ。

以上がHTML テーブルの Colgroup でテキストの配置を制御できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。