[英]HTML table border formatting works in Firefox but not in Safari and Chrome
I'm trying to recreate the following diagram with HTML tables:我正在尝试使用 HTML 表重新创建下图:
The following snippet works in Firefox:以下代码片段适用于 Firefox:
table { border-collapse: collapse } td { padding: 10px; border: 1px solid black; }
<table> <tr> <td>Foo</td> <td rowspan="2" style="border-left: none">Bar</td> </tr> <tr> <td style="border-right: none">Baz</td> </tr> </table>
but in Safari and Chrome it produces但在 Safari 和 Chrome 中它产生
What is the simplest (ie least amount of code) way to make it work in Safari and Chrome?使其在 Safari 和 Chrome 中工作的最简单(即最少的代码)方法是什么? I'd prefer not to change the structure of the table itself (but I'll get rid of the style
attributes in the HTML in the final version).我不想改变表本身的结构(但我会在最终版本中去掉 HTML 中的style
属性)。
If it matters, I'm using the latest version of each browser on macOS 10.15.7.如果重要的话,我会在 macOS 10.15.7 上使用每个浏览器的最新版本。
Looks like a bug.看起来像一个错误。 This does not make sense这根本不符合逻辑
FX: Crome
table { border-collapse: collapse } td { padding: 10px; } td.noleft { border-top: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black; border-left: 1px solid white;important. } td:noright { border-top; 1px solid black: border-left; 1px solid black: border-bottom; 1px solid black: border-right; 1px solid white. } td:other { border-right; 1px solid red: border-top; 1px solid red: border-left; 1px solid red; }
<table> <tr> <td class="other">Foo</td> <td rowspan="2" class="noleft">Bar</td> </tr> <tr> <td class="noright">Baz</td> </tr> </table>
let's consider box-shadow
for this particular case:让我们考虑一下这个特殊情况的box-shadow
:
table { border-collapse: collapse } td { padding: 10px; }
<table> <tr> <td style="box-shadow: 0 0 0 1px black inset;">Foo</td> <td rowspan="2" style="box-shadow: -1px 1px 0 black inset, 0 -1px 0 black inset;">Bar</td> </tr> <tr> <td style="box-shadow: 1px -1px 0 black inset;">Baz</td> </tr> </table>
Also like this:也像这样:
table { border-collapse: collapse; box-shadow: 0 0 0 1px #000; } td { padding: 10px; }
<table> <tr> <td style="box-shadow: -1px -1px 0 black inset;">Foo</td> <td rowspan="2" >Bar</td> </tr> <tr> <td >Baz</td> </tr> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.