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;
  padding2px;
  margin2px;
}

#tb2td {
  display: block;
}

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

div.container {
  width: 60px
}

<tableborder="1"id="tb1"><td>1) text</td><td>2) text</td><td>3) text</td></table><hr/><tableborder="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/><divclass="border container"><divclass="border">1) text</div><divclass="border">2) text</div><divclass="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.

#tb2td {
  display: block
}

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

<tableborder="1"id="tb1"><tr><td>1) text</td><td>2) text</td><td>3) text</td></tr></table><hr/><tableborder="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 */
}

#tb2td {
  display: block
}

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

<tableborder="1"id="tb1"><tr><td>1) text</td><td>2) text</td><td>3) text</td></tr></table><hr/><tableborder="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 */
}

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

<tableborder="1"id="tb1"><tr><td>1) text</td><td>2) text</td><td>3) text</td></tr></table><hr/><tableborder="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.

<tableborder="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;
}

<tableborder="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.

#tb1tr { display:contents }

<tableborder="1"id="tb1"><tr><td>1) text</td></tr><tr><td>2) text</td></tr><tr><td>3) text</td></tr></table><hr/><tableborder="1"id="tb2"><tr><td>1) text</td></tr><tr><td>2) text</td></tr><tr><td>3) text</td></tr></table>