html - 如何制作具有流动表格行的 XHTML "table"

Question

基本上我希望能够制作一个盒子网格，我可以在每个盒子的顶部中间和底部对齐文本，并在同一行的另一个盒子中的文本插入它时调整同一行上的盒子的大小下。

如果您查看这段 HTML 4 代码，它实现了我想要的功能，但我希望能够使用 XHTML 1.0 文档类型实现它。

<style type="text/css">
<!--
#apDiv1 {
        width:200px;
        height:100%;
            border:1px solid #000;
}

#apDiv1 table{
        width:200px;
        height:100%;
            border:1px solid #000;
}
-->
</style>
<div id="apDiv1"><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr><td>blah</td></tr>
      <tr><td height="100%">blah</td></tr>
      <tr><td>blah</td></tr>
    </table>
    </td>
    <td>
    <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr><td>blah</td></tr>
      <tr>
        <td height="100%"><p>blahfhfh</p>
          <p>dfhdf</p>
          <p>h</p>
          <p>dfh</p>
          <p>df</p>
          <p>h</p>
<p>&nbsp;</p></td></tr>
      <tr><td>blah</td></tr>
    </table>
    </td>
    <td>
        <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr><td>blah</td></tr>
      <tr><td height="100%">blah</td></tr>
      <tr><td>blah</td></tr>
    </table>
    </td>
  </tr>
  <tr>
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>blah</td>
      </tr>
      <tr>
        <td height="100%"><p>blahfhfh</p>
          <p>dfhdf          </p>
          <p>&nbsp;</p></td>
      </tr>
      <tr>
        <td>blah</td>
      </tr>
    </table></td>
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>blah</td>
      </tr>
      <tr>
        <td height="100%">blah</td>
      </tr>
      <tr>
        <td>blah</td>
      </tr>
    </table></td>
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>blah</td>
      </tr>
      <tr>
        <td height="100%">blah</td>
      </tr>
      <tr>
        <td>blah</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>blah</td>
      </tr>
      <tr>
        <td height="100%">blah</td>
      </tr>
      <tr>
        <td>blah</td>
      </tr>
    </table></td>
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>blah</td>
      </tr>
      <tr>
        <td height="100%">blah</td>
      </tr>
      <tr>
        <td>blah</td>
      </tr>
    </table></td>
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>blah</td>
      </tr>
      <tr>
        <td height="100%">blah</td>
      </tr>
      <tr>
        <td>blah</td>
      </tr>
    </table></td>
  </tr>
</table>
</div>

Answer 1

有 a cross-browser way to achieve grid using CSS使用 display:inline-block，但是它可能没有您想要的那么灵活(如果您想支持 Firefox 2，代码会非常丑陋)。

您可能遇到的“XHTML”问题是没有模拟 IE5 错误的 CSS(当您不使用 DOCTYPE 或使用旧的/不完整的错误之一时会出现这种情况)会限制您何时可以使用 高度: 100%。

如果父元素具有 auto 高度，则高度百分比不起作用，默认情况下几乎每个 HTML 元素都具有自动高度。您必须在表格的所有父元素上设置显式高度:

html,body,#apDiv1 {
  height:100%;
}