Arrête la table d'aller plus longtemps en HTML

Question

J'ai les tableaux suivants. Je le voulais donc quand je fais plus de boîtes de table. S'il n'y a plus de place dans la table, placez-vous sous les autres et continuez à faire la table longue.

<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

Votre question est difficile à lire, mais je vais essayer.

Je suppose que vous avez une table principale que vous ne voulez pas dépasser 179 pixels. À l'intérieur de cette table, vous placez des cases qui ne doivent pas dépasser 179 pixels, même s'il y a plus de 4 cases. Pour résoudre ce problème, vous aurez besoin du dépassement de style: caché pour empêcher la table de devenir trop grande. Malheureusement, cela ne fonctionne pas pour les cellules de tableau, vous devez donc ajouter un élément DIV avec un débordement: style caché dans votre cellule de tableau.

La solution avec un élément DIV supplémentaire dans la table se présente comme suit:

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

Bien sûr, comme le souligne niteriter, il serait préférable d’utiliser des balises DIV pour vos mises en page. Dans votre cas, cela produirait également un code HTML / CSS beaucoup plus propre.

<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

Vous devez utiliser les styles CSS pour les présentations, pas les tableaux. Les tableaux servent à afficher des lignes de données et non à compenser les dispositions.

Considérez ceci:

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

Copiez simplement ce code dans un fichier HTML et jouez dans la fenêtre du navigateur pour voir comment il fonctionne.