如何让表格单元格具有相同的高度

如何让表格单元格具有相同的高度？检出http://thomaswd.com/organizer/dashboard并点击日历。你会看到表格单元格有不同的高度。我有两排固定高度的桌子顶部，我的桌子高度是100％。我不想要指定的像素高度，因为浏览器调整大小时不起作用。我该怎么做呢？如何让表格单元格具有相同的高度

来源

2013-03-13 Thomas Lai

可以使用相对高度为好，例如10％ – Horen 2013-03-13 22:45:14

是的，但前2排有像素高度 – 2013-03-13 22:45:55

为了让表细胞具有相等的高度我用谷歌Chrome和检查通过在日历上右键单击并选择“检查元素”，可以选择日历中的某一天。然后，我改变了'calendar-day'的样式，如下所示：

/* shared */ 
td.calendar-day, td.calendar-day-np { 
    border-bottom:1px solid #999; 
    border-right:1px solid #999; 
    height: 10%; 
}

只需在style.css中指定想要的高度即可。

来源

2013-03-13 23:19:20

什么是百分比'高度：10％;'出了什么？如果我有十多行？ – Flimm 2015-02-06 16:01:45

由于这是一个表格单元，高度将超出表格的高度。 – 2015-05-31 18:09:52

来源：How can I force all rows in a table to have the same height

<html> 
    <head> 
     <style type="text/css"> 
      #fixedheight { 
       table-layout: fixed; 
      } 

      #fixedheight td { 
       width: 25%; 
      } 

      #fixedheight td div { 
       height: 20px; 
       overflow: hidden; 
      } 
     </style> 
    </head> 
    <body> 
     <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> 
    </body> 
</html>

来源

2013-03-13 22:47:34

我不想固定高度 – 2013-03-13 22:48:05

显然适应脚本到您的表格尺寸... – 2013-03-13 22:48:52

然后使用百分比，而不是固定高度？从个人调整你的桌子的大小，我会添加一个最小尺寸和其他隐藏以及！ – 2013-03-13 22:51:10

看起来你想要的是最高的单元格的高度，以在该行中传播。

您可以用JavaScript做到这一点：

var eq_el_height = function(els, min_or_max) { 

    els.each(function() { 
     $(this).height('auto'); 
    }); 

    var m = $(els[0]).height(); 

    els.each(function() { 
     var h = $(this).height(); 

     if (min_or_max === "max") { 
      m = h > m ? h : m; 
     } else { 
      m = h < m ? h : m; 
     } 
    }); 

    els.each(function() { 
     $(this).height(m); 
    }); 
};

通过你的表格单元格到这样的功能：

 $(#fixedheight tr').each(function(){ 
      eq_el_height($(this).find('td'), "max"); 
     });

来源

2013-03-13 23:13:36 sanon

作品像一个魅力 – mwallisch 2016-12-01 20:53:47

谢谢你救了我的一天！ – SalutonMondo 2017-02-14 14:34:56

另一种解决方案可以是：

var maxHeight = null; 
$('#tableId tr').each(function() { 
    var thisHeight = $(this).height(); 
    if(maxHeight == null || thisHeight > maxHeight) maxHeight = thisHeight; 
}).height(maxHeight);

来源

2017-05-02 14:26:38

如何让表格单元格具有相同的高度

回答

相关问题