How To Keep The Border Double Between Cells?

Here is my code: The border is double between cells: If I add td {display: block} to make a column, the border between cells isn't double: Why and how to keep it double? Things

Solution 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>

Solution 2:

There is nothing wrong turning your tds into block but your are loosing the table-layout model (it includes border-spacing). You are missing that gap in between your block td , margin works fine with block, add it.

#tb2 td {
  display: block
}

#tb2 td+td {
  margin-top: 2px;
}

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

<hr/>

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

if you reset border-spacing and want to update that margin, you can use a custon CSS var() to only reset it once for all .

table {
  --borderSpacing: 5px;/* reset here the value */
  border-spacing: var(--borderSpacing);/*   use the var() value */
}

#tb2 td {
  display: block
}

#tb2 td+td {
  margin-top: var(--borderSpacing);/*   use the var() value */
}

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

<hr/>

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

If you do not like the display:block alternative, then flex or grid on the parent will do too

table {
  --borderSpacing: 5px;
  /* reset here the value */
  border-spacing: var(--borderSpacing);
  /*   use the var() value */
}

#tb2 tr {
  display: grid;
  gap: var(--borderSpacing);
  /*   use the var() value */
}

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

<hr/>

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

Solution 3:

If I add td {display: block} to make a column, the border between cells isn't double

That's not how columns/rows in tables work. Use the <tr> element to create a table row. Within that row, you can then use <td> to create columns. No CSS modifications of the display property are needed.

<table border="1">
  <tr>
    <td>1) text</td>
    <td>2) text</td>
    <td>3) text</td>
  </tr>
  <tr>
    <td>4) text</td>
    <td>5) text</td>
    <td>6) text</td>
  </tr>
</table>

---

No using additional html elements.

If you really want to roll the dice and hope that your browser is able to correct the malformed html table without rows, you can use margin:

td {
  display: block;
  margin-bottom: 3px;
}
td:last-child {
  margin-bottom: 0px;
}

<table border="1">
  <td>4) text</td>
  <td>5) text</td>
  <td>6) text</td>
</table>

Solution 4:

A solution with only display BUT you need to change the HTML. Either you change the HTML or you add more CSS otherwise we can't do what you want with nothing.

#tb1 tr { display:contents }

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

<hr/>

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