扩展超过 div 的 HTML 表格单元格数据

Question

图像基本上显示了正在发生的事情。我有一个 1270px 的 wrapper 。在该包装器内(由右侧的垂直线表示)我有 4 个 div 和一个表格。表格内容正在推过页面包装器。页面包装器没有 float ，因为它只是将页面上的内容居中。

我尝试了以下但没有任何效果:

border: none;
padding: 0px;
border-collapse: collapse;
overflow: hidden;
table-layout: fixed;

这是什么原因造成的？这也允许来自其他 4 个 div 的所有其他内容也推过页面包装器。

编辑:

<div id="wrap-page">
  <div id="wrap-content">
        <table id="content">
          <tbody>
            <tr>
              <td id="featured">
                <h1>h1</h1>
                <p>Lorem ipsum</p>

                <h2>h2</h2>
                <p>Lorem ipsum</p>
              </td>
              <td class="sidebar">
                <p>Lorem ipsum</p>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

html, body{
  width:100%;
  margin:0;
  padding:0;
  background:#ccc;
  font-size:100%;
  line-height:1;
  font-family:Arial;
}

#wrap-page{
  float:left;
  margin:auto;
  width:1270px;
}

#wrap-content{
  margin:0 5px;
  border:1px solid;
}

#content{
  position:relative;
  float:left;
  border-collapse:collapse;
  width:1270px;
  margin:7px 0;
}

#featured{
  width:822px;
}

.sidebar{
  width:193px;
  vertical-align:top;
}

Answer 1

您的内部 div 宽度和表格大于 1270 像素的外部包装。