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

I want to ignore .container's padding and make table header (row with #/First Name/...) full-width, but without moving text content (I mean only background of table header should be full width). How can I do this? Thanks.

我想忽略.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>[phone]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>John</td>
        <td>Test</td>
        <td>[phone]</td>
      </tr>
    </tbody>
    </table>
</div>

UPD: Here is what exactly I am trying to get: https://i.stack.imgur.com/WZh9o.jpg

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

3 个解决方案

#1

You could minus margin-left the table and give it a fixed width. After this you just add a padding to left and right for the first and last td

你可以减去边距 - 离开桌子并给它一个固定的宽度。在此之后，您只需为第一个和最后一个td左右添加填充

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;
}

<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>[phone]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>John</td>
        <td>Test</td>
        <td>[phone]</td>
      </tr>
    </tbody>
  </table>
</div>

---

EDIT: Here's a snippet for a responsive table. I changed the css from the .container. It's padding will not apply on the table anymore.

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

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;
}

<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>[phone]</td>
          </tr>
          <tr>
            <td>2</td>
            <td>John</td>
            <td>Test</td>
            <td>[phone]</td>
          </tr>
        </tbody>
      </table>
    </div>

#2

Simply provide a margin:-20px and increase the width of the table.

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

#3

Just make your container class padding to padding: 20px 0; and and width to width:100%;

只需将容器类填充为填充：20px 0;和宽度到宽度：100％;

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;
}

<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>[phone]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>John</td>
        <td>Test</td>
        <td>[phone]</td>
      </tr>
    </tbody>
    </table>
</div>