Menu
Is there a more elegant solution to achieve the same effect as this?
The code I've got so far is this:
<!DOCTYPE html>
<html>
<head>
<title>Table Test</title>
<style type="text/css">
table { border-collapse: collapse; }
td { border: solid 1px; }
td.nest { padding: 0px; }
td.nest table td { border-width: 0px 1px; }
td.nest table td:first-child { border-left: none; }
td.nest table td:last-child { border-right: none; }
</style>
</head>
<body>
<table>
<colgroup>
<col style="width: 3em;"/>
<col style="width: 6em;"/>
<col style="width: 9em;"/>
</colgroup>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><!-- Somehow get rid of the nested table and keep just the tds -->
<td class="nest" colspan="3">
<table>
<tr>
<td style="width: 4em;">1</td>
<td style="width: 6em;">2</td>
<td style="width: 8em;">3</td>
</tr>
</table>
</td>
</tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
</body>
</html>
The only way I can get this working so far is to nest another table inside the first. I don't like it much because ideally I only want one table and there's a lot of extra CSS to match the borders of the first table without adding to the cell (colspan="3") size. I want to be able to replace the nested table with just a normal <tr> with three <td>s in it.
The only other way I've found to change the width of one cell without affecting the other cells in the column is with position: absolute; but then the next cell in the row is shifted to the left by the width of the adjusted cell, so that doesn't work fully. It's also too hard to get the widths just right.
So, is there any way to get the same effect using just one table, no extra <div>s, etc. and just simple CSS? This example should have only one <table>, nine <td>s and no colspan=s. I'm looking for a pure CSS solution if one exists. It should be able to cope with any arbitrary widths as long as they add up to the original width.
470
No, this is not possible without subtables.
What you are trying to do is against the idea of tabular data presentation.
If you don't want a table, don't use a table.
You could however put your data into divs with style="display: table-cell;".
On a second thought, you could use colspan in all 3 rows.
So your table actually looks like this:
<col style="width: 3em;"/>
<col style="width: 1em;"/>
<col style="width: 5em;"/>
<col style="width: 1em;"/>
<col style="width: 8em;"/>
<!DOCTYPE html>
<html>
<head>
<title>Table Test</title>
<style type="text/css">
table {
border-collapse: collapse;
}
td {
border: solid 1px;
}
td.nest {
padding: 0px;
}
td.nest table td {
border-width: 0px 1px;
}
td.nest table td:first-child {
border-left: none;
}
td.nest table td:last-child {
border-right: none;
}
</style>
</head>
<body>
<table >
<colgroup>
<col style="width: 3em;" />
<col style="width: 1em;" />
<col style="width: 5em;" />
<col style="width: 1em;" />
<col style="width: 8em;" />
</colgroup>
<tr>
<td>1</td>
<td colspan="2">2</td>
<td colspan="2">3</td>
</tr>
<tr>
<td colspan="2">1</td>
<td colspan="2">2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td colspan="2">2</td>
<td colspan="2">3</td>
</tr>
</table>
</body>
</html>
Yes...but you'll have to use some CSS trickery to 'fake' it.
What the below does is use psuedo elements for the inner borders, offsetting them as appropriate for the middle row.
CSS
table {
border-collapse: collapse;
table-layout:fixed;
}
td {
border: solid 1px;
border-width:1px 0px 1px 0px;
width:33%;
position:relative;
}
td:nth-child(1) {
border-left:solid 1px;
}
td.nest {
padding: 0px;
}
td.nest table td {
border-width: 0px 1px;
}
td.nest table td:first-child {
border-left: none;
}
td.nest table td:last-child {
border-right: none;
}
td:after {
content:'';
position:absolute;
right:0;
border-right:1px solid black;
top:0;
bottom:0;
}
tr:nth-child(2) td:nth-of-type(1):after, tr:nth-child(2) td:nth-of-type(2):after {
right:-20px;
}
tr:nth-child(2) td:nth-of-type(2), tr:nth-child(2) td:nth-of-type(3) {
padding-left:25px;
}
HTML
<table>
<colgroup>
<col style="width: 3em;" />
<col style="width: 6em;" />
<col style="width: 9em;" />
</colgroup>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
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
