CODEWITHSUNDEEP
htmlcsshtml-tableflexbox
little tiny man
little tiny man

Reputation: 819

Using flexbox on a table row?

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>

Upvotes: 12

Views: 42130

Answers (2)

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13536

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.

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 371231

In terms of compatibility issues, you'll just have to test how different browsers render flex properties applied to table elements. I don't see any problems in Chrome.

In terms of best practices, I don't see any problems, either. HTML table elements exist for their semantic value. The CSS applied to these elements has no semantic value. Therefore, switching a table-row (tr) from its default display: table-row to display: flex, doesn't alter the semantics, just the layout.

However, I think you're venturing into unchartered territory. You're mixing the oldest HTML with the newest CSS. Because browsers have long-standing algorithms for rendering tables, I wouldn't mix them with flex properties. I would expect a conflict to mess things up. I would use divs instead.

Upvotes: 16

Related Questions