20

CSSを使用して既存のHTMLページにテーブルを埋め込もうとして問題が発生しました。

このCSSは、デフォルトで次のようなスタイル定義を使用してテーブルのヘッダーを非表示にしています。

.tablestuff thead {
     display: none;
}

しかし、テーブルを表示したいので、「display：block」（javascriptを使用）を使用してthead要素のスタイルを設定してみました。これによりヘッダーが表示されますが、ヘッダーの列がtd列と一致しません。

HTMLを次のように縮小し（タイプミスを最小限に抑えて）、javascriptで設定されたthead要素のスタイルを表示します。

<div class="tablestuff">
<table border="1">
<thead style="display:block">
<tr>
<th id="th1" style="width: 20px"></th>
<th id="th2" style="width: 20px"></th>
</tr>
</thead>
<tbody>
<tr>
<td headers="th1" style="width: 20px"></td>
<td headers="th2" style="width: 20px"></td>
</tr>
</tbody>
</table>
</div>

ヘッダーを表示し、td列と正しく整列させるにはどうすればよいですか？

4

8 に答える 8

43

noneCSS には、一般的に使用される、inline、inline-block、およびよりも多くの表示モードが含まれていますblock。実際、 かなりの数があります。

display:block;この場合、 isの代わりに使用したいものが表示されますdisplay:table-header-group;。

テーブルに適用されるさまざまなスタイルの例を次に示します。

http://jsfiddle.net/CrYdz/1

于 2012-08-28T05:23:26.210 に答える
10

この問題はdisplay:block、thead の in the style 属性が原因で発生します。

に変更しますdisplay:table-header-group

于 2012-08-28T05:23:40.520 に答える
5

thead 要素を表示する場合は、次の値を使用します。display: table-header-group;

于 2012-08-28T05:22:52.247 に答える
4

テーブルのテーブル ヘッダーとテーブル ボディに同じ幅を設定するには:

<table style="table-layout:fixed">
于 2014-11-18T11:27:15.637 に答える
0

おそらく、TH のコンテンツは TD のコンテンツよりも幅が広く、実際には幅が設定されている 20px ではありません。

したがって、最初にページをロードせずにロードするため、テーブルは TD の幅を取得します。次に、js で THEAD を表示すると、テーブルの幅は同じままですが、TH の幅が異なる可能性があります。

于 2012-08-28T05:24:36.417 に答える
-1

css を使用して、thad の代わりに th を表示および非表示にする

/* to hide */
.tablestuff thead th{
     display: none;
}

/* to show */
.tablestuff thead th{
     display: table-cell;
}
于 2012-08-28T05:25:28.723 に答える