0

私のhtmlは次のようなものです：

<html class="t1">
<tr>
<td></td>
<td><table class="t2 grid"><tr><td></td></tr></table></td>
<td></td>
</tr>
</html>

私のCSSには次のものがあります。

.t1
{
 display: table;
 width: auto; /* 885*/
 border-collapse: collapse;
 border: 1px solid #dddddd;
}
.t1 td
{
 border-collapse: collapse;
 border: 1px solid #dddddd;
}

.t2
{
 display: table;
 width: auto; /* 885*/
 border-collapse: collapse;

}
.t2 td
{
 border-collapse: collapse;

}

.t2 grid
{
            border-top:1px solid #eeeeee !important;
            border-bottom:1px solid #eeeeee !important;
            border-left: none !important;
            border-right: none !important;
}
.t2 grid td
{
            border-top:1px solid #eeeeee !important;
            border-bottom:1px solid #eeeeee !important;
            border-left: none !important;
            border-right: none !important;
}

申し訳ありませんが、実際のCSSまたはHTMLを投稿することはできませんが、それがその考えです。

何らかの理由で、親テーブルのグリッド線が内側のテーブルの各行の右/左に表示されています。

私はクロムを見ています、そして私は計算されたスタイルを見ることができます、そして親のスタイルはまだ有効です。

どうすればこれを修正できますか？

問題は、スタイル（私は思う）が2回適用されているため、内側のテーブルの外側の境界が非常に強くなっていることです。

4

1 に答える 1

1

問題は、CSSスタイルの命名方法にあります。すべきではあり.t2.grid tdません.t2 grid td。

于 2012-07-19T15:57:29.960 に答える