如何讓表格單元格具有相同的高度

如何讓表格單元格具有相同的高度？檢出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

如何讓表格單元格具有相同的高度

回答

相關問題