如何使用流动表格行制作 XHTML“表格”答案

【问题标题】：How to make XHTML "table" with fluid table rows如何使用流动表格行制作 XHTML“表格”
【发布时间】：2009-06-08 02:39:54
【问题描述】：

基本上我希望能够制作一个框格，我可以在其中对齐每个框的顶部中间和底部的文本，并在同一行的另一个框中的文本推动它时让同一行上的框调整大小下来。

如果您查看此 HTML 4 代码，它实现了我想要做的事情，但我希望能够使用 XHTML 1.0 doctype 来实现这一点。

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

【问题讨论】：

您的问题根本与 XHTML 无关。更多的是 Quirks 模式 vs Standards 模式和 (X)HTML Strict vs (X)HTML Transitional。

标签： html css layout quirks-mode

【解决方案1】：

有a cross-browser way to achieve grid using CSS 和display:inline-block，但是它可能没有你想要的那么灵活（如果你想支持 Firefox 2，代码会很丑）。

“XHTML”可能存在的问题是，没有模拟 IE5 错误的 CSS（当您不使用 DOCTYPE 或使用旧的/不完整的错误之一时会出现这种错误）限制了您何时可以使用 height:100%。

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

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

【讨论】：

【解决方案2】：

首先，使您的文档具有 HTML 4.01 严格的 DOCTYPE 并首先对其进行验证，使用 http://validator.w3.org

然后，您可以将 DOCTYPE 更改为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

然后重新验证它。如果有任何问题或行为不同的事情，您可以在此处询问具体问题。

【讨论】：

由于设置了高度，此处发布的代码无法验证。