7

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).

3 Answers 3

14

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;

1
  • 2
    Add a word-wrap: break-word; to the td, and you have yourself a good solution.
    – rnevius
    Sep 15, 2014 at 11:45
2

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.

1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.