Make table wider then container

Question

I have a table that sits inside a container.

I want the table to be 20px wider than the container on both sides, and I can't get it working.

I tried changing margin: 0 auto; on the table element to margin: 0 -40px; so that it would overhang by 20px on each side of the container, but that just shifts the entire table to the left.

.container {
  width: 400px;
  display: block;
  border: 2px solid red;
  margin: 0 auto;
}

table {
  border-spacing: 1;
  border-collapse: collapse;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

table * {
  position: relative;
}

table td,
table th {
  padding-left: 8px;
}

table thead tr {
  height: 60px;
  background: #36304a;
}

table tbody tr {
  height: 50px;
}

table tbody tr:last-child {
  border: 0;
}

table td,
table th {
  text-align: left;
}

table td.l,
table th.l {
  text-align: right;
}

table td.c,
table th.c {
  text-align: center;
}

table td.r,
table th.r {
  text-align: center;
}

.header th {
  font-size: 18px;
  color: #fff;
  line-height: 1.2;
  font-weight: unset;
}

tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}

tbody tr {
  font-size: 15px;
  color: #808080;
  line-height: 1.2;
  font-weight: unset;
}

tbody tr:hover {
  color: #555555;
  background-color: #f5f5f5;
  cursor: pointer;
}

.column {
  width: 160px;
}

.column:first-child {
  padding-left: 40px;
}

.column:last-child {
  padding-right: 40px;
}

<div class="container">
  <table>
    <thead>
      <tr class="header">
        <th class="column">1</th>
        <th class="column">2</th>
        <th class="column">3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="column">mnbvbmvn</td>
        <td class="column" data-title="Points">28761528</td>
        <td class="column" data-title="Points">Some text here</td>
      </tr>
      <tr>
        <td class="column">adsfasdf</td>
        <td class="column" data-title="Points">12341234</td>
        <td class="column" data-title="Points">blah blah blah</td>
      </tr>
      <tr>
        <td class="column">ajgsgdsdjha</td>
        <td class="column" data-title="Points">85765</td>
        <td class="column" data-title="Points">some other text</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

You can set the minimum width min-width: 100%; instead of width and also set a negative margin as desired, to have the table horizontally centered.

.container {
  width: 400px;
  display: block;
  border: 2px solid red;
  margin: 0 auto;
}

table {
  border-spacing: 1;
  border-collapse: collapse;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  min-width: 100%;
  position: relative;
  margin: 0 -20px;
}

table * {
  position: relative;
}

table td,
table th {
  padding-left: 8px;
}

table thead tr {
  height: 60px;
  background: #36304a;
}

table tbody tr {
  height: 50px;
}

table tbody tr:last-child {
  border: 0;
}

table td,
table th {
  text-align: left;
}

table td.l,
table th.l {
  text-align: right;
}

table td.c,
table th.c {
  text-align: center;
}

table td.r,
table th.r {
  text-align: center;
}

.header th {
  font-size: 18px;
  color: #fff;
  line-height: 1.2;
  font-weight: unset;
}

tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}

tbody tr {
  font-size: 15px;
  color: #808080;
  line-height: 1.2;
  font-weight: unset;
}

tbody tr:hover {
  color: #555555;
  background-color: #f5f5f5;
  cursor: pointer;
}

.column {
  width: 160px;
}

.column:first-child {
  padding-left: 40px;
}

.column:last-child {
  padding-right: 40px;
}

<div class="container">
  <table>
    <thead>
      <tr class="header">
        <th class="column">1</th>
        <th class="column">2</th>
        <th class="column">3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="column">mnbvbmvn</td>
        <td class="column" data-title="Points">28761528</td>
        <td class="column" data-title="Points">Some text here</td>
      </tr>
      <tr>
        <td class="column">adsfasdf</td>
        <td class="column" data-title="Points">12341234</td>
        <td class="column" data-title="Points">blah blah blah</td>
      </tr>
      <tr>
        <td class="column">ajgsgdsdjha</td>
        <td class="column" data-title="Points">85765</td>
        <td class="column" data-title="Points">some other text</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

you can do this by using the css calc function like this as no one wants to set negative margins and padding this is the best way in my opinion.

.container {
  width: 400px;
  display: block;
  border: 2px solid red;
  margin: 0 auto;
}

table {
  border-spacing: 1;
  border-collapse: collapse;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  width:calc (100% + 40px) ;
  margin: 0 auto;
   
  position: absolute;
  left:-20px;
}

table * {
  position: relative;
}

table td,
table th {
  padding-left: 8px;
}

table thead tr {
  height: 60px;
  background: #36304a;
}

table tbody tr {
  height: 50px;
}

table tbody tr:last-child {
  border: 0;
}

table td,
table th {
  text-align: left;
}

table td.l,
table th.l {
  text-align: right;
}

table td.c,
table th.c {
  text-align: center;
}

table td.r,
table th.r {
  text-align: center;
}

.header th {
  font-size: 18px;
  color: #fff;
  line-height: 1.2;
  font-weight: unset;
}

tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}

tbody tr {
  font-size: 15px;
  color: #808080;
  line-height: 1.2;
  font-weight: unset;
}

tbody tr:hover {
  color: #555555;
  background-color: #f5f5f5;
  cursor: pointer;
}

.column {
  width: 160px;
}

.column:first-child {
  padding-left: 40px;
}

.column:last-child {
  padding-right: 40px;
}

<div class="container">
  <table>
    <thead>
      <tr class="header">
        <th class="column">1</th>
        <th class="column">2</th>
        <th class="column">3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="column">mnbvbmvn</td>
        <td class="column" data-title="Points">28761528</td>
        <td class="column" data-title="Points">Some text here</td>
      </tr>
      <tr>
        <td class="column">adsfasdf</td>
        <td class="column" data-title="Points">12341234</td>
        <td class="column" data-title="Points">blah blah blah</td>
      </tr>
      <tr>
        <td class="column">ajgsgdsdjha</td>
        <td class="column" data-title="Points">85765</td>
        <td class="column" data-title="Points">some other text</td>
      </tr>
    </tbody>
  </table>
</div>