Border around tr element doesn’t show?

by

Add this to the stylesheet:

table {
  border-collapse: collapse;
}

JSFiddle.

The reason why it behaves this way is actually described pretty well in the specification:

There are two distinct models for setting borders on table cells in
CSS. One is most suitable for so-called separated borders around
individual cells, the other is suitable for borders that are
continuous from one end of the table to the other.

… and later, for collapse setting:

In the collapsing border model, it is possible to specify borders that
surround all or part of a cell, row, row group, column, and column
group.

More Related Contents:

  1. How to design a table like this
  2. How do I keep two side-by-side div elements the same height?
  3. How do I create an HTML table with a fixed/frozen left column and a scrollable body?
  4. Word-wrap in an HTML table
  5. Table fixed header and scrollable body
  6. Alternate table row color using CSS?
  7. Table with fixed header and fixed column on pure css
  8. How to display scroll bar onto a html table
  9. IE9 Float with Overflow:Hidden and Table Width 100% Not Displaying Properly
  10. Fixed Table Cell Width
  11. Add border-bottom to table row
  12. How to make fill height
  13. How to remove unwanted space between rows and columns in table?
  14. How to make Scrollable Table with fixed headers using CSS [duplicate]
  15. CSS table-cell equal width
  16. How can I truncate table cells, but fit as much as content possible?
  17. Setting table column width
  18. How to force table cell content to wrap?
  19. Table scroll with HTML and CSS [duplicate]
  20. How to center the contents of an HTML table?
  21. How to hide Table Row Overflow?
  22. Min-width and max-height for table attributes
  23. Why is box-sizing acting different on table vs div?
  24. How to completely remove borders from HTML table
  25. Removing unwanted table cell borders with CSS
  26. with fixed and scrollable [duplicate]
  27. Yet Another Divs vs Tables issue: Forms
  28. Styling the last td in a table with css
  29. Setting max-height for table cell contents
  30. How to make a table with equal column widths in CSS?

Leave a Comment