web-dev-qa-db-ja.com

colgroupでテキストの中央揃えを使用する

私は自分のページにテーブルを持っています。colgroupsを使用してこの列のすべてのセルを同じ方法でフォーマットし、背景色などすべてに適しています。しかし、テキスト揃えセンターが機能しない理由を理解することはできません。テキストを中央に揃えません。

例：

<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>&nbsp;</th>
        <th>20</th>
        <th>19</th>
        <th>18</th>
    </thead>
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

CSS：

#names {
    width: 200px;
}

#myTable .datacol {
    text-align: center;
    background-color: red;
}
htmlcsshtml-tablecss-tables
65
Sander

のみ CSSプロパティの限定セットが列に適用されます 、およびtext-alignはそれらの1つではありません。

"テーブル列に4つのプロパティだけが適用される理由の謎" を参照してください。

簡単な例では、これらを修正する最も簡単な方法は次のルールを追加することです。

#myTable tbody td { text-align: center }
#myTable tbody td:first-child { text-align: left }

これにより、最初の列を除くすべてのテーブルセルが中央に配置されます。これはIE6では機能しませんが、IE6ではtext-aligndoesは実際に（間違って）列を処理します。 IE6がすべてのプロパティをサポートしているか、それともより大きなサブセットだけをサポートしているかはわかりません。

ああ、あなたのHTMLは無効です。 <thead>が抜ける<tr>。

110
mercator

次のCSSを使用すると、1つ以上のクラスをテーブル要素に追加するだけで、それに応じて列を揃えることができます。

CSS

.col1-right td:nth-child(1) {text-align: right}
.col2-right td:nth-child(2) {text-align: right}
.col3-right td:nth-child(3) {text-align: right}

HTML

<table class="col2-right col3-right">
  <tr>
    <td>Column 1 will be left</td>
    <td>Column 2 will be right</td>
    <td>Column 2 will be right</td>
  </tr>
</table>

例： http://jsfiddle.net/HHZsw/

4
Fred

2018年2月現在、他の回答に記載されている制限に加えて、ChromeおよびChromiumベースのブラウザのcolgroupsでは、バグのため、visibility：collapseはまだ機能しません。「 CSS col visibility：collapseはChromeでは機能しません "。現在使用可能なプロパティは、ボーダー、背景、幅だけです（Chromeと他のChromiumベースのブラウザ）。 https://crbug.com/174167 でバグを追跡できます。

0
Jacob C.