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

Question

我只知道 CSS 的基础知识，所以不知道如何去做。我有一个主要包含单行数据的表格，但第一行中的最后一个单元格（称为“其他”）有多行有没有一种方法可以使表格中除该单元格之外的每个单元格的高度变小？现在，由于多行列太大，导致其余单元格在数据上方和下方有额外的空白（请参见第一个屏幕截图）。当我更改 的 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;}

Answer 1

Rowspan 可能也不会满足您的要求。不过，还有一个替代方案，但它不是pretty。

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

下面只是一个示例，因此您可能需要调整高度以显示您想要的方式。

<style>

.other{

height:50px;

overflow:scroll

}

</style>

<td>

<div class="other">

content goes here.

</div>

Answer 2

您还可以截断文本（并添加省略号）以表明内容比显示的内容更多。

添加的简单好处是，如果您向单元格添加 title 属性，则单元格的完整内容可以显示为类似于 tooltip

请参阅下面的演示：

table {

  box-sizing: border-box;

  border-collapse: collapse;

  max-width: 800px;

}

table td,

table th {

  vertical-align: middle;

  border: 1px solid #d4d4d4;

  width: 100px;

  max-width: 300px;

}

td.other {

  overflow: hidden;

  max-width: 300px;

  text-overflow: ellipsis;

  white-space: nowrap;

}

<h2>sample</h2>

<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-->

    <tr>

      <td>

        something

      </td>

      <td>

        version

      </td>

      <td>

        region

      </td>

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

      <!-- CELL WITH MULTIPLE LINES: -->

      <td class="other" title="other (multi-line) - this is a very long line that should not wrap around the td">

        other (multi-line) - this is a very long line that should not wrap around the td

      </td>

      <!-- end loop for environments -->

    </tr>

  </tbody>

</table>