Html 如何强制表中的所有行具有相同的高度_Html_Css_Css Tables

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

html css

Html 如何强制表中的所有行具有相同的高度,html,css,css-tables,Html,Css,Css Tables,我试图构建一个html表，但我想强制所有行具有相同的高度（无论单元格中有多少内容）。如果一个单元格超出了空间，我希望它只切断文本并隐藏其余部分使用CSS等可以这样做吗？将CSSheight属性设置为您希望的单元格高度，并使用overflow:hidden（请参阅）防止内容扩展单元格。为表格设置一个类： <table class="myTable">...</table> 只是 CSS: HTML: HTML: 内容很多内容应该花更多的时间来包装，如果我只需要一点点

我试图构建一个html表，但我想强制所有行具有相同的高度（无论单元格中有多少内容）。如果一个单元格超出了空间，我希望它只切断文本并隐藏其余部分

使用CSS等可以这样做吗？

将CSS

height

属性设置为您希望的单元格高度，并使用

overflow:hidden

（请参阅）防止内容扩展单元格。

为表格设置一个类：

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

只是 CSS: HTML: HTML:


内容
很多内容应该花更多的时间来包装，如果我只需要一点点东西，就会被僵尸之类的东西入侵
更多内容
小内容
够了

您要设置的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>


JS-Bin
html{字体大小：16px；}
表{}
表tr{
显示：块；
边框底部：纯绿1px；
高度：.8em；
最小高度：.8em；
最大高度：.8em；
背景色：#E300E3；
溢出：隐藏；
}
16px字体大小列2

可能很幼稚，但简单地设置

表td{height:100px；}

不起作用？下面是一个小问题。是否可以有一个表，其中所有行的高度都相同，但高度是自动计算的？换句话说，所有行的高度都与最高行容纳其内容所需的高度相同？我尝试了这个方法，但似乎没有使其高度小于适合内容的高度。即使高度：1px。如果有3行数据（包装后），它仍然显示所有3行。“溢出：隐藏”似乎没有生效。我正在使用Firefox，我做了大量研究，IE中有一个解决方案，但不适用于其他浏览器。我已经用IE恭维代码和通用代码更新了这个例子。@ohmusama-我试过了，但它似乎并没有使它的高度小于适合内容的高度。即使高度：1px。如果有3行数据（包装后），它仍然显示所有3行。“溢出：隐藏”似乎没有生效。我正在使用firefox。有什么想法吗？我发现：我正在这样做，它仍然可以扩展以适应多行内容，即使我将高度设置为1px；和溢出：隐藏..有什么想法吗？？？@ooo，你是在

表

或

td

上设置样式吗？你可能需要空白：nowrap，这样内容就不会包装在单元格中。

#fixedheight {
    table-layout: fixed;
}

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

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

#fixedheight {
    table-layout: fixed;
}

#fixedheight td {
    width: 25%;
}

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

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

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