Как создавать раздетые html таблицы

Question

Я бы хотел раздеться html таблиц.

Мой желаемый результат, как показано ниже.

Есть ли любой способ реализовать это?

Спасибо

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>

Answer 1

Вот вы:

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>

Answer 2

Используйте комбинацию border-spacing и border-collapse. См. здесь

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>