<commit_before>+++
date = "2019-06-23T06:49:49+02:00"
title = "Styling HTML Tables: How to Apply Margin, Border and z-index on Table Elements"
description = "Learn how to use margin, border and z-index on tbody, thead and tr HTML table elements."
intro = "A long time ago there was practically no way around the HTML <table> element for creating complex layouts on the web. Fortunately, those days are long gone. Nowadays we only use the <table> element as it should be used: to display tabular data. However, only recently I was reminded again that styling tables is not as easy as one might think..."
draft = false
categories = ["Development"]
tags = ["HTML", "CSS"]
images = ["https://res.cloudinary.com/maoberlehner/image/upload/c_pad,b_auto,f_auto,q_auto,w_1014,h_510/v1532158513/blog/2019-06-23/final-result-twitter"]
+++

A long time ago there was practically no way around the HTML `<table>` element for creating complex layouts on the web. Fortunately, those days are long gone. Nowadays we only use the `<table>` element as it should be used: to display tabular data. However, only recently I was reminded again that styling tables is not as easy as one might think.

Unfortunately, some CSS properties (e.g. `margin`, `border-radius` and `z-index`) do not work on certain HTML table elements like `<tbody>`, `<thead>` and `<tr>`. In this article, we will explore how we can work around these limitations.

<div class="c-content__figure">
  <div class="c-content__broad">
    <a href="https://res.cloudinary.com/maoberlehner/image/upload/c_scale,f_auto,q_auto/v1532158513/blog/2019-06-23/final-result">
      <img
        data-src="https://res.cloudinary.com/maoberlehner/image/upload/c_scale,f_auto,q_auto,w_740/v1532158513/blog/2019-06-23/final-result"
        data-srcset="https://res.cloudinary.com/maoberlehner/image/upload/c_scale,f_auto,q_auto,w_1480/v1532158513/blog/2019-06-23/final-result 2x"
        alt="The final result."
      >
      <noscript>
        <img
          src="https://res.cloudinary.com/maoberlehner/image/upload/c_scale,f_auto,q_auto,w_740/v1532158513/blog/2019-06-23/final-result"
          alt="The final result."
        >
      </noscript>
    </a>
  </div>
  <p class="c-content__caption" style="margin-top:-2.5em;">
    <small>The final result</small>
  </p>
</div>

## Table of Contents

- [`margin` on table elements](#using-margin-on-table-elements)
- [`border-radius` on table elements](#using-border-radius-on-table-elements)
- [`z-index` on table elements](#using-z-index-on-table-elements)

## The table markup

The screenshot above illustrates the final result we want to achieve: a table with the first row being the main header and multiple sections which all have their own sub headers.

```html
<table class="table">
  <thead>
    <tr>
      <th>MO</th>
      <th>TU</th>
      <th>WE</th>
      <th>TH</th>
      <th>FR</th>
      <th>SA</th>
      <th>SU</th>
    </tr>
  </thead>
  <tbody class="section section-step">
    <tr class="sub-header">
      <th colspan="7">
        Working hours
      </th>
    </tr>
    <tr><commit_msg>Improve phrasing<commit_after>+++
date = "2019-06-23T06:49:49+02:00"
title = "Styling HTML Tables: How to Apply Margin, Border and z-index on Table Elements"
description = "Learn how to use margin, border, and z-index on tbody, thead, and tr HTML table elements."
intro = "A long time ago, there was practically no way around the HTML <table> element for creating complex layouts on the web. Fortunately, those days are long gone. Nowadays, we only use the <table> element as it should be used: to display tabular data. However, only recently, I was reminded again that styling tables is not as easy as one might think..."
draft = false
categories = ["Development"]
tags = ["HTML", "CSS"]
images = ["https://res.cloudinary.com/maoberlehner/image/upload/c_pad,b_auto,f_auto,q_auto,w_1014,h_510/v1532158513/blog/2019-06-23/final-result-twitter"]
+++

A long time ago, there was practically no way around the HTML `<table>` element for creating complex layouts on the web. Fortunately, those days are long gone. Nowadays, we only use the `<table>` element as it should be used: to display tabular data. However, only recently, I was reminded again that styling tables is not as easy as one might think.

Unfortunately, some CSS properties (e.g. `margin`, `border-radius`, and `z-index`) do not work on certain HTML table elements like `<tbody>`, `<thead>`, and `<tr>`. In this article, we explore how we can work around these limitations.

<div class="c-content__figure">
  <div class="c-content__broad">
    <a href="https://res.cloudinary.com/maoberlehner/image/upload/c_scale,f_auto,q_auto/v1532158513/blog/2019-06-23/final-result">
      <img
        data-src="https://res.cloudinary.com/maoberlehner/image/upload/c_scale,f_auto,q_auto,w_740/v1532158513/blog/2019-06-23/final-result"
        data-srcset="https://res.cloudinary.com/maoberlehner/image/upload/c_scale,f_auto,q_auto,w_1480/v1532158513/blog/2019-06-23/final-result 2x"
        alt="The final result."
      >
      <noscript>
        <img
          src="https://res.cloudinary.com/maoberlehner/image/upload/c_scale,f_auto,q_auto,w_740/v1532158513/blog/2019-06-23/final-result"
          alt="The final result."
        >
      </noscript>
    </a>
  </div>
  <p class="c-content__caption" style="margin-top:-2.5em;">
    <small>The final result</small>
  </p>
</div>

## Table of Contents

- [`margin` on table elements](#using-margin-on-table-elements)
- [`border-radius` on table elements](#using-border-radius-on-table-elements)
- [`z-index` on table elements](#using-z-index-on-table-elements)

## The table markup

The screenshot above illustrates the final result we want to achieve: a table with the first row being the main header and multiple sections, which all have their subheaders.

```html
<table class="table">
  <thead>
    <tr>
      <th>MO</th>
      <th>TU</th>
      <th>WE</th>
      <th>TH</th>
      <th>FR</th>
      <th>SA</th>
      <th>SU</th>
    </tr>
  </thead>
  <tbody class="section section-step">
    <tr class="sub-header">
      <th colspan="7">
        Working hours
      </th>
    </tr>
    <tr>
{'fraction_non_alphanumeric': 0.1335594315245478, 'fraction_numerical': 0.041666666666666664, 'mean_word_length': 3.6459114778694675, 'pattern_counts': {'":': 0, '<': 95, '<?xml version=': 0, '>': 95, 'https://': 10, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6351030', 'n_tokens_mistral': 2227, 'n_tokens_neox': 2020, 'n_words': 609}