Border around tr element doesn't show?

html

css

border

table

byNikita Barsukov·Jan 30, 2025

Enable border visibility on a <tr> element by defining border: 1px solid black; on your <td> elements and ensure the table has the property border-collapse: separate; to avert border merging.

Example:

<style>
  table { border-collapse: separate; }
  td { border: 1px solid black; }
</style>
<table>
  <tr>
    <td>Entire universe</td> <!-- Yes, in a cell! -->
    <td>And cookies too!</td> <!-- Important! -->
  </tr>
</table>

We are essentially instructing HTML to paint a visible border for every cell (<td>). So, each cell plays a part in forming the row's border. The takeaway here: You can't force a <tr> to wear a border, but you can ask nicely for its cells (<td>) to do so!

Unraveling the border model's enigma

We need to understand the intricate dance of table borders in CSS. The border-collapse property has a leading role here. With collapse set, borders merge to form continuous lines; with separate, cell borders stay distinct.

This dance could get really interesting with browser-default styles cutting in. Remember to bring out your development tools when you see unexpected moves!

Under the spotlight: border-collapse

This CSS property manipulates table borders:

collapse: Borders consolidate into a single line at each cell junction (useful for the "Wall of China" look).
separate: Each cell maintains its border independently (cue the "Matrix" vibes).

So, separate is your ticket when you want an "each cell for itself" presentation.

Leveling the playing field across browsers

Borders in tables can reveal browser inconsistencies. Follow these steps to strike universal harmony:

Instead of directly applying border to the tr, be cunning and set it on each td.
Some default styles from user agents can be spoilers. Turn the tables with specific CSS rules.

The box-shadow gambit for table row borders

For those seeking to mimic the conventional border directly on <tr>, the box-shadow property could be your tr's best friend. This flexible approach practically mirrors the effect of borders:

<style>
  tr { box-shadow: inset 0 0 0 1px black; }  /* The border phantom! */
</style>

A border illusion works just as well, with the bonus of eliminating typical cell-related clashes.

Deep-diving into border visibility tactics

Keeping the continuity of borders

To maintain a continuous border look in your table across different browsers, ensure this CSS rule:

table { border-collapse: collapse; }

This strategy assigns a single space to adjacent cell borders, eliminating hidden borders caused by separate.

Tackling browser default quirks

The user agent styles can tamper with your table border view. Using development tools, you can investigate and counter these styles. Keep your CSS rules armed with the necessary specificity to fight off these intruders.

Crafting visually pleasing borders

Besides box-shadow, you can utilize outline on your td elements for a similar visual separation, without disrupting the box model:

td { outline: 1px solid black; }  /* Stylish, borderless cells at tableau! */

This method endorses a visual clarity that's consistent across different browsers.

explain-codes / Html / Border around tr element doesn't show?

Linked

Controlling Spacing Between Table Cells



Table's border-radius does not function as expected



Removing unwanted table cell borders with CSS



Border style do not work with sticky position element



The border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?



Border around specific rows in a table?



How to completely remove borders from HTML table



Unraveling the border model's enigma Under the spotlight: border-collapse Leveling the playing field across browsers The box-shadow gambit for table row borders Deep-diving into border visibility tactics