CODEWITHSUNDEEP
htmlcss
Lokomotywa
Lokomotywa

Reputation: 2844

Force table column to not excess given css width

HTML

<table >
<tr>
    <td>veeeeeeeeeeeeeeeeeeeeery looong</td>
    <td></td>
    <td></td>
    <td></td>
</tr>
</table>

CSS

table {
    width: 80px;
}
td {
    overflow: hidden;
    max-width: 25%;
    width: 25%;
}

I want every column to be 25% of 80px, thus 20px in size. How do I stop the first column from getting larger (its content can be hidden).

Upvotes: 7

Views: 7558

Answers (3)

Vangel Tzo
Vangel Tzo

Reputation: 9303

You could use table-layout: fixed

table {
    width: 80px;
    border: 1px solid #333;
    table-layout: fixed;
}

td {
    overflow: hidden;
    max-width: 25%;
    width: 25%;
    border: 1px solid #333;
    word-wrap: break-word;
}

An example: http://jsfiddle.net/wsastn47/1/

edit: @mevius suggestion word-wrap: break-word;

Upvotes: 14

Marc Audet
Marc Audet

Reputation: 46785

I would suggest the following:

table {
    width: 80px;
}
td {
    width: 25%;
    border: 1px dotted blue;
    word-break: break-all;
}

Use the word-break property to allow the long text strings to wrap within the table cell and remain visible.

See demo: http://jsfiddle.net/audetwebdesign/7ptrtwac/

Note: The max-width property is not needed for td.

Upvotes: 2

Subh
Subh

Reputation: 414

You can use the following CSS as well :

table {
width: 180px;
border-collapse:collapse; 
table-layout:fixed;
}
td {
  overflow: hidden;
  max-width: 25%;
  width: 25%;
  word-wrap:break-word;
  border:solid 1px;

}

Demo link DEMO FIDDLE

Upvotes: 1

Related Questions