Is it possible to remove these areas? (marked with black)
Here is my current CSS:
table.report {
border-collapse:collapse;
}
table.report td, table.report th {
border:1px solid rgb(150, 150, 150);
padding:5px;
}
tr.title {
border-left: 0px solid;
border-right: 0px solid;
}
td.normal {
min-width: 200px;
}
td.extended {
min-width: 400px;
}
p.center {
padding-top: 5px;
text-align: center;
}
HTML:
<table class="report">
<tr class="title">
<td colspan="4"><p class="center">Solution 1</p></td>
</tr>
<tr>
<td class="normal">Assured Load</td>
<td class="normal">{PHP Returns}</td>
<td class="extended" colspan="2">{PHP Returns}</td>
</tr>
</table>
FIDDLE
The existing borders are applied to table cells, not rows, so setting row borders to 0px won't help. Apply the zero-border to cells instead:
tr.title td {
border-left: 0px solid;
border-right: 0px solid;
}
Demo
Try something like this: Link
CSS:
tr.title td:first-child {
border-left: 0 !important;
border-right: 0 !important;
}
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