Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

<tr> removing border on left and right only

Tags:

css

Is it possible to remove these areas? (marked with black)

a busy cat

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

like image 606
Rijnhardt Avatar asked Jun 10 '14 08:06

Rijnhardt


2 Answers

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

like image 178
JJJ Avatar answered Nov 06 '22 20:11

JJJ


Try something like this: Link

CSS:

tr.title td:first-child {
    border-left: 0 !important;
    border-right: 0 !important;
}
like image 20
G.L.P Avatar answered Nov 06 '22 21:11

G.L.P