如何忽略父填充并在HTML中创建全宽表头？

Question

我想忽略.container的填充并使表头（带有＃/ First Name / ...的行）全宽，但没有移动文本内容（我的意思是只有表头的背景应该是全宽）。我怎样才能做到这一点？感谢。

body {
  background: #eee;
}

.container {
  width: 350px;
  margin: 0 auto;
  background: #ddd;
  padding: 20px;
  margin-top: 30px;
}

table {
  width: 100%;
}

table thead tr {
  background: #555;
  color: #fff;
}

table thead tr td {
  padding-right: 15px;
}

<div class="container">
    <h3 style="margin:0">Hello!</h3>
    <br />
    <table cellspacing=0>
    <thead>
      <tr>
        <td>#</td>
        <td>First Name</td>
        <td>Last Name</td>
        <td>Phone</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>John</td>
        <td>Test</td>
        <td>+1 234 56-7888</td>
      </tr>
      <tr>
        <td>2</td>
        <td>John</td>
        <td>Test</td>
        <td>+1 234 56-7888</td>
      </tr>
    </tbody>
    </table>
</div>

UPD ：以下是我想要获得的内容：https://i.stack.imgur.com/WZh9o.jpg

Answer 1

只需提供保证金：-20px并增加表格的宽度。

Answer 2

你可以减去margin-left表并给它一个固定的width。在此之后，您只需向左右添加padding即可获得第一个和最后一个td

＆＃13;

＆＃13;

body {
  background: #eee;
}
.container {
  background: #ddd none repeat scroll 0 0;
  margin: 30px auto 0;
  padding: 20px;
  width: 350px;
}
table {
    margin-left: -20px;
    width: 390px;
}
table thead tr {
  background: #555;
  color: #fff;
}
table thead tr td {
  padding-right: 15px;
}

td:first-child {
    padding-left: 20px;
}

td:last-child {
    padding-right: 20px;
}

＆＃13;

<div class="container">
  <h3 style="margin:0">Hello!</h3>
  <br />
  <table cellspacing=0>
    <thead>
      <tr>
        <td>#</td>
        <td>First Name</td>
        <td>Last Name</td>
        <td>Phone</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>John</td>
        <td>Test</td>
        <td>+1 234 56-7888</td>
      </tr>
      <tr>
        <td>2</td>
        <td>John</td>
        <td>Test</td>
        <td>+1 234 56-7888</td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;

编辑：这是响应表的摘录。我从.container改变了css。它的填充不再适用于桌面。

＆＃13;

＆＃13;

body {
  background: #eee;
}
.container {
  background: #ddd none repeat scroll 0 0;
  margin: 30px auto 0;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 350px;
}
.container > * {
  padding-left: 20px;
  padding-right: 20px;
}
.container > table {
  padding-left: 0;
  padding-right: 0;
}
table {
  width: 100%;
}
table thead tr {
  background: #555;
  color: #fff;
}
table thead tr td {
  padding-right: 15px;
}
td:first-child {
  padding-left: 20px;
}
td:last-child {
  padding-right: 20px;
}

＆＃13;

<div class="container">
      <h3 style="margin:0">Hello!</h3>
      <br />
      <table cellspacing=0>
        <thead>
          <tr>
            <td>#</td>
            <td>First Name</td>
            <td>Last Name</td>
            <td>Phone</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>John</td>
            <td>Test</td>
            <td>+1 234 56-7888</td>
          </tr>
          <tr>
            <td>2</td>
            <td>John</td>
            <td>Test</td>
            <td>+1 234 56-7888</td>
          </tr>
        </tbody>
      </table>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

只需将container课程填充设为padding: 20px 0;，将宽度设为width:100%;

＆＃13;

＆＃13;

body {
  background: #eee;
}

.container {
  width: 100%;
  margin: 0 auto;
  background: #ddd;
  padding: 20px 0;
  margin-top: 30px;
}

table {
  width: 100%;
}

table thead tr {
  background: #555;
  color: #fff;
}

table thead tr td {
  padding-right: 15px;
}

＆＃13;

<div class="container">
    <h3 style="margin:0">Hello!</h3>
    <br />
    <table cellspacing=0>
    <thead>
      <tr>
        <td>#</td>
        <td>First Name</td>
        <td>Last Name</td>
        <td>Phone</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>John</td>
        <td>Test</td>
        <td>+1 234 56-7888</td>
      </tr>
      <tr>
        <td>2</td>
        <td>John</td>
        <td>Test</td>
        <td>+1 234 56-7888</td>
      </tr>
    </tbody>
    </table>
</div>

＆＃13;

＆＃13;

＆＃13;