html - How to keep the border double between cells?

Question

Here is my code:

#tb2 td { display:block }

<table border="1" id="tb1">
  <td>1) text</td>
  <td>2) text</td>
  <td>3) text</td>
</table>

<hr/>

<table border="1" id="tb2">
  <td>1) text</td>
  <td>2) text</td>
  <td>3) text</td>
</table>

Answer 1

I do not understand the reason for the question.

Don't use side effects of random elements because you want to use deprecated inline BORDER attribute

There is not particular need to know why something does not work when it is not valid markup. To fix it, use valid markup

See my second example. It looks the way it should because it is valid markup

The third is also valid but is using divs

Without border or extra HTML, you can try this:

td {
  width: 50px;
  padding 2px;
  margin 2px;
}

#tb2 td {
  display: block;
}

div.border {
  width: 50px;
  padding: 1px;
  border: 2px solid black;
  margin: 2px;
}

div.container {
  width: 60px
}

<table border="1" id="tb1">
  <td>1) text</td>
  <td>2) text</td>
  <td>3) text</td>
</table>

<hr/>

<table border="1" id="tb2">
  <tbody>
    <tr>
      <td>1) text</td>
    </tr>
    <tr>
      <td>2) text</td>
    </tr>
    <tr>
      <td>3) text</td>
    </tr>
  </tbody>
</table>

<hr/>

<div class="border container">
  <div class="border">1) text</div>
  <div class="border">2) text</div>
  <div class="border">3) text</div>
</div>