CODEWITHSUNDEEP
htmlcssflexbox
Paran0a
Paran0a

Reputation: 3447

Flex table header respecting width of the content

Currently all columns have the same width. I would like the first column with the "X" content to shrink to the width of the content inside it but without hard coding its width.

The header column that is empty should also respect the width of the content.

.table__row{
  display: flex;
}

.table__column {
  border: 1px solid blue;
  display: flex;
  flex-basis: 0;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 12px;
  overflow: hidden;
  text-align: center;
}
<div class="table">
  
  <div class="table__row -header">
    <div class="table__column"></div>
    <div class="table__column">Day</div>
    <div class="table__column">Time</div>
  </div>
  
  <div class="table__row">
    <div class="table__column">
      <a href="#">X</a>
    </div>
    <div class="table__column">Monday</div>
    <div class="table__column">12:00</div>
  </div>
  
  <div class="table__row">
    <div class="table__column">
      <a href="#">X</a>
    </div>
    <div class="table__column">Tuesday</div>
    <div class="table__column">13:20</div>
  </div>
  
  
</div>

Upvotes: 2

Views: 1953

Answers (2)

codeuix
codeuix

Reputation: 1396

Apply this css

.-header .table__column:first-child{
  display: contents;
}

<div class="table">

  <div class="table__row -header">
    <div class=" table__column"></div>
    <div class="table__column">Day</div>
    <div class="table__column">Time</div>
  </div>

  <div class="table__row">
    <div class="shrink table__column">
      <a href="#">X</a>
    </div>
    <div class="table__column">Monday</div>
    <div class="table__column">12:00</div>
  </div>

  <div class="table__row">
    <div class="shrink table__column">
      <a href="#">X</a>
    </div>
    <div class="table__column">Tuesday</div>
    <div class="table__column">13:20</div>
  </div>


</div>

enter image description here

Upvotes: 0

lbueker
lbueker

Reputation: 186

This should work. Basicly you need to set flex-grow to 0 for the elements in that "column".

.table__row{
  display: flex;
}

.table__column {
  border: 1px solid blue;
  display: flex;
  flex-basis: 0;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 12px;
  overflow: hidden;
  text-align: center;
}

.shrink {
  flex-grow: 0;
}
<div class="table">
  
  <div class="table__row -header">
    <div class="shrink table__column"></div>
    <div class="table__column">Day</div>
    <div class="table__column">Time</div>
  </div>
  
  <div class="table__row">
    <div class="shrink table__column">
      <a href="#">X</a>
    </div>
    <div class="table__column">Monday</div>
    <div class="table__column">12:00</div>
  </div>
  
  <div class="table__row">
    <div class="shrink table__column">
      <a href="#">X</a>
    </div>
    <div class="table__column">Tuesday</div>
    <div class="table__column">13:20</div>
  </div>
  
  
</div>

Upvotes: 3

Related Questions