CSS: prevent column from growing in display: table

November 22, 2021

I have a table with 2 columns and 2 rows. I’d like the first column to take only as much space as is needed, but it’s taking up 50% of the space:

.table {
  display: table;
  width: 100%;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

<div class='table'>
  <div class='table-row'>
    <div class='table-cell a'>a1</div>
    <div class='table-cell b'>b1</div>
  </div>
  <div class='table-row'>
    <div class='table-cell a'>a2</div>
    <div class='table-cell b'>b2</div>
  </div>
</div>

The content in the first column has variable width, so I can’t set a static width on that column.

Using a table display, how can I make the first column take up only as much space as is needed? Any pointers would be greatly appreciated!

>Solution :

You could give a width of 0px to all of your cells in the first-column. When the content is larger than the specified width, then the width argument is ignored. The cell with the largest content will determine the total width of the first column.

.table {
  display: table;
  width: 100%;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

.table-cell.a {
  width: 0px;
}

<div class='table'>
  <div class='table-row'>
    <div class='table-cell a'>a1</div>
    <div class='table-cell b'>b1</div>
  </div>
  <div class='table-row'>
    <div class='table-cell a'>a2</div>
    <div class='table-cell b'>b2</div>
  </div>
</div>