Menu
I have a table in which <td> are coming dynamically and some <td> will come with specific class on which the row should break and other <td> should start from next line.
As the <td> are coming dynamically i can't create another <tr> i want to break it with css.
I have seen other examples on stackoverflow but they are showing breaking all the <td> to next line but i want to break from specific <td> and all then other <td> in continuation from this <td>
td.break {
display:block;
}<table>
<tr>
<td>hdv</td>
<td>hdv</td>
<td class="break">hdv</td>
<td>hdv</td>
<td>hdv</td>
<td>hdv</td>
<td>hdv</td>
<td>hdv</td>
<td>hdv</td>
<td class="break">hdv</td>
<td>hdv</td>
<td>hdv</td>
<td>hdv</td>
<td>hdv</td>
<td>hdv</td>
<td>hdv</td>
<td>hdv</td>
<td>hdv</td>
</tr>
</table>I tried using display:block but its not working if appying on single <td>.
403
Place the line break code <BR> within the text at the point(s) you want the line to break. Notice in the examples below that the line break code can be used in data cells as well as in headers.
When you add a line break in HTML, you avoid this text wrapping and start new text the next line. To add a line break to your HTML code, you use the <br> tag. The <br> tag does not have an end tag. You can also add additional lines between paragraphs by using the <br> tags.
There are two methods to wrap table cell <td> content using CSS which are given below: Using word-wrap property: This property is used to allow long words to break and wrap onto the next line. Using word-break property: This property is used to specify how to break the word when the word reached at end of the line.
Well thanks to Hidden Hobbes after his answer i found a way to do it.
May be its not that prominent code but yes its working absolutely fine.
Using display:block in <tr> and float:left in .break
tr {
display: block
}
td.break {
float: left;
line-height: 22px;
}<table>
<tr>
<td>hdv</td>
<td>hdv</td>
<td class="break">hdv</td>
<td>hdv</td>
<td>hdv</td>
<td>hdv</td>
<td>hdv</td>
<td>hdv</td>
<td>hdv</td>
<td class="break">hdv</td>
<td>hdv</td>
<td>hdv</td>
<td>hdv</td>
<td>hdv</td>
<td>hdv</td>
<td>hdv</td>
<td>hdv</td>
<td>hdv</td>
</tr>
</table>A little line-height is managed as we use float:left
62
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With