Reputation: 5299
I would like to get stripped html tables.
My desired result is like below.
Are there any method to realize it ?
Thanks
td {
padding:5px;
border: solid black 1px;}
table {
border-collapse:collapse;}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
Upvotes: 1
Views: 154
Reputation: 3258
Here you are:
td {
padding:5px;
//border: solid black 1px;}
tr:nth-child(odd) td {
border: solid black 1px;
}
table {
border-collapse:collapse;
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
Upvotes: 1
Reputation: 58199
Use a combination of border-spacing
and border-collapse
. Refer here
table {
border-collapse: collapse;
}
th {
background-color: green;
Color: white;
}
th,
td {
width: 150px;
text-align: center;
border: 1px solid black;
padding: 5px
}
.geeks {
border-right: hidden;
}
.gfg {
border-collapse: separate;
border-spacing: 0 15px;
}
h1 {
color: green;
}
<table class="gfg">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
Upvotes: 1