CODEWITHSUNDEEP
htmlcss
Cat
Cat

Reputation: 863

Make table wider then container

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>

Upvotes: 5

Views: 80

Answers (6)

Tharaka Nilupul Dharmabandu
Tharaka Nilupul Dharmabandu

Reputation: 386

change table width and margin as following.

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

Upvotes: 1

Programmer
Programmer

Reputation: 2123

Negative value for width is meaningless. So, use negative value for margin. And remove the width: 100% so the table could be bigger than its parent.

margin: 0 -20px;

Upvotes: 0

Webber
Webber

Reputation: 5523

You can calculate the width of the table to be 100% plus the 20 pixels on each side

width: calc(100% + 40px);

you can move outside of the bounds of the container by using a negative margin

margin: 0 -20px;

This will both center your table and grow it larger than your container.

Upvotes: 0

Gautam Naik
Gautam Naik

Reputation: 9376

Add this to your table css

table {
border-spacing: 1;
border-collapse: collapse;
background: white;
border-radius: 10px;
overflow: hidden;
width: calc(100% + 40px);/* to give it extra width on both sides */
margin: 0 auto;
position: relative;
margin-left: -20px;/* to push the table to 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: calc(100% + 40px);
margin: 0 auto;
position: relative;
margin-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>

Upvotes: 1

Sumit Kumar
Sumit Kumar

Reputation: 493

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>

Upvotes: 1

Nico O
Nico O

Reputation: 14152

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>

Upvotes: 2

Related Questions