时间戳

首页 > 解决方案 > 如何独立于引导表同一行中的其他单元格更改一个单元格的高度？

html - 如何独立于引导表同一行中的其他单元格更改一个单元格的高度？

问题描述

我只知道 CSS 的基础知识，所以不知道如何去做。我有一个主要包含 1 行数据的表格，但我的第一行中的最后一个单元格，称为“其他”，有多行

有没有办法使表格中每个单元格的高度变小，除了一个单元格？现在，因为多行的列太大了，所以其余的单元格在数据上方和下方都有额外的空白（见第一个屏幕截图）。当我更改它line-height时，td它使整个表格看起来不错，除了一个包含多行的单元格（参见第二个屏幕截图）

没有line-height： 第一张截图

添加line-height： 第二张截图

html （我省略了一些td' 以使其看起来更干净）：

<table class="table">
  <thead>
    <tr>
      <th scope="col">Something</th>
      <th scope="col">Code Version</th>
      <th scope="col">Region</th>
      <th scope="col">Something</th>
      <th scope="col">Something</th>
      <th scope="col">Something->Membership</th>
      <th scope="col">SBMO</th>
      <th scope="col">Something</th>
      <th scope="col">IVR</th>
      <th scope="col">CPM Something</th>
      <th scope="col">Other</th>
    </tr>
  </thead>
  <tbody>

<!-- start loop for mongodb collection: environments-->
 <% environments.forEach(function(environment){ %>
    <tr>
        <td>
          <%= environment.something %>
        </td>
        <td>
          <%= environment.codeVersion %>
        </td>
        <td>
          <%= environment.region %>
        </td>

       <!-- other td's go here --->

        <!-- CELL WITH MULTIPLE LINES: -->
        <td class="other">
         <%= environment.other %>
        </td>
 <%}); %> <!-- end loop for environments -->
    </tr>
  </tbody>
</table>

CSS：

.table td {
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: middle;
    border-right: 1px solid #d4d4d4;
}

other {
    white-space: pre-wrap;
}

标签： htmlcsstwitter-bootstrap

解决方案

Rowspan 可能也不会做你想做的事。但是，有一个替代方案，但它不是pretty。

将内容包装在 div 中，设置其高度并设置overflow:scroll。这将为内容提供一个滚动条，用户可以上下滚动。

下面只是一个示例，因此您可能希望使用高度来显示您想要的高度。

<style>
.other{
height:50px;
overflow:scroll
}
</style>

<td>
<div class="other">
content goes here.
</div>

推荐阅读