使用text-alignセンター colgroup
https://stackoverflow.com/questions/1238115
-
11-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
いテーブルのマイページに使っているcolgroupsフォーマット全ての細胞にはこのカラムも同じように作品をいい背景の色。ことができないのでそうした事態を生み出した原因を理解text-alignセンターは動作しません。なのテキスト中心である。
例:
<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>
CSS:
#names {
width: 200px;
}
#myTable .datacol {
text-align: center;
background-color: red;
}
解決
のみ限定セットはの列に適用され、そしてtext-alignはそのうちの一つではありません。
の「唯一の4つのプロパティは、テーブルの列に適用される理由の謎」についてを参照してください。このようなケースである理由の説明ます。
あなたの簡単な例では、それを修正する最も簡単な方法は、これらのルールを追加するには、次のようになります。
#myTable tbody td { text-align: center }
#myTable tbody td:first-child { text-align: left }
これは最初の列を除いて、すべての表のセルを中央であろう。これは、IE6では動作しませんが、IE6でtext-alignはは、列にの実際（誤って）作業を行います。 IE6は、すべてのプロパティ、または単に大きなサブセットをサポートしている場合、私は知りません。
ああ、あなたのHTMLは無効です。 <thead>は<tr>を逃しています。
他のヒント
同様の質問: なぜスタイリングテーブル列ないです。
のみとさせていただきセット ボーダー, 背景, 幅 や 視認性 物件により、この細胞なの直接の子のカラムのみに表示されません。
があります。最も簡単なるので、これまでのクラスにはそれぞれの細胞できます。残念なことにもなることHTMLでもないミツバチの問題がん発生のテーブルからデータベースなど。
別の解決のための現代のブラウザ（なIE6)では一部の疑似クラス. tr > td:first-child 選定の細胞ます。Opera、Safari、google Chrome、Firefox3.5にも対応 :nth-child(n) セレクターで特定のターゲットーがある。
このまま使用 td+td から選択すると第二列目以降で実際には"すべて選択 td 要素の一 td 要素を左）。 td+td+td から選択し第三の柱できることファッションをオーバー。正直が、このほど大きくありません。
以下の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>
他の回答で述べた制限に加えて、2018年2月の時点で、可視性：崩壊はまだバグのため、Chromeとクロムベースのブラウザでcolgroupsでは動作しません。 「 CSSのCOLの可視性を参照してください：崩壊はクロームの上では動作しません。 」。だから私は（あなたがChromeと他のクロムベースのブラウザ用ポリフィルのいくつかの並べ替えを使用していない限り）現在使用可能なプロパティはちょうど境界線、背景、幅であると信じています。バグは https://crbug.com/174167 から追跡することができる。
