Question

I am trying to style the following table but I can’t avoid styling every single cell. There should be a single border line between all the cells except for the cells from e.g. 4th column. In addition I am trying to get both parts of the table zebra striped (it isn’t shown in the layout below).

┌───┬───┬───┐    ┌───┬───┬───┐
├───┼───┼───┤    ├───┼───┼───┤
├───┼───┼───┤    ├───┼───┼───┤
├───┼───┼───┤    ├───┼───┼───┤
├───┼───┼───┤    ├───┼───┼───┤
├───┼───┼───┤    ├───┼───┼───┤
├───┼───┼───┤    ├───┼───┼───┤
├───┼───┼───┤    ├───┼───┼───┤
└───┴───┴───┘    └───┴───┴───┘

What would be the most effective way to do it?

Update. I accepted Jaime’s answer and modified suggested code a bit:

<style>
.tbl            { border-collapse:collapse; }
.tbl tr         { background-color: red; }
.tbl tr.stripe  { background-color: green; }
.tbl td         { border:solid 1px black; }
.tbl td.none    { border-style:none; background-color: white; }
</style>

<table class="tbl">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td class="none">4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr class="stripe">
<td>1</td>
<td>2</td>
<td>3</td>
<td class="none">4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>

Not sure it is correct to explicitely set td.none background as white but I don’t know if it’s possible to specify that the element’s background should be the same as the page’s background.

Answer 1

Here’s one possible solution:

<style>

.tbl {
    border-collapse:collapse;
}

.tbl td {
    border:solid 1px red;
}

.tbl td.none {
    border-style:none;
}

</style>

with html:

<table class="tbl">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td class="none">4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>