How to Expand an HTML table sideways left and right in CSS?

May 24, 2022

Given a simple table that is a child of an article.

The table has a 100% width so it fits its article parent.
I want the table to expand a little out, side ways both left and right, in a symmetrical way.

In my code the table does expand nicely on the left side, however it does not react to anything I set in CSS on the right side.

(Notice that the left text is nicely aligned with the text that is outside of the table, despite the table having margins set.)

The left side works perfectly, but the right side does not.
What I want to achieve is for the right side of the table to expand in the same way outward and towards the right, a few pixels.

What have I overlooked here? Thanks!

body,
html {
  background: #EEE;
  margin: 60px;
  width: auto
}

article {
  background: #DDD;
  width: auto
}

table {
  border-collapse: collapse;
  width: 100%;
  border-spacing: 0;
  margin: 0 -10px 0 -10px;
  /* Expand the Table on both left and right side */
}

th,
td {
  padding: .5em 5px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  border-color: black;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
}

table td {}

table th {
  font-weight: bold;
}

.today {
  background-color: #FFD700
}

tr:hover {
  background-color: #FFD700
}

<html>
<body>
  <article>

    Start<br> Start
    <br> Start
    <br>
    <br>

    <table>
      <tbody id="weekdagtabel">
        <tr id="day-1">
          <td>Maandag</td>
          <td>08:00 tot 20:00</td>
        </tr>
        <tr id="day-2">
          <td>Dinsdag</td>
          <td>08:00 tot 20:00</td>
        </tr>
        <tr id="day-3">
          <td>Woensdag</td>
          <td>08:00 tot 20:00</td>
        </tr>
        <tr id="day-4">
          <td>Donderdag</td>
          <td>08:00 tot 20:00</td>
        </tr>
        <tr id="day-5">
          <td>Vrijdag</td>
          <td>08:00 tot 20:00</td>
        </tr>
        <tr id="day-6">
          <td>Zaterdag</td>
          <td>Gesloten.</td>
        </tr>
        <tr id="day-0">
          <td>Zondag</td>
          <td>Gesloten.</td>
        </tr>
      </tbody>
    </table>

    <br> End
    <br> End
    <br> End
    <br>
  </article>
</body>
</html>

>Solution :

You don’t actually want the table to be 100% width. You want 100% plus whatever negative margins you add to the parent.

body,
html {
  background: #EEE;
  margin: 60px;
  width: auto
}

article {
  background: #DDD;
  width: auto
}

table {
  border-collapse: collapse;
  width: calc(100% + 10px + 10px); /* Add the negative margins from below */
  border-spacing: 0;
  margin: 0 -10px 0 -10px; /* Expand the Table on both left and right side */
}

th,
td {
  padding: .5em 5px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  border-color: black;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
}

table td {}

table th {
  font-weight: bold;
}

.today {
  background-color: #FFD700
}

tr:hover {
  background-color: #FFD700
}

<html>
<body>
  <article>

    Start<br> Start
    <br> Start
    <br>
    <br>

    <table>
      <tbody id="weekdagtabel">
        <tr id="day-1">
          <td>Maandag</td>
          <td>08:00 tot 20:00</td>
        </tr>
        <tr id="day-2">
          <td>Dinsdag</td>
          <td>08:00 tot 20:00</td>
        </tr>
        <tr id="day-3">
          <td>Woensdag</td>
          <td>08:00 tot 20:00</td>
        </tr>
        <tr id="day-4">
          <td>Donderdag</td>
          <td>08:00 tot 20:00</td>
        </tr>
        <tr id="day-5">
          <td>Vrijdag</td>
          <td>08:00 tot 20:00</td>
        </tr>
        <tr id="day-6">
          <td>Zaterdag</td>
          <td>Gesloten.</td>
        </tr>
        <tr id="day-0">
          <td>Zondag</td>
          <td>Gesloten.</td>
        </tr>
      </tbody>
    </table>

    <br> End
    <br> End
    <br> End
    <br>
  </article>
</body>
</html>