更改表格行高 - Bootstrap

5
我遇到了一个问题,我想通过使用Bootstrap来更改表格行的高度。 我目前的代码是:
    <table class="table table-bordered table-hover type-list2">
    <tr>  
      <th>#</th>
      <th>DSP Type</th>
      <th>Email</th>
      <th>Code Type</th>
      <th>Dispatch Time</th>
      <th>Codes</th>
    </tr>
    <tr>
      <td>2</td>
      <td>Email</td>
      <td>test@gmail.com</td>
      <td>7 Day</td>
      <td>2014-05-20 15:42:59</td>
      <td>6</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Manual</td>
      <td>test@gmail.com</td>
      <td>12 Month</td>
      <td>2014-05-20 15:42:59</td>
      <td>
      WXJ79-P33MM-RX7BP-QHW86-AAAAA
      <br>HW382-6TPF3-RHV63-3W8QP-AAAAA
      <br>FHKV2-K376Y-3Q984-36C7C-AAAAA
      <br>RHXCM-KC24C-6B7T9-TBFB3-AAAAA
      <br>MD8QM-VXBQW-B72Q7-CR3BM-AAAAA
      <br>GXFGV-KX7TP-82H2H-DRFHM-AAAAA
      <br>VQV2F-P7VKM-MBBMB-M7JYC-AAAAA
      <br>KG4VD-HWGMM-6MJCT-G7PVC-AAAAA
      </td>
    </tr>

并且:

tr {
   max-height: 35px !important;
   height: 35px !important;
}

这里有一个包含代码的 Fiddle:http://www.bootply.com/xPgWHFFDah


目前,它只需要被切掉。然后我打算添加一些Jquery来改变悬停时的高度。谢谢。 - ollierexx
1个回答

15
解决方法是将 div 嵌套在内部,设置固定高度和溢出,如下所示:
<td>
  <div style="height: 50px; overflow:auto;">
      WXJ79-P33MM-RX7BP-QHW86-AAAAA
      <br>HW382-6TPF3-RHV63-3W8QP-AAAAA
      <br>FHKV2-K376Y-3Q984-36C7C-AAAAA
      <br>RHXCM-KC24C-6B7T9-TBFB3-AAAAA
      <br>MD8QM-VXBQW-B72Q7-CR3BM-AAAAA
      <br>GXFGV-KX7TP-82H2H-DRFHM-AAAAA
      <br>VQV2F-P7VKM-MBBMB-M7JYC-AAAAA
      <br>KG4VD-HWGMM-6MJCT-G7PVC-AAAAA
  </div>
</td>

请看这里的更新版本


1
有没有一种解决方案,不需要在它周围放置一个 div? - Eric Luo
是的,您可以通过包装整个表格而不是每个td来实现,查看我的答案[在这里][1]:[1][https://dev59.com/72Ij5IYBdhLWcg3wHhv_] - Gayan Kavirathne

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接