Same width and height column by css

Question

The requirement is to set equal height and equal width of column. I have used css property display table-cell for this and its works fine in terms of equal height but not well with when it comes to equal width. I know technically it is working fine but I want to make it equal width. So whether there is four column or one column in a one table it should come with one width.

I have also looked for flex but its support is not there in IE9 and has some compatibility issue with mobile browser. I have think and tried it many ways but did not got the solution. Here is fiddle if you want to try your hand on it.

HTML

.table {
  display: table;
  width: 100%;
  height: 100%
}
.cell {
  display: table-cell;
  padding: 0 10px;
  width: 23.8%;
  height: 100%
}
.white-box {
  border: solid 1px #ccc;
  background: #eee;
  height: 100%
}

<div class="table">
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </div>
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </div>
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </div>
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </div>
</div>
<br>
<div class="table">
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </div>
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </div>
</div>

My question is column width should constant regardless of number of column — Jitender, Apr 26 '16 at 18:12
@SalmanA: you can notice the width of column in next table. it is different with first table column — Jitender, Apr 26 '16 at 18:13
@IvanRodriguezTorres: Can you prove that the answer from the post you mention will solve my issue — Jitender, Apr 26 '16 at 18:20
proving that it doesn't is easier: https://jsfiddle.net/2gg89uLy/2/ — Kevin B, Apr 26 '16 at 18:23
@Carlos you should make it clear in your question that you want the columns of both tables to be the same width, regardless of how many columns are in each table. — Kevin B, Apr 26 '16 at 18:28

Salman A · Accepted Answer · 2016-04-26T18:47:13.117

You can specify the width usine vw units. This unit has some quirks though. For example it includes scroll bars and margin/padding on body.

So if you are targeting 25% of available width you need to do something like calc(100vu - 17px - 20px) / 4.

.table {
  display: table;
  height: 100%;
}
.cell {
  display: table-cell;
  padding: 0 .5vw;
  width: 22vw;
  height: 100%;
}
.white-box {
  border: solid 1px #ccc;
  background: #eee;
  height: 100%;
}

<div class="table">
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </div>
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </div>
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </div>
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </div>
</div>
<br>
<div class="table">
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </div>
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </div>
</div>

Here is a fiddle with more precise calculations.

Width in percentages will work if (i) table has a width (ii) sum of column widths equals 100%. For two columns it would be 50% and browser falls back to its own calculations. — Salman A, Apr 26 '16 at 18:50

Alex Kudryashev · Answer 2 · 2022-11-06T22:01:04.840

2

To make it work you need 3 leveles: table - table-row - table-cell.

<div class="table">
   <div><!-- style="display:table-row" assumed -->
      <div class="cell">
          <div class="white-box>.....</div>
      </div>
      <div class="cell">
          <div class="white-box>.....</div>
      </div>
   </div>
   <!-- repeat rows -->
</div>

edited Nov 06 '22 at 22:01

answered Apr 26 '16 at 19:55

Alex Kudryashev

9,120
3
27
36

Same width and height column by css

2 Answers2