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
Why Is There a Vertical Scroll Bar If Parent and Child Have the Same Height
Accessing Object in Iframe Using Vba
How to Display the Checkbox Over the Images For Selection
Space Between Nowrap Inline Blocks
Drawing Text to <Canvas> with @Font-Face Does Not Work at the First Time
CSS Background-Size: Cover Replacement for Mobile Safari
How to Set Default Value to the Input[Type="Date"]
How to Prevent Input Type="Number" Getting Negative Values
Ng-App Vs. Data-Ng-App, What Is the Difference
Difference Between ≪Input Type='Submit' /≫ and ≪Button Type='Submit'≫Text≪/Button≫
CSS Background Image Not Loading
Css3 Border-Radius Clipping Issues
How to Specify a Starting Number for an Ordered List
Href Overrides Ng-Click in Angular.Js
IE6 + IE7 CSS Problem with Overflow: Hidden; - Position: Relative; Combo
How to Simulate Placeholder Functionality on Input Date Field