调整指定表行的高度 - Bootstrap

时间:2015-10-20 10:38:26

标签: html css twitter-bootstrap-3

我正在使用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>

1 个答案:

答案 0 :(得分:0)

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

&#13;
&#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;
&#13;
&#13;