使桌子宽于容器

时间：2018-07-31 09:42:17

标签： html css

我有一个放在容器内的桌子。

我希望表格的宽度比两侧的容器宽20像素，但我无法使其正常工作。

我尝试将table元素上的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>

6 个答案:

答案 0 :(得分：2)

您可以设置最小宽度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>

答案 1 :(得分：1)

您可以使用这样的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>

答案 2 :(得分：1)

更改表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;
}

答案 3 :(得分：1)

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

答案 4 :(得分：0)

宽度的负值是没有意义的。因此，请使用负值作为保证金。并删除width: 100%，使表可以大于其父表。

margin: 0 -20px;

答案 5 :(得分：0)

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

width: calc(100% + 40px);

您可以使用负边距移出容器的边界

margin: 0 -20px;

这将使表格居中并使其变得比容器大。

相关问题
最新问题