在表格内使用 Div

尽管 Div 和表格是宿敌，但如果需要，它们也可以协同工作。由于可以在表格中使用垂直居中，因此使用单个单元格表格以及水平和垂直居中来绝对居中浏览器窗口中的页面内容（主要仅对固定大小的内容有用）是一种比较流行的技术。

将 Div 放入表格时，需要记住的一件重要事情是，Div 必须位于特定的表格**单元格**内，这意味着位于 **内部** td 或 th 元素内，而该元素又位于 **内部** tr 元素内。

要了解我的意思，请查看如下所示的表格

<table border=1 width=200 cellpadding=10>
  <tr>
    <td>
      <p>I'm text in a cell.</p>
    </td>
    <td>
      <p>I'm text in a cell.</p>
    </td>
    <td>
      <p>I'm text in a cell.</p>
    </td>
  </tr>
  <tr>
    <td>
      <p>I'm text in a cell.</p>
    </td>
    <td>
      <p>I'm text in a cell.</p>
    </td>
    <td>
      <p>I'm text in a cell.</p>
    </td>
  </tr>
</table>

现在，您想向此表格添加另一行并在其中放置一个 Div，您可能会这样做

<table border=1 width=200 cellpadding=10>
  <tr>
    <td>
      <p>I'm text in a cell.</p>
    </td>
    <td>
      <p>I'm text in a cell.</p>
    </td>
    <td>
      <p>I'm text in a cell.</p>
    </td>
  </tr>
  <tr>
    <td>
      <p>I'm text in a cell.</p>
    </td>
    <td>
      <p>I'm text in a cell.</p>
    </td>
    <td>
      <p>I'm text in a cell.</p>
    </td>
  </tr>
  <tr>
    <div id="my_box">
      <p>I'm text in a div.</p>
    </div>
  </tr>
</table>

但这会破坏布局！虽然奇怪，但却是真的。请参见下文

您需要做的是确保 Div 位于实际的表格单元格（td 或 th 元素）内，因此请执行以下操作

<tr>
  <td colspan=3>
    <div id="my_box">
      <p>I'm text in a div.</p>
    </div>
  </td>
</tr>

您应该会得到预期的结果，即表格内**一个完全可样式化的 Div**

这也有助于在表格单元格内使用绝对定位。请参阅本文。