web-dev-qa-db-ja.com

テーブルのすべての行を同じ高さにするにはどうすればよいですか

私はhtmlテーブルを作成しようとしていますが、すべての行に同じ高さを強制したいのです（セルのコンテンツの量に関係なく）。セルがスペースをはみ出す場合は、テキストを切り取って残りを非表示にしてください。

これはCSSなどを使用して可能ですか？

htmlcsscss-tables
17
leora

IEのみ

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>

ユニバーサルソリューション

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

CSS heightプロパティをセルの高さに設定し、overflow: hidden（ CSSオーバーフロー を参照）を使用して、コンテンツがセルを拡張しないようにします。

3
Henry Merriam

設定するCSSスタイルは、display：block、min-height、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>
1
alignedfibers

テーブルにクラスを与えます：

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

そしてCSSで、以下を試してください：

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