CODEWITHSUNDEEP
htmlcss
aloisdg
aloisdg

Reputation: 23521

How can I make the widths of other cells to be a percentage of the remaining width?

With a table that has automatic margins and cells that have a predetermined width, how can I make the widths of other cells to be a percentage of the remaining width?

div {
  padding: 10px;
  background: purple;
}

section {
  background: white;
  width: calc(50% - 60px);
  display: inline;
}

section:first-child {
  width: 60px;
}
<div>
  <section>cell 1</section>
  <section>cell 2</section>
  <section>cell 3</section>
</div>

inspired by a question from KaizenCyrus

Upvotes: 0

Views: 93

Answers (1)

aloisdg
aloisdg

Reputation: 23521

This is a perfect job for grid. Use display: grid; and grid-template-column: 60px 1fr 1fr; (1fr means that the column of the 2th and 3th has 1 fraction of the remaining size of the table).

Bonus: use grid gap to handle the margin between elements.

div {
  display: grid;
  grid-template-columns: 60px 1fr 1fr;
  gap: 10px;
  padding: 10px;
  background: purple;
}

section {
  background: white;
  display: grid;
  place-items: center;
}
<div>
  <section>cell 1</section>
  <section>cell 2</section>
  <section>cell 3</section>
</div>

inspired by an answer from Routine_Potential_59

Upvotes: 1

Related Questions