Question

我正在使用Bootstrap v3和一个简单的表 - 但是我需要调整表中特定行的高度，使它们的高度小于其余行。我已经尝试添加一个特定的tr类，但似乎没有任何效果。

以下是我到目前为止自定义CSS的内容：

 <style type="text/css">
      tr.approvers {
        height:20px;
      }
    </style>

这是HTML表格：

<tr>
<td>Acme Widgets</td>
<td>1</td>
<td class="success">Approved</td>
<td>001</td>
</tr>
<tr class="approvers">
<td></td>
<td>John Smith</td>
<td class="success" colspan="2">20/10/2015 14:24:24</td>
<td></td>
</tr>

Answer 1

除非将它们包裹在<table></table>内，否则它将无效。不在tr范围内的table被视为无效，浏览器不会为行创建DOM树。因此，浏览器忽略了所有<tr> <td>，并且您的代码正在以纯文本形式执行。

＆＃13;

tr.approvers {
  height: 60px;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<table>
  <tr>
    <td>Acme Widgets</td>
    <td>1</td>
    <td class="success">Approved</td>
    <td>001</td>
  </tr>
  <tr class="approvers">
    <td></td>
    <td>John Smith</td>
    <td class="success" colspan="2">20/10/2015 14:24:24</td>
    <td></td>
  </tr>
</table>

＆＃13;

调整指定表行的高度 - Bootstrap

1 个答案: