HTML表：如何使所有行等于高度？

Question

我正在用HTML生成一个表。我有许多行，其计数保存在变量{{ items|length }}

中

除标题行外，如何使所有行的高度相同？

我试过了：

<style>
     table.equalDivide th { width:100 / {{ items|length }} %; }
</style>

但这不起作用。

所有行应具有最高行的高度（下图中的12:00 - 14:00）。

Answer 1

编辑：我认为您想要发生的事情已经正常发生。我创建了一个JSFiddle，它显示了一个大单元格如何强制同一行中的其他单元格具有其高度。我很好奇你是否还有其他事情发生。对不起，如果我误解了你。

只需将高度应用到所有tr。如果您希望高度取决于行数，只需相应地更改css规则。

HTML：

<table>
<tbody>
<th>Title</th>
<tr><td>Foo</td></tr>
<tr><td>Bar</td></tr>
<tr><td>Baz</td></tr>
</tbody>
</table>

CSS：

tr {
  height: 50px;
}

Answer 2

我知道无法用CSS做到这一点。

所有你能做的（我认为）都在你的onload（）函数中，通过迭代表行来获得最大行高（table.rows [..]。offsetHeight（我希望＆＃39; s-right-if不，尝试最大单​​元格高度），然后将表格中每行的高度设置为该值。

Answer 3

这很简单，我可以得到它 - 但它有效......

使用记事本或类似工具（建议使用Notepad ++）编辑HTML文件，如下所示：     （注意：语法非常重要 - 请严格遵循 - 特别是单引号或双引号）

1：为您的表提供唯一的ID：table id =“myTable”...

2：给你的body元素一个onload函数：body onload =“resizeTable（'myTable'）;” ...

3：在你的脑子部分添加：

<script type="text/javascript">
function resizeTable(tableID)
{
var tbl=document.getElementById(tableID), biggestRow=0, rowHeight=0, row=0;
for (row=0; row < tbl.rows.length; row++) {     //find biggest row height
    rowHeight=parseInt(tbl.rows[row].offsetHeight);
    if (rowHeight > biggestRow) {biggestRow=rowHeight;}
}
for (row=0; row < tbl.rows.length; row++) {     //set all rows to biggest row height
    tbl.rows[row].style.height=biggestRow + "px";
}
}
</script>

Answer 4

使用 JQuery 很简单：

//variable to store the highest cell height
var highestHeight = 0;

//Loop through all the table cells to get the highest height
$('td').each(function(index, element) {
  highestHeight = Math.max(highestHeight, $(element).outerHeight());
});

//Set the height of all table cells to the highest height
$('td').height(highestHeight);

table {
  width: 100%;
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>single line text</td>
      <td>double line<br />text</td>
    </tr>
    <tr>
      <td>2nd single line text</td>
      <td>2nd brother of single line</td>
    </tr>
    <tr>
      <td>triple<br/>line<br/>text here</td>
      <td>triple<br/>line's<br/>brother</td>
    </tr>
  </tbody>
</table>

据我所知，您不能将 CSS Grid 或 Flexbox 与 <table> 一起使用，如果您只想使用 CSS，则可能必须不使用 <table> 并使用 {{1 }} 使用适当的 CSS 类。

开始学习 Flexbox 的好地方是 CSS Grid 的 Flexbox Froggy 和 CSS Grid Garden