Как изменить высоту одной ячейки независимо от других ячеек в той же строке таблицы bootstrap?

Question

Я знаю только основы CSS, поэтому не знаю, как go об этом. У меня есть таблица, состоящая в основном из однострочных данных, но последняя ячейка, которая называется «Другое», в моей первой строке содержит несколько строк

Есть ли способ сделать высоту маленькой для каждой ячейки в таблице, кроме что одна клетка? Прямо сейчас, поскольку столбец с несколькими строками настолько большой, что в остальных ячейках появляется дополнительный пробел над и под данными (см. Первый снимок экрана). Когда я изменяю 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>