HTML表格单元格数据扩展到div

Question

图像基本上显示了正在发生的事情。我有一个1270px的包装。在那个包装器里面（由右边的垂直线表示）我有4个div和一个表。表内容正在推过页面包装器。页面包装器没有浮动，因为它只是将内容集中在页面上。

我尝试了以下但没有任何作用：

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

您的内部divs宽度和表格大于1270px的外部包装。

Answer 2

看起来您只是想为文字添加边框......

请尝试此替代方案（不含表格）： http://jsfiddle.net/UXKTA/9/

.test
{
    padding: 5px;
    border: 1px solid black;
    width: 200px;
}​