Best IT Recipes

Make columns of equal width in <table>

How to make columns equal width in?

Dynamically change the number of columns.

Today I have 13 columns. Tomorrow will be the race 16. Everyone does not really want to count.

+47
html css
Dec 04 '13 at 12:23
source share
3 answers

I think this will do the trick:

table{ table-layout: fixed; width: 300px; }
+92
Dec 04 '13 at 12:27
source share

Use the following property, similar to a table and its fully dynamic:

 ul { width: 100%; display: table; table-layout: fixed; /* optional, for equal spacing */ border-collapse: collapse; } li { display: table-cell; text-align: center; border: 1px solid pink; vertical-align: middle; } 
 <ul> <li>foo<br>foo</li> <li>barbarbarbarbar</li> <li>baz klxjgkldjklg </li> <li>baz</li> <li>baz lds.jklklds</li> </ul>

Perhaps this will solve your problem.

+8
Dec 04 '13 at
source share

Found this on an HTML table: keep the same width for columns

If you set the style of table-layout: fixed; on your table, you can override the resizing of the browser column. The browser will then set the width of the columns based on the width of the cells in the first row of the table. Change and remove from it, and then set the fixed widths for the cells in.

+5
Dec 04 '13 at 12:27
source share


More articles:


All Articles