将表格宽度调整至容器之外

Question

我有一个放置在容器内的表格。

我想让表格的宽度在两侧比容器多20像素，但我无法实现这一点。

我尝试将表格元素上的“ margin：0 auto;”更改为“ margin：0 -40px;”，以便它在容器的每侧超出20px，但那只是将整个表格向左移动。

.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>

- Cat

Answer 1

您可以使用最小宽度min-width: 100%;代替width，并根据需要设置负边距，以使表格水平居中。

.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>

- Nico O

---

有很多类似的答案，但我选择给你这个，因为它最简单（不需要计算器），而且还有一个完整的示例。祝好运。 - Cat

实际应用中存在一个小问题。如果表格有很多列，它将无法居中显示。请参见此处：https://jsfiddle.net/acb6hsjo/4/。有什么解决方法吗？ - Cat

有点类似，但这变得有点傻了：https://jsfiddle.net/acb6hsjo/13/ 这将设置容器为 display: flex 和 flex-flow: column nowrap;。这实际上会居中内容，但是你会看到它可能会从左右两侧裁剪内容。如何切换这些挑战取决于您的用例。 - Nico O

Answer 2

更改表格的宽度和边距，如下所示：

width和margin。

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

- Tharaka Nilupul Dharmabandu

---

你应该总是在回答问题时添加解释，而不仅仅是简单地回答。 - treyBake

Answer 3

将此添加到您的表格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>

- Gautam Naik

Answer 4

你可以使用CSS的calc函数来实现此操作，像这样，因为没有人想要设置负边距和填充，这是我认为最好的方法。

.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>

- Sumit Kumar

Answer 5

宽度的负值是毫无意义的。因此，请使用负边距值，并删除width: 100%，这样表格就可以比其父元素更大。

margin: 0 -20px;

- Programmer

---

抱歉，那是一个打错字。我在边距上使用了负值，导致表格向左移动。我已经修正了问题。 - Cat

我在答案中添加了内容，请删除 width: 100%。 - Programmer

Answer 6

您可以计算表格的宽度为100％加上每侧20像素。

width: calc(100% + 40px);

你可以通过使用负边距来移动容器的边界之外

margin: 0 -20px;

这将使您的表格居中并使其比容器更大。

- Webber