Heisenberg
Heisenberg

Reputation: 5299

How to create stripped html tables

I would like to get stripped html tables.

My desired result is like below.

enter image description here

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

Answers (2)

migli
migli

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">&nbsp;</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td colspan="3">&nbsp;</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

Upvotes: 1

Naren Murali
Naren Murali

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

Related Questions