Question

如何修复宽度超过100％的元素的填充行为？表右侧的缩进折叠

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  padding: 30px;
}
table {
  border-collapse: collapse;
  width: 150%;
}
th, td {
  border: 1px solid #000;
}

<body>
  <table>
    <tr><th>sdsfd</th><th>sdsfd</th><th>sdsfd</th><th>sdsfd</th></tr>
    <tr><td>sdsdf</td><td>sdsdf</td><td>sdsdf</td><td>sdsdf</td></tr>
  </table>
</body>

Answer 1

这是一个使用border而不是padding的想法：

＆＃13;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  padding: 30px 0;
}
table {
  border-collapse: collapse;
  width: 150%;
  border-right:30px solid #fff;
  border-left:30px solid #fff;
  position:relative;
}
table:before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:15px;
  width:1px;
  background:#000;
}

table:after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  right:15px;
  width:1px;
  background:#000;
}

th, td {
  border: 1px solid #000;
}

＆＃13;

<body>
  <table>
    <tr><th>sdsfd</th><th>sdsfd</th><th>sdsfd</th><th>sdsfd</th></tr>
    <tr><td>sdsdf</td><td>sdsdf</td><td>sdsdf</td><td>sdsdf</td></tr>
  </table>
</body>

＆＃13;

Answer 2

150%宽度始终相对于parent的宽度，因此如果parent增长（添加填充），child将相应增长，并且因为父级宽度的50%大于padding，所以你可以通过将table放在一个包装器中来实现这一点：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  
}
#wrapper{  
  padding: 30px;
  width: 150%;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #000;
}

<body>

  <div id="wrapper">
  
  <table>
    <tr><th>sdsfd</th><th>sdsfd</th><th>sdsfd</th><th>sdsfd</th></tr>
    <tr><td>sdsdf</td><td>sdsdf</td><td>sdsdf</td><td>sdsdf</td></tr>
  </table>
  
  </div>
  
</body>

我不知道这是不是你要找的，但我希望它会有所帮助:)

填充宽度超过100％的元素

2 个答案: