1

最後の質問は、完全な回答を得る前に閉じられたので、これを少し異なる段階にします。

Chrome では、1 つのテーブル セルに border-bottom を設定する場合、同じ行のすべてのセルに border-bottom を設定する必要があるようです。そうしないと、Chrome は不明なスペースをどう処理するかわかりません。

他のセルに境界線がないかのように見せるために、単純に白い境界線を使用することが提案されました。しかし、グラデーションの背景があり、白い線を表示したくない場合はどうすればよいでしょうか?

影響は1px solid transparentないようです。rgbaどちらも機能しません。

4

4 に答える 4

1

MDNによると、それはすべてborder-collapseプロパティに要約されます。

分離モデルは、従来の HTML テーブル ボーダー モデルです。隣接するセルには、それぞれ独自の境界線があります。border-spacing プロパティによって指定されたそれらの間の距離。

折りたたみ境界線モデルでは、隣接する表のセルが境界線を共有します。そのモデルでは、インセットの境界スタイルの値は溝のように動作し、アウトセットは尾根のように動作します。

個別に変更border-collapseすると正常に動作します: jsFiddle の例

于 2013-04-26T21:04:53.587 に答える
1

これはバグか、border-collapseChrome のプロパティの解釈が異なるためだと思います。http://jsfiddle.net/YZBXn/6/border-collapse: collapseから削除すると、(意図したとおり) 正常に動作するようです<table>。

別の方法として、表のセルに含まれる境界線を持つ別の要素を使用することもできます。

<td><div style="border-bottom:1px solid black;width:1.5in;">&nbsp;</div></td>

http://jsfiddle.net/YZBXn/7/

于 2013-04-26T21:02:35.173 に答える
0

透明に頼らずに動作させることができました。

<table>
    <tr><td id=cell1>bleah</td><td id=cell2>bleah</td></tr>
    <tr><td id=cell3>blah</td><td id=cell4>blah</td></tr>
</table>

#cell1 {
    border-bottom: 1px solid black;
}
#cell4 {
    border-bottom: 9px dotted red;
}
于 2013-04-26T21:07:23.837 に答える
0

問題は1px solid transparent、前の兄弟から引き伸ばされた下の「境界線」に対して透明であることです<td>。より良い方法は、テーブルを使用しないことです。

于 2013-04-26T21:02:45.917 に答える