CSS Table-Cell Equal Width

CSS table-cell equal width

Here is a working fiddle with indeterminate number of cells: http://jsfiddle.net/r9yrM/1/

You can fix a width to each parent div (the table), otherwise it'll be 100% as usual.

The trick is to use table-layout: fixed; and some width on each cell to trigger it, here 2%. That will trigger the other table algorightm, the one where browsers try very hard to respect the dimensions indicated.

Please test with Chrome (and IE8- if needed). It's OK with a recent Safari but I can't remember the compatibility of this trick with them.

CSS (relevant instructions):

div {
display: table;
width: 250px;
table-layout: fixed;
}

div > div {
display: table-cell;
width: 2%; /* or 100% according to OP comment. See edit about Safari 6 below */
}

EDIT (2013): Beware of Safari 6 on OS X, it has table-layout: fixed; wrong (or maybe just different, very different from other browsers. I didn't proof-read CSS2.1 REC table layout ;) ). Be prepared to different results.

Set the table column width constant regardless of the amount of text in its cells?

I played with it for a bit because I had trouble figuring it out.

You need to set the cell width (either th or td worked, I set both) AND set the table-layout to fixed. For some reason, the cell width seems to only stay fixed if the table width is set, too (I think that's silly but whatev).

Also, it is useful to set the overflow property to hidden to prevent any extra text from coming out of the table.

You should make sure to leave all of the bordering and sizing for CSS, too.

Ok so here's what I have:

table {  border: 1px solid black;  table-layout: fixed;  width: 200px;}
th,td { border: 1px solid black; width: 100px; overflow: hidden;}
<table>  <tr>    <th>header 1</th>    <th>header 234567895678657</th>  </tr>  <tr>    <td>data asdfasdfasdfasdfasdf</td>    <td>data 2</td>  </tr></table>

Equal sized table cells to fill the entire width of the containing table

You don't even have to set a specific width for the cells, table-layout: fixed suffices to spread the cells evenly.

ul {    width: 100%;    display: table;    table-layout: fixed;    border-collapse: collapse;}li {    display: table-cell;    text-align: center;    border: 1px solid hotpink;    vertical-align: middle;    word-wrap: break-word;}
<ul>  <li>foo<br>foo</li>  <li>barbarbarbarbar</li>  <li>baz</li></ul>

Make columns of equal width in table

I think that this will do the trick:

table{
table-layout: fixed;
width: 300px;
}

Equal Height Columns with display: table. width

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>


Related Topics



Leave a reply



Submit