停止表格在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

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

我认为你有一个主表，你不希望高于179像素。在此表中，即使有超过4个框，也要放置不应使表格高于179像素的框。要解决这个问题，你需要样式溢出：隐藏以阻止表格变得太大。不幸的是，这对表格单元格不起作用，因此您需要在表格单元格中添加一个带溢出：隐藏样式的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>

Answer 2

您应该将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文件，然后使用浏览器窗口查看其工作原理。