Using flexbox on a table row?

user_2264600 0
Viewed 29084

I can't find any quick answers to this. Is it cool to use display: flex; on a table row (<tr>) element?

It feels wrong. But if there's no compatibility issues I will do it

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>

flexbox html-table css html
2 Answers

There would be compatibility issues between MS IE/Edge and other browsers. Edge still implements older version of Flexbox spec, according to which table cells inside the flex container should be wrapped with an anonymous table box, and this anonymous table becomes the only flex element. According to the newer spec, each table cell becomes the individual flex item. Chrome always behaved this way (in fact, the spec was changed to match reality better), and Firefox changed its behavior at some point and now it behaves the same way as Chrome.

Also, by making the table row the flex container you destroy one of the biggest advantages of the table structure — the 2D structure of rows and columns. Since cells don't belong to the table context anymore, they wouldn't align into columns, unless you set them the same widths manually. (This might be irrelevant in this particular case, but relevant in general case of applying Flexbox styles to the table elements).

That said, this hack can be useful in a very limited set of situations for making tables responsive for a narrow screen (using flex-wrap:wrap). But usually I'd avoid it.

user_25332150
Related