Comment puis-je forcer toutes les lignes d'une table à avoir la même hauteur

Je suis en train de construire un tableau html, mais je veux de la force de toutes les lignes ont la même hauteur (peu importe la quantité de contenu dans les cellules). Si une cellule de dépassements de l'espace, je veux qu'il suffit de couper le texte et de cacher le reste.

Est-ce possible à l'aide de CSS, etc?

source d'informationauteur leora | 2011-04-15

  1. 6

    C'est à dire uniquement

    CSS:

    #fixedheight {
    table-layout: fixed;
}

#fixedheight td {
    height: 20px;
    overflow: hidden;
    width: 25%;
}

    HTML:

    <table id="fixedheight">
    <tbody>
        <tr>
            <td>content</td>
            <td>lots of content that should spend way more time wrapping down than it should if I were just to have a short bit of stuff, that would be invaded by zombies and the such</td>
            <td>more content</td>
            <td>small content</td>
            <td>enough already</td>
        </tr>
    </tbody>
</table>

    Solution universelle

    CSS:

    #fixedheight {
    table-layout: fixed;
}

#fixedheight td {
    width: 25%;
}

#fixedheight td div {
    height: 20px;
    overflow: hidden;
}

    HTML:

    <table id="fixedheight">
    <tbody>
        <tr>
            <td>
                <div>content</div>
            </td>
            <td>
                <div>lots of content that should spend way more time wrapping down than it should if I were just to have a short bit of stuff, that would be invaded by zombies and the such</div>
            </td>
            <td>
               <div>more content</div>
            </td>
            <td>
               <div>small content</div>
            </td>
            <td>
               <div>enough already</div>
            </td>
        </tr>
    </tbody>
<table>
  2. 3

    Définir le CSS height bien à ce que vous voulez de la cellule heights, et utilisez overflow: hidden (voir CSS overflow) pour empêcher le contenu de l'expansion de cellules.

  3. 1

    Donner à la table une classe:

    <table class="myTable">...</table>

    Et dans le CSS, essayez les solutions suivantes:

    table.myTable td {
  height: 20px;
  overflow: hidden;
}
  4. 1

    Les Styles CSS, vous pouvez définir sont les suivants:
    display:block, min-height et max-height.

        <!DOCTYPE html>
      <html>
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width">
          <title>JS Bin</title>
          <style>
            html{font-size:16px;}
            table{}
            table tr{
              display:block;
              border-bottom:solid green 1px;    
              height:.8em;
              min-height:.8em;
              max-height:.8em;
              background-color:#E300E3;
              overflow:hidden;
           }
         </style>
       </head>
       <body>
         <table id="MyTable">
           <tr><td>16px Font-Size</td><td>Column2</td></tr>
         </table>
       </body>
     </html>