如果我在行中有一个图标，引导行高度会发生变化答案

【问题标题】：Bootstrap row height changes if I have an Icon in the row如果我在行中有一个图标，引导行高度会发生变化
【发布时间】：2021-01-30 19:59:41
【问题描述】：

我想让我的桌子的所有三行都具有相同的高度。但是带有图标的行总是更高。

是否有一些神奇的 css 设置可以让我自动让表格的所有行都有一个恒定的高度，无论我是否添加了一个图标？

<!DOCTYPE html>
<html lang="en" >
<head>
    <title>TEST</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>

<body>
<style>
#my_div {
    line-height: 0.3;
}
.my_icon {
    width: 1em;
    height: 1em;
    vertical-align: middle;
}
</style>


<div class="container-fluid bg-info" id="my_div">
  <table class="table">
    <tbody>
      <tr class="table-primary row">
        <td class="col-sm-2">No  Icon in this row.  </td>
      </tr>
      <tr class="table-primary row">
        <td class="col-sm-2">Icon Row:
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="css-class my_icon"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
        </td>
      </tr>
      <tr class="table-primary row">
        <td class="col-sm-2">No  Icon in this row.  </td>
      </tr>
    </tbody>
  </table>
</div>
  </body>
</html>

#my_div {
  line-height: 0.3;
}

.my_icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="container-fluid bg-info" id="my_div">
  <table class="table">
    <tbody>
      <tr class="table-primary row">
        <td class="col-sm-2">No Icon in this row. </td>
      </tr>
      <tr class="table-primary row">
        <td class="col-sm-2">Icon Row:
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="css-class my_icon"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
        </td>
      </tr>
      <tr class="table-primary row">
        <td class="col-sm-2">No Icon in this row. </td>
      </tr>
    </tbody>
  </table>
</div>

【问题讨论】：

不幸的是没有魔法，你可以通过在 tds 上设置一个足够大的高度来保存你的图像，或者通过 js，在窗口加载时检查 td 的高度并设置高度他们都到了最高的数字。顺便说一句，你为什么在桌子上使用 bootstrap css 作为网格？
<td> 中的文本长度是静态的吗？还是文本长度未知（短行和长行文本）？
感谢您对“用于表格网格的引导 css”的评论。事实证明，如果我摆脱了表格的东西并使用网格，一切都会很开心。

标签： html css bootstrap-4 icons

【解决方案1】：

把你的css改成这个...

        .my_icon {
            width: 1em;
            height: 1em;
            vertical-align: middle;
        }
        tr{
            height: 30px;
        }
        td{
            padding: 0px 10px !important;
        }

根据需要修改...非常适合我

【讨论】：

我相信他正在寻找一个动态的解决方案，不必每次都调整
他要求“让表格的所有行都有一个恒定的高度”这就是他现在所拥有的。

【解决方案2】：

我想让我的表格的所有三行都具有相同的高度

没有 CSS 规则可以神奇地设置所有行高以匹配最高行。

但是使用一些 JavaScript 很容易做到这一点：

// set all row heights to match the tallest row

document.querySelector('button').onclick = function() {

  // get all row elements
  const trs = [...document.querySelectorAll('#my_div .row')];

  // determine max height of rows
  const maxRowHeight = trs.reduce((max, tr) => {
    return Math.max(max, tr.offsetHeight);
  }, 0);

  // set height of all rows
  trs.forEach(tr => {
    tr.style.height = maxRowHeight + 'px';
  });

}

/* CSS from question (unchanged) */
#my_div {
  line-height: 0.3;
}

.my_icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

<!-- HTML from question (unchanged) -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<body class="p-2">
  <button class="btn btn-primary btn-sm">Resize Rows</button>

  <div class="container-fluid bg-info mt-2" id="my_div">
    <table class="table">
      <tbody>
        <tr class="table-primary row">
          <td class="col-sm-2=4">No Icon in this row. </td>
        </tr>
        <tr class="table-primary row">
          <td class="col-sm-4">Icon Row:
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="css-class my_icon"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
          </td>
        </tr>
        <tr class="table-primary row">
          <td class="col-sm-4">No Icon in this row. </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

【讨论】：