How to wrap table headers consistently?

Question

I have a table where headers are dates formatted as moment().format('dd D MMM'). Sometimes they can be wrapped and it's fine, but if any header was automatically wrapped I want to force other headers to be wrapped consistently.

The problem with inconsistent wrapping

|          | Mo 5 |          | We 7 |          |          | Sa 10 |
| Su 4 Oct | Oct  | Tu 6 Oct | Oct  | Th 8 Oct | Fr 9 Oct | Oct   |
+-----------------------------------------------------------------+

I want it to be like this

| Su 4 | Mo 5 | Tu 6 | We 7 | Th 8 | Fr 9 | Sa 10 |
| Oct  | Oct  | Oct  | Oct  | Oct  | Oct  | Oct   |
+-------------------------------------------------+

It becomes even worse with different scales when three lines in one cell appear. I'm wondering if there is a way to always have the same number of lines (equal to maximum) in all header cells

The table is a regular bootstrap table with no custom classes (I'm using bootstrap-vue)

<b-table striped borderless show-empty id="timeInputs" :items="items" :fields="fields" :sort-compare="tableSort"></b-table>

This is the code of the rendered table:

<table id="timeInputs" role="table" aria-busy="false" aria-colcount="9" class="table b-table table-striped table-borderless" aria-rowcount="13">
  <!---->
  <!---->
  <thead role="rowgroup" class="">
    <!---->
    <tr role="row" class="">
      <th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="">
        <div>Name</div>
        <span class="sr-only"> (Click to sort Ascending)</span>
      </th>
      <th role="columnheader" scope="col" tabindex="0" aria-colindex="2" aria-label="Expand" class="">
        <div></div>
      </th>
      <th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">
        <div id="sun-header">Su 25 Oct</div>
      </th>
      <th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">
        <div>Mo 26 Oct</div>
      </th>
      <th role="columnheader" scope="col" tabindex="0" aria-colindex="5" class="">
        <div>Tu 27 Oct</div>
      </th>
      <th role="columnheader" scope="col" tabindex="0" aria-colindex="6" class="">
        <div>We 28 Oct</div>
      </th>
      <th role="columnheader" scope="col" tabindex="0" aria-colindex="7" class="">
        <div>Th 29 Oct</div>
      </th>
      <th role="columnheader" scope="col" tabindex="0" aria-colindex="8" class="">
        <div>Fr 30 Oct</div>
      </th>
      <th role="columnheader" scope="col" tabindex="0" aria-colindex="9" class="">
        <div>Sa 31 Oct</div>
      </th>
    </tr>
  </thead>
  ...
</table>

Welcome to SO! Do you have the option to use to Javascript? You could use JS to find the cell with the biggest height and then set the other cells to the same height and width. — Chiperific, Oct 28 '20 at 16:47
Please also add more of your table code, at least the table, thead and the tr in question — Chiperific, Oct 28 '20 at 16:50
I can use JS, but I was thinking if there is a simple way to do it with css. It seemed to me too overpowered to do such a simple task using js. — byDimasik, Oct 28 '20 at 17:16
CSS is implemented when the page loads, so you could use CSS to set a fixed height and width for all cells, but you couldn't dynamically determine which cell is the biggest and then make the others match. If you don't care about having the cells be as small as possible while still being consistent, this is a fine solution. — Chiperific, Oct 28 '20 at 17:18
I just added full table code. It's only uses default bootstrap-vue b-table properties to put data inside it — byDimasik, Oct 28 '20 at 17:19
Can you include what the rendered table looks like? With the `thead`, `tr`, etc? — Chiperific, Oct 28 '20 at 17:20

score 0 · Answer 1 · answered Oct 28 '20 at 17:26

#timeinputs th {
  // set a fixed width and height that works for your biggest possible value
  width: 140px;
  height: 140px;
}

Else, as mentioned in the comments, you can use some Javascript to find the "largest" cell and set the other cells to match.

score 0 · Accepted Answer · answered Oct 28 '20 at 21:49

0

It seems that it's not possible to do it just with css

So, I had to use JS to calculate the height of the tallest header and then manually update other headers to match the tallest one.

answered Oct 28 '20 at 21:49

byDimasik

1
3

How to wrap table headers consistently?

2 Answers2