Clever Geek Handbook

Table column syntax does not exceed 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 each column to be 25% of 80px, thus 20px. How to stop the first column from growing (its contents can be hidden).

+3


source to share


3 answers


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


Example: http://jsfiddle.net/wsastn47/1/

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

+9


source


I would suggest the following:

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

Use the property word-break

to allow long text strings in the cell table and remain visible.



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

Note. The property is max-width

not required for td

.

+2


source


You can also use the following CSS:

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

+1


source






More articles:


All Articles