5

次のコードは、すべてのブラウザー ( PC 上の Google Chrome 最新版を除く) で、CSS で指定されているように、tbody テーブル セルに境界線を表示します。

Chrome PC では、広告枠は表示されますが、TD 枠は表示されません。なんで？Chrome のバグですか、それとも HTML/CSS のバグですか?

それを複製するjsFiddleを次に示します。

<table width="505" cellspacing="0" cellpadding="0" border="0">
<tbody>
    <tr>
        <td>Testing</td>
        <td>123</td>
    </tr>
    <tr>
        <td>Testing</td>
        <td>456</td>
    </tr>
</tbody>
<thead>
    <tr>
        <th>foo</th>
        <th>bar</th>
    </tr>
</thead>


table {
width:736px;
border-collapse: collapse;
thead {
    border-top: 2px solid #aaaaaa;
    tr {
        th {
            border: 0;
            padding: 12px 5px;
        }
    }
}
tbody {
    border-top:0;
     tr {
         td {
            padding: 10px 5px;
            border-top: 1px solid #aaaaaa;
            border-bottom: 1px solid #aaaaaa;
         }
     }
4

4 に答える 4

6

theadの後にtbodyを置いてみてください。

HTML

<table width="505" cellspacing="0" cellpadding="0" border="0">
    <thead>
        <tr>
            <th>foo</th>
            <th>bar</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Testing</td>
            <td>123</td>
        </tr>
        <tr>
            <td>Testing</td>
            <td>456</td>
        </tr>
    </tbody>
</table>

JSFiddle

MDNから:

thead - テーブル要素。thead は、暗黙的に定義されている場合でも、caption または colgroup 要素の後、tbody、tfoot、および tr 要素の前に表示する必要があります。

于 2013-03-28T17:33:40.513 に答える
1

とのために取り外しborder-collapse: collapseて使用します。border-topTDborder-bottomTABLE

ライブデモ

于 2013-03-28T17:42:30.390 に答える
0

境界線の色を隠していた を使用したテーブル-webkit-backface-visibility:hidden;があったので、修正するために を使用し-webkit-backface-visibility:visible;ました。

于 2015-03-24T17:06:56.160 に答える
0

これを試して。

table {
    width:736px;
    border-collapse: collapse;
}
thead {
    border-top: 2px solid #aaaaaa;
}
th {
    border: 0;
    padding: 12px 5px;
}
tbody {
    border-top:0;
}         
td {
    padding: 10px 5px;
    border-top: 1px solid #aaaaaa;
    border-bottom: 1px solid #aaaaaa;
}
于 2013-03-28T17:36:34.957 に答える