1

問題を再現するために、この非常に単純なフィドルを作成しました。私はFirefoxで期待されていることを行いますが、Chromeでは期待していません。同じ目的を達成するための回避策はありますか?

HTMLコードは次のとおりです。

<table  cellpadding="1">
    <thead>
        <tr>
            <th>Adskldj</th>
            <th>dfsdfd</th>
        </tr>
    </thead>
    <tbody>
        <tr><th>Adskldj</th><th>dfsdfd</th></tr>
        <tr><th>Adskldj</th><th>dfsdfd</th></tr>
        <tr><th>Adskldj</th><th>dfsdfd</th></tr>
        <tr><th>Adskldj</th><th>dfsdfd</th></tr>
    </tbody>
</table>

そして、CSS

table {
    border-collapse:collapse;
}
td, th {
    border-top: 1px solid #888;
    border-bottom: 1px solid #888;
    padding: 30px;
}
thead {
    background-color: #DDD;
    box-shadow:inset 0 0 10px #000000;
}
4

2 に答える 2

1

ボックスシャドウはブロックレベルの要素にある必要があると思います。したがって、それはtheadでは機能しません。

私はスペックを見つけようとしましたが、それでも。ブロックレベル。

于 2013-03-21T15:25:27.270 に答える
0

私は、テーブルタグをバイパスし、代わりにcss表示プロパティを使用して、CSS3の凝った機能を使用し、ネイティブのテーブル要素ごとにクラスを作成して、それを<div>または他の要素に適用することに成功しました。

次のようなCSS：

.row{
    display:table-row;
}
.cell{
    display:table-cell;
}

等

これにより、通常のテーブルでは不可能ないくつかの優れた効果が可能になります。

于 2013-03-21T15:40:35.790 に答える