CSS Tricks for Empty Table Cell Borders (Cross-Browser)

2024-07-27

empty-cells property (limited browser support):
- This is the most straightforward method, but it has limited browser compatibility.
- You can set the empty-cells property on the table element itself.
- It has two values:
  - show: This displays borders and background on empty cells.
  - hide: This hides borders and background on empty cells (default behavior).
CSS Tricks (for wider browser compatibility):
- Since empty-cells isn't universally supported, there are a few tricks you can use:
- Using zoom: 1;: This is a hack that forces the browser to think there's content in the cell, even if there's not. It's a simple solution but not ideal as it can affect layout in other ways.

Here's a breakdown of the pros and cons:

empty-cells:
- Pros: Easy to implement, intuitive.
- Cons: Limited browser support.
CSS Tricks:
- Pros: Wider browser compatibility.

<!DOCTYPE html>
<html>
<head>
<style>
table {
  empty-cells: show; /* Show borders and background on empty cells */
  border-collapse: collapse; /* Optional: collapse borders for a cleaner look */
}
</style>
</head>
<body>

<table>
  <tr>
    <td>Data 1</td>
    <td></td>  <td>Data 3</td>
  </tr>
</table>

</body>
</html>

Option A: Using zoom: 1; (hacky solution):

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse; /* Optional: collapse borders for a cleaner look */
}

td {
  zoom: 1; /* Force the browser to think there's content */
}
</style>
</head>
<body>

<table>
  <tr>
    <td>Data 1</td>
    <td></td>  <td>Data 3</td>
  </tr>
</table>

</body>
</html>

Option B: Using :empty pseudo-class (more specific):

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse; /* Optional: collapse borders for a cleaner look */
}

td:empty {
  border: 1px solid black; /* Set border style for empty cells only */
}
</style>
</head>
<body>

<table>
  <tr>
    <td>Data 1</td>
    <td></td>  <td>Data 3</td>
  </tr>
</table>

</body>
</html>

Using a pseudo-element (::before or ::after):

This method involves adding a pseudo-element (like ::before or ::after) to the empty cell and styling it to mimic a border. It offers more flexibility in terms of styling the "border" but requires additional HTML elements within the cell.

Here's a basic example:

<table>
  <tr>
    <td>Data 1</td>
    <td ::after></td>  <td>Data 3</td>
  </tr>
</table>

<style>
table {
  border-collapse: collapse;
}

td::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%; /* Adjust height as needed */
  border: 1px solid black; /* Style your pseudo-border here */
}
</style>

Using JavaScript:

This is a more complex approach but allows for greater control. You can use JavaScript to loop through your table cells and dynamically add a class or style them based on whether they are empty or not. This method offers flexibility but requires knowledge of JavaScript.

Here are some additional points to consider:

Layout method: If you're not using tables, but want a grid-like layout with borders, consider using CSS Grid or Flexbox. These layout methods offer more control over borders and spacing without relying on tables.
Content vs Whitespace: Note that some methods might not differentiate between empty cells and cells containing only whitespace characters. You might need additional checks in your CSS or JavaScript to handle this.

css