CODEWITHSUNDEEP
htmlcssflexbox
bluenote10
bluenote10

Reputation: 26530

Using flexbox on table header <th> elements

I have a scenario which requires a complex layout within table header <th> elements. I want to approach the problem by making the <th> elements a flex container.

However, if I start with this minimal example

enter image description here

and change the <th> elements to display: inline-flex, the table becomes:

enter image description here

I.e., the column width of the header no longer matches the column width of the <td> elements.

How can I make use of flexbox inside the header without messing up column rendering?

Edit to clarify the use case: My <th> elements will eventually contain multiple elements, with left+right alignment (similar to this question). In addition I want to be able to control the stretch behavior (that's why flexbox instead of just floats).

Example jsfiddle:

<table>
  <thead>
    <tr>
      <th class="column-header">A</th>
      <th class="column-header">B</th>
      <th class="column-header">C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Something</td>
      <td>Something</td>
      <td>Something</td>
    </tr>
  </tbody>
</table>

table, th, td {
  border: 1px solid #000;
}

.column-header {
  display: inline-flex;
}

Upvotes: 7

Views: 13425

Answers (1)

Paulie_D
Paulie_D

Reputation: 114991

My elements will eventually contain multiple elements, with left+right alignment. In addition I want to be able to control the stretch behavior (that's why flexbox instead of just floats).

In that case, you need to use a div inside each th and flex that.

table,
th,
td {
  border: 1px solid #000;
}

.column-header div {
  display: flex;
  justify-content: space-between;
}
<table>
  <thead>
    <tr>
      <th class="column-header">
        <div><span>A</span><span>A</span></div>
      </th>
      <th class="column-header">
        <div><span>B</span><span>B</span></div>
      </th>
      <th class="column-header">
        <div><span>C</span><span>C</span></div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Something</td>
      <td>Something</td>
      <td>Something</td>
    </tr>
  </tbody>
</table>

Upvotes: 20

Related Questions