如何强制表中的所有行都具有相同的高度

| 我试图建立一个html表，但我想强制所有行具有相同的高度（无论单元格中有多少内容）。如果一个单元格超出了空间，我希望它仅截断文本并隐藏其余部分。 是否可以使用CSS等？     
2020-03-13 5 条评论
分享

没有找到相关结果

    已邀请:

    傻寺俊擒

    仅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>
        
    2020-03-13 0 0
    分享

    疾桓

    将CSS的
    height
    属性设置为所需的像元高度，然后使用
    overflow: hidden
    （请参阅CSS溢出）以防止内容扩展像元。     
    2020-03-13 0 0
    分享

    犁攀富

    给表一个类： 
    <table class=\"myTable\">...</table>
    并在CSS中尝试以下操作： 
    table.myTable td {
  height: 20px;
  overflow: hidden;
}
        
    2020-03-13 0 0
    分享

    掀辟髓观粟

    您将要设置的CSS样式是： 显示：块，最小高度和最大高度。 
        <!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>
        
    2020-03-13 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册