html table columns of fixed width

Question

i have a html table like:

<table width="100%" cellspacing="1" cellpadding="2" align="center" border="0">
<tr>
    <td width="7%"></td>
    <td width="21%"></td>
    <td width="32%"></td>
    <td width="20%"></td>
    <td width="20%"></td>
</tr>
</table>

this is working good, but some times if column no 5 has large content then column no 4 shrinks and width of these columns does not remains equal

Possible duplicate of [Fixed Table Cell Width](https://stackoverflow.com/questions/4185814/fixed-table-cell-width) — Ismail Farooq, Mar 27 '18 at 06:14
[Fixed Table Cell Width](https://stackoverflow.com/questions/4185814/fixed-table-cell-width) — Ankit Singh, Mar 27 '18 at 06:18

score 2 · Answer 1 · answered Mar 27 '18 at 06:15

I guess what you are looking for is word-break: break-all; style on your <td>.

.table-style td {
  border: solid 1px;
}

.td-break-word {
  word-break: break-all;
}

<table class="table-style"  width="100%" cellspacing="1" cellpadding="2" align="center" border="0">
<tr>
    <td width="7%">text</td>
    <td width="21%">text</td>
    <td width="32%">text</td>
    <td width="20%">text</td>
    <td width="20%" class="td-break-word">texttexttexttexttexttexttexttexttexttexttexttexttexttext</td>
</tr>
</table>

score 2 · Accepted Answer · answered Mar 27 '18 at 06:17

You need to add .table{ table-layout:fixed;} and .table tr td{ word-wrap:break-word; text-align:center;} for applying width and text as per width

.table{
table-layout:fixed;}
.table tr td{
word-wrap:break-word;
text-align:center;}

<table width="100%" cellspacing="1" cellpadding="2" align="center" border="0" class="table">
<tr>
    <td width="7%">ew</td>
    <td width="21%">ewwe</td>
    <td width="32%">weew</td>
    <td width="20%">ewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewew</td>
    <td width="20%">eweweew</td>
</tr>
</table>

score 0 · Answer 3 · answered Mar 27 '18 at 06:48

Its because you are trying to print a single big string. If there is a space, the words will be broken according to the width automatically. Use the below CSS to fix it.

 tr td {
    word-wrap: break-word;
 }

PS: String will be broken into multiple lines. The row may look long.

html table columns of fixed width

3 Answers3