在表格行上使用 flexbox？

Question

我找不到任何快速的答案。在表格行 (<tr>) 元素上使用 display: flex; 很酷吗？

感觉不对。但是如果没有兼容性问题我会这样做

Here's a codepen of what I'm talking about

input[type="radio"]:checked,
input[type="radio"]:not(:checked) {
  position: absolute;
  left: -9999px;
}

input[type="radio"]:checked+label,
input[type="radio"]:not(:checked)+label {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  line-height: 20px;
  display: inline-block;
  color: #666;
}

input[type="radio"]:checked+label:before,
input[type="radio"]:not(:checked)+label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 2px solid #ddd;
  border-radius: 100%;
  background: #fff;
}

input[type="radio"]:checked+label:after,
input[type="radio"]:not(:checked)+label:after {
  content: '';
  width: 14px;
  height: 14px;
  background: #fc8f3f;
  position: absolute;
  top: 4px;
  left: 4px;
  border-radius: 100%;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

input[type="radio"]:not(:checked)+label:after {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}

input[type="radio"]:checked+label:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.dots-wrap form {
  width: 700px;
}

.dots-wrap div {
  width: 900px;
}

.dots-wrap form,
.dots-wrap div {
  display: flex;
  justify-content: space-between;
}

.dots-wrap div label {
  font-size: 11px;
}

h2.strikethrough {
  position: relative;
  z-index: 1;
  width: 700px;
}

h2.strikethrough:before {
  border-top: 2px solid #dfdfdf;
  content: "";
  margin: 0 auto;
  /* this centers the line to the full width specified */
  position: absolute;
  /* positioning must be absolute here, and relative positioning must be applied to the parent */
  top: 32px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 95%;
  z-index: -1;
}

.dots-wrap form div h2 {
  display: flex;
  justify-content: space-between;
}

.dots-wrap form div {
  width: 100%;
}

.dots-wrap form div h2 p {
  margin: 0px;
}


/*dasdfasdfasdfasdfasdfasdfasdf*/

<div class="dots-wrap">
  <form action="#">
    <div>
      <h2 class="strikethrough">
        <p>
          <a href="#tab-t1">
            <input type="radio" id="test1" name="radio-group" checked>

            <label for="test1"></label>
          </a>
        </p>
        <p>
          <a href="#tab-t2">
            <input type="radio" id="test2" name="radio-group">
            <label for="test2"></label>
          </a>
        </p>
        <p>
          <a href="#tab-t3">
            <input type="radio" id="test3" name="radio-group">
            <label for="test3"></label>
          </a>
        </p>
        <p>
          <a href="#tab-t4">
            <input type="radio" id="test3" name="radio-group">
            <label for="test4"></label>
          </a>
        </p>
      </h2>
    </div>
  </form>
  <div>
    <div>
      <label for="test1">Marketing & Lead Generation</label>
    </div>
    <div>
      <label for="test2">Underwriting</label>
    </div>
    <div>
      <label for="test3">Customer Management</label>
    </div>
    <div>
      <label for="test4">Fraud, Collections & Recoveries</label>
    </div>
  </div>
</div>

Answer 1

在兼容性问题方面，您只需要测试不同的浏览器如何呈现应用于表格元素的 flex 属性。我在 Chrome 中没有发现任何问题。

就最佳实践而言，我也没有发现任何问题。 HTML 表格元素因其语义价值而存在。应用于这些元素的 CSS 没有语义价值。因此，将表行 (tr) 从默认的 display: table-row 切换到 display: flex，不会改变语义，只会改变布局。

但是，我认为您正在冒险进入未知领域。您将最旧的 HTML 与最新的 CSS 混合在一起。因为浏览器具有用于呈现表格的长期算法，所以我不会将它们与 flex 属性混合使用。我希望一场冲突会把事情搞砸。我会改用div。

Answer 2

MS IE/Edge 和其他浏览器之间会有兼容性问题。 Edge 仍然实现旧版本的 Flexbox 规范，根据该规范，flex 容器内的表格单元格应该用匿名表格框包裹，并且这个匿名表格成为唯一的 flex 元素。根据较新的规范，每个表格单元格成为单独的弹性项目。 Chrome 一直都是这样（事实上，为了更好地匹配实际，规范已经更改），而 Firefox 在某些时候改变了它的行为，现在它的行为方式与 Chrome 相同。

此外，通过将表格行作为弹性容器，您会破坏表格结构的最大优势之一——行和列的 2D 结构。由于单元格不再属于表格上下文，因此它们不会与列对齐，除非您手动将它们设置为相同的宽度。 （这在这种特殊情况下可能无关紧要，但在将 Flexbox 样式应用于表格元素的一般情况下是相关的）。

也就是说，这种 hack 可以在非常有限的情况下使表格响应窄屏幕（使用 flex-wrap:wrap）。但通常我会避免它。