Equal columns on table

Question

This is my code: http://jsfiddle.net/spadez/mVX93/19/

#my-table{width:100%;border-collapse:collapse;} /*or whatever width you want*/
#my-table td{width:2000px;padding:4px;border:1px solid #000;vertical-align:top;} /*something big or 100%*/

I'm trying to make it so no matter how many columns there are, each one is an equal width. However, this approach should work but it doesn,t we can see one is clearly bigger because it has bigger content.

Can this be done, without having to specify specific CSS for the number of columns?

Is it mandatory for you to use table. cs I found one more way to do it where your contents will not flow out.. Check the below link http://stackoverflow.com/questions/20375288/make-columns-of-equal-width-in-table — Guruprasad J Rao, Apr 29 '14 at 09:53
It doesnt have to be a table, but the more compatibility the better — Jimmy, Apr 29 '14 at 09:57

score 3 · Accepted Answer · answered Apr 29 '14 at 09:50

3

Set table-layout:fixed on the table, and remove fixed width you have set on td.

UPDATED FIDDLE

#my-table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed
}

#my-table td{
    padding:4px;
    border:1px solid #000;
    vertical-align:top;
}

answered Apr 29 '14 at 09:50

Danield

121,619
37
226
255

1

That's a good solution, but is there anyway to stop the text going into the next cell for example – Jimmy Apr 29 '14 at 09:50
something like this might be good, shame it is css3 only though http://jsfiddle.net/spadez/mVX93/25/ – Jimmy Apr 29 '14 at 09:51
I updated the fiddle - the overflowing text was caused by the dots not having a space between them making it a really wide word - which doesn't usually happen (except maybe for long urls) – Danield Apr 29 '14 at 09:52
@Kunsang per my answer – SW4 Apr 29 '14 at 09:58

score 2 · Answer 2 · answered Apr 29 '14 at 09:52

Simply use:

Demo Fiddle

#my-table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed
}

#my-table td{
    padding:4px;
    border:1px solid #000;
    vertical-align:top;
    word-break:break-word; /* <-- ensure the line of dots can be broken */
}

More on word-break from MDN

The word-break CSS property is used to specify how (or if) to break lines within words.

You may also want to add word-wrap:break-word;

The word-wrap CSS property is used to specify whether or not the browser may break lines within words in order to prevent overflow (in other words, force wrapping) when an otherwise unbreakable string is too long to fit in its containing box.

Equal columns on table

2 Answers2

Demo Fiddle