CODEWITHSUNDEEP
htmlcss
Jimmy
Jimmy

Reputation: 12487

Equal columns on table

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?

Upvotes: 0

Views: 77

Answers (2)

SW4
SW4

Reputation: 71140

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.

Upvotes: 2

Danield
Danield

Reputation: 125423

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;
}

Upvotes: 3

Related Questions