表的网格项目的底部空白不适用

Question

<body>
  <table></table>
  <p></p>
</body>

body {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
}
table, p {
  grid-column: 6 / span 14;
}
table {
  margin-bottom: 1em;
}

[未按下p后，您会看到以下table。

[仅在Firefox 71上发生。在Chrome 78，Safari 13.0.3上运行良好。

Answer 1

对于css-grid，请使用与<table></table>不同的标签。在下面，我使用了一个自定义标签。原因是table元素充满了用户代理定义的样式和用于显示表格数据的显示代码。这正与任何尝试更改其显示类型的努力进行斗争。

HTML

<body>
  <table-tag></table-tag>
  <p></p>
</body>

CSS

body {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
}
table-tag, p {
  grid-column: 6 / span 14;
}
table-tag {
  margin-bottom: 1em;
}