CODEWITHSUNDEEP
css
Rijnhardt
Rijnhardt

Reputation: 2744

<tr> removing border on left and right only

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

Upvotes: 9

Views: 29266

Answers (4)

Ken Lee
Ken Lee

Reputation: 8073

An alternative will be using white color for both the borders (in this way you can specify the left and right border color, e.g. to be red, but in this example it is white which effectively hides the borders)

.noleftnoright {
border-left:1px solid white;
border-right:1px solid white;
}


.noleftnoright {
border-left:1px solid white;
border-right:1px solid white;
}

.maintable{
border-collapse: collapse;
}
<table  border=1 class=maintable>
<tr><td class=noleftnoright colspan=3>Line 1
<tr><td>A<td>B<td>C

<tr><td class=noleftnoright colspan=3>Line 2

</table>

Upvotes: 0

Merlin
Merlin

Reputation: 4927

Change the styling into the TD

FIDDLE

<td class="title" colspan="4"><p class="center">Solution 1</p></td>

tr td.title {
    border-left: 0px solid ;
    border-right: 0px solid ;
}

Upvotes: 0

G.L.P
G.L.P

Reputation: 7217

Try something like this: Link

CSS:

tr.title td:first-child {
    border-left: 0 !important;
    border-right: 0 !important;
}

Upvotes: 2

JJJ
JJJ

Reputation: 33153

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

Upvotes: 13

Related Questions