sara sara - 26 days ago 9
HTML Question

How I can to make collision in table by row not by cells?

I want to avoid the resize of

<table>
when I write in a cell a long string.

This is the code from w3school:



table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill </td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

<p>Try to change the padding to 5px.</p>





but if I write this:

<tr>
<td>Jill jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</td>
<td>Smith</td>
<td>50</td>
</tr>


then the cell which contains "Jill jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj" expand and merge the next cell.

What I want is: to do expand and merge by rows not by cell (i.e: when the cell need to expand it must to stop in border of the next cell and take rows to complete the string).

The expected output is:
here what I want

Answer

You have to add table-layout:fixed to your <table> and setting the word-wrap property for your cells (<td>). Additionally to make sure the content of the cells stay at top you have to add vertical-align:top to your cells too!

See the following solution:

table {
  table-layout:fixed;
  width:100%;
}
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
}
td {
  vertical-align:top;
  word-wrap:break-word; 
}
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>JillJillJillJillJillJillJillJillJillJillJillJillJillJillJillJillJillJill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

Comments