Equal Height Columns with display: table. width

Question

trying to find out why columns are different width, and how to make them equal width.

 .col-container { display: table; width: 100%; margin: 0 auto; } .col { display: table-cell; } 

 <div class="col-container"> <div class="col col1"> <h2>Column 1</h2> <p>Hello World</p> </div> <div class="col col2"> <h2>Column 2</h2> <p>Hello World!</p> </div> <div class="col col3"> <h2>Column 3</h2> <p>Some other text..</p> </div> </div> 

Answer 1

You can use the table-layout:fixed; property, it should spray the columns evenly ( question keyword : equal width ).

You can also add a width to secure it . border-spacing should be included within the width calculation if you also uses it.

https://www.w3.org/TR/CSS2/tables.html#propdef-table-layout

17.5.2.1 Fixed table layout

With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table's width, the width of the columns, and borders or cell spacing.

 .col-container { display: table; width: 100%; margin: 0 auto; table-layout: fixed; } .col { display: table-cell; border: solid; } .w { margin-top: 1em; border-spacing: 2px; } /* add width and border-spacing */ .w.col { width: 33.33%; box-sizing: border-box; } 

 <div class="col-container"> <div class="col col1"> <h2>Column 1</h2> <p>Hello World</p> </div> <div class="col col2"> <h2>Column 2</h2> <p>Hello World!</p> </div> <div class="col col3"> <h2>Column 3</h2> <p>Some other text.. Some other text.. Some other text.. Some other text..</p> </div> </div> <div class="col-container w"> <div class="col col1"> <h2>Column 1</h2> <p>Hello World</p> </div> <div class="col col2"> <h2>Column 2</h2> <p>Hello World!</p> </div> <div class="col col3"> <h2>Column 3</h2> <p>Some other text.. Some other text.. Some other text.. v Some other text..</p> </div> </div>