0

テキストを折り返したテーブルヘッダーセルがいくつかありますが、これで問題ありません。ただし、ヘッダーには背景色があり、1 行のヘッダーと 2 行のヘッダー (折り返し) で高さが異なるのは見栄えが悪いです。

1 行のテキストを含むセルが 2 行のセルと同じ高さになるように、ヘッダーを特定の高さにすることはできますか? テーブルの現在の幅を維持したいので、no-wrap を使用したくありません。

行の高さを変更すると、ラップされたセルの間隔も大きくなるため、基本的にヘッダー セルの高さは異なります。

<table class = "large_headers">
    <tr>
       <th>Test1</th>
        <th>Test2</th>
    </tr>
    <tr>
       <td>abc</td>
       <td>def</td>
    </tr>
</table>

.large_headers th{
    display: table-cell;
}
4

2 に答える 2

1

マークアップが無効です。これを試して：

<table class = "large_headers">
    <tr>
        <th>Test1 foobar foobar</th>
        <th>Test2</th>
    </tr>
    <tr>
       <td>abc</td>
       <td>def</td>
    </tr>
</table>

この CSS では:

.large_headers th{
    background-color:red;
    width:20px;
}

ここでフィドル: http://jsfiddle.net/wLEu8/

于 2013-11-02T19:59:31.143 に答える