阻止表格在 HTML 中变长

Question

我有以下表格。我想要它，所以当我制作更多的盒子表时。如果桌子上没有更多空间，请在其他桌子下方并继续使桌子变长。

<table width="417" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="413" height="179">
      <table width="141" border="1" align="left" cellpadding="0" cellspacing="0">
        <tr>
          <td width="137" height="89">Box1</td>
        </tr>
      </table>
      <table width="141" border="1" align="left" cellpadding="0" cellspacing="0">
        <tr>
          <td width="137" height="89">Box2</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 1

您应该对布局使用 css 样式，而不是表格。表格用于显示数据行，而不是用于弥补布局。

考虑一下：

<style type="text/css">

    .wrapper
    {
        padding:10px;
        overflow:auto;
        background-color:#888;
    }

    #box
    {
        float:left;
        width:150px;
        padding:10px;
        background-color:#aaa;
    }

</style>

<div class="wrapper">

    <div id="box">Box 1</div>

    <div id="box">Box 2</div>

    <div id="box">Box 3</div>

    <div style="clear:both;"></div>

</div> 

只需将此代码复制到 html 文件中，然后在浏览器的窗口中运行，看看它是如何工作的。

Answer 2

您的问题很难阅读，但我会试一试。

我假设您有一个不希望高于 179 像素的主表。在此表格内放置的框不应使表格高于 179 像素，即使有超过 4 个框。要解决这个问题，您需要样式溢出：隐藏以阻止表格变得太大。不幸的是，这不适用于表格单元格，因此您需要在表格单元格中添加一个具有溢出：隐藏样式的 DIV 元素。

表格内有一个额外的 DIV 元素的解决方案如下所示：

<table width="417" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="413" height="179">
      <div style="height: 179px; overflow: hidden;" >
        <table width="141" border="1" align="left" cellpadding="0" cellspacing="0">
          <tr>
            <td width="137" height="89">Box1</td>
          </tr>
        </table>
        <table width="141" border="1" align="left" cellpadding="0" cellspacing="0">
          <tr>
            <td width="137" height="89">Box2</td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
</table>

当然，正如 niteriter 指出的那样，您最好在布局中使用 DIV 标签。在您的情况下，这也会产生更清晰的 HTML/CSS 代码。

<style>
div.wrapper { height: 179px; width: 413px; overflow: hidden; }
div.box { float: left; height: 89px; width: 137px; }
</style>
<div class="wrapper" >
  <div class="box" > Box1 </div>
  <div class="box" > Box2 </div>
  <div class="box" > Box3 </div>
</div>