使用 rowspan 时，如何让 table 行在所有浏览器中正确调整大小？

Question

我正在尝试使用 rowspan 编写一些简单的 HTML/CSS。我很确定代码是正确的，但它没有给出我期望的结果。此外，每个浏览器都会给出 不同的 结果。我以为 HTML 应该是一个标准？

可以找到一些简化的代码here。

这就是我想要实现的目标。三行 table，高度取决于其内容，中间一行 2px，其他两行平分剩余 space:

这是我在 Chrome 中得到的：

这是我在 Safari 中得到的：

这是我在 Firefox 中得到的：

我尝试使用 div 而不是 tables（display: table-cell 等），但它只会导致更多问题，例如结果与页面上的其他元素未对齐。

我的问题是：如何在所有浏览器中始终如一地实现预期结果？

我宁愿不使用Javascript来解决这个问题。

为了避免XY问题，下面是我追求的实际效果的截图（在Chrome工作）：

这就是 Safari 中的一切：

这是它在 Firefox 中搞砸了：

Answer 1

我会使用 div 而不是表格来解决这个问题。使用父元素和子元素的位置属性以及子元素上的变换属性以允许它位于带边框的父元素的前面。这将是跨浏览器兼容的。试试这个：

HTML:

<div class="container">
  <h1 class="title"><span>Title</span></h1>
</div>

CSS:

.container {
  position: relative;
  border: 1px solid #000;
}

.title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}

.title span {
  display: inline-block;
  padding: 0.2em 0.7em; 
  line-height: 1.5em;
  background-color: #fff;
}

Answer 2

HTML 是浏览器遵循的标准，但浏览器却不遵循。用col和row spans来控制table是特别棘手的。我会尝试使用 table-less 和 flex 布局，如以下简化示例所示。

body {
  background-color:white;
}

.outer {
  width:200px;
  border:1px solid grey;
  padding:16px;
  position:relative;
  margin-top:20px;
}

.title {
  margin:-24px auto 0px auto;
  width:60px;
  background-color:white;
  text-align:center;
}

.icon-container {
  display:flex;
  flex-wrap:wrap;
}

.icon {
  border:1px dashed grey;
  height:50px;
  margin:8px;
  flex-grow:1;
}

<div class="outer">
  <div class="title">TITLE</div>
  <div class="icon-container">
    <div class="icon">ICON 1</div>
    <div class="icon">ICON 2</div>
    <div class="icon">ICON 3</div>
    <div class="icon">ICON 4</div>
  </div>
</div>

使用 rowspan 时，如何让 table 行在所有浏览器中正确调整大小？

How do I get table rows to size correctly in all browsers when using a rowspan?

html

css

html-table

cross-browser