Menu
I am looking for a way to "break" a table row using only CSS.
I want to change this:
To this:
I don't have access to the HTML, but can control the CSS.
I have tried
td:nth-child(3) {
display: block;
}
But it doesn't seem to work.
Here is some simplified code for testing:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
td:nth-child(3) {
display: block;
background-color: yellow;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>111111</td>
<td>222222</td>
<td>333333</td>
<td>444444</td>
</tr>
</table>
</body>
</html>
714
statuscheck select, tr. statuscheck textarea"). prop('disabled', false); The above code lines disable/enable all input , select and textarea elements inside a tr tag with class statuscheck .
The hidden attribute hides the <tr> element. You can specify either 'hidden' (without value) or 'hidden="hidden"'. Both are valid. A hidden <tr> element is not visible, but it maintains its position on the page.
The <br> tag inserts a single line break. The <br> tag is useful for writing addresses or poems. The <br> tag is an empty tag which means that it has no end tag.
How about using inline-block with a fixed width table... Or using % roughly 45% of width for your td elements so you won't need to define width for the table
Demo
Here, am just turning the td to display: inline-block; and because of the fixed width table, they will be forced to wrap to the next line.
Also am using word-wrap: break-word; property so that non spaced strings are forced to break.
table {
width: 120px;
}
table tr td {
width: 50px;
word-wrap: break-word;
}
table tr td {
display: inline-block;
margin-top: 2px;
}
You can use % based width as well, so that you don't need to care about the cell widths....
You might need vertical-align: top; along with min-height if in case a cell is blank in your table
table tr td {
display: inline-block;
margin-top: 2px;
vertical-align: top;
min-height: 20px;
}
Demo (Only required if a cell is blank)
Just note that inline-block will cause some issues with 4px offset, in this case just assign font-size: 0; to the table and re-set the font-size back for your td element, this way you will get consistency in cell margin.
Warning: I would never ever recommend to do such types of things, so keep this as your last priority. If you have JavaScript control, than consider appending
traround thetd
From here onwards please ignore if you cannot use jQuery, say suppose you have an using jQuery library you can simply add the snippet to that JS file....
(Am adding a class here to uniquely identify the element, class can also be added using .addClass() by defining some nearest CSS selector) so no question of modifying the HTML here.
$('table.wrap_trs tr').unwrap(); //Remove default pre-generated tr
var cells = $('table.wrap_trs tr td');
for (var i = 0; i < cells.length; i += 2) {
cells.slice(i, i + 2).wrapAll('<tr></tr>'); //Wrapping the tds with tr
}
Demo
133
You may use float property and play with width of TD as you need to adjust border width of table
table{
width:100%;
}
td:nth-child(3) {
display: block;
background-color: yellow;
}
tr td {
float: left;
width: 49.5%;
}
Hope this helps! but need to check browser compatibility
8
Proper CSS Method, Simple and Easy
This may help you , but it may create problem for variable length , hence i have used min-width
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
td:nth-child(3) {
display: block;
background-color: yellow;
clear:left;
}
tr{
float:left;
}
td{
float:left;
min-width:100px; //used min-width for proper alignment
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>111111</td>
<td>222222</td>
<td>333333</td>
<td>444444</td>
</tr>
</table>
</body>
</html>
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
