Home/ Questions/Q 272165
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T00:16:26+00:00

I have the following tables. I wanted it so when I make more boxes

  • 0

I have the following tables. I wanted it so when I make more boxes table. If there is no more room on in the table go below the other ones and to keep making the table long.

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your question is hard to read but I’ll give it a go.

    I presume you have a main table that you do not want to be higher than 179 pixels. Inside this table you place boxes that shouldn’t make the table higher than 179 pixels even if there more than 4 boxes. To solve this you would need the style overflow: hidden to stop the table from growing too big. Unfortunately this doesn’t work for table cells so you would need to add a DIV element with an overflow:hidden style inside your table cell.

    The solution with an extra DIV element inside the table looks as follows: 

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

    Of course, as niteriter points out you would be better off using DIV tags for your layouts. In your situation this would also result in much cleaner HTML/CSS code.

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