在表格行上使用flexbox？

Question

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

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

这是我正在谈论的代码

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属性混合使用。我希望冲突会把事情搞砸。我会改用divs。