Как оформить таблицу так, чтобы некоторые клетки росли вертикально, а не горизонтально - PullRequest
Новая
       0

Как оформить таблицу так, чтобы некоторые клетки росли вертикально, а не горизонтально

0 голосов
/ 10 января 2020

У меня есть таблица HTML, упрощенная как: 

<table border=1>
  <tr>
    <td style='white-space: nowrap;' >alpha alpha alpha </td>
    <td rowspan=3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
    <td>alpha</td>
  </tr>
  <tr>
    <td style='white-space: nowrap;' >beta beta beta </td>
    <td>beta</td>
  </tr>
  <tr>
    <td style='white-space: nowrap;' >gamma gamma gamma </td>
    <td>gamma</td>
  </tr>
</table>

https://jsfiddle.net/1v2h4x9a/

Обычно отображается как:

normal rendering of HTML table

Я бы предпочел использовать перенос слов, чтобы занять доступное вертикальное пространство. Таким образом, он должен отображаться как:

desired rendering of HTML table

Целью здесь является эффективное использование экранной недвижимости. Т.е. почему столбец должен становиться шире, когда есть дополнительные строки для переноса текста.

Далее, я хочу сделать это только с HTML и CSS. Нет javascript. Я готов увидеть ответ на основе javascript (но вряд ли он этого захочет).

Обратите внимание, что в реальной таблице есть несколько столбцов с разной высотой, а самый левый столбец смещен от остальных, но это не так. Не стоит показывать это в образце. Кроме того, я бы предпочел, чтобы ячейка росла горизонтально, если что-то еще не занимало вертикальное пространство.

Я попытался установить небольшую ширину таблицы: это приводит к тому, что второй столбец становится очень узким и увеличивает высоту больше.

Ответы [ 2 ]

0 голосов
/ 10 января 2020

Ты прав. Тебе это не понравится. Но вот как вы можете это сделать - с jQuery и без. Хитрость заключается в том, чтобы обернуть содержимое этой ячейки в div, чтобы у вас было что измерить.

С jQuery: 

var cellWidth = 1000;
var tableHeight = $('.c2').innerHeight();
var fontSize = parseInt(window.getComputedStyle($('.c2 span')[0]).fontSize, 10);

do {
	$('.c2').css('width', cellWidth+'px');
	cellWidth-=20;
}
while ( $('.c2 span').innerHeight() < tableHeight - fontSize);

$('.c2').css('width', $('.c2 span').width() );
.c2 {
padding: 0 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border=1 class=t>
  <tr>
    <td class=c1>alpha alpha alpha </td>
    <td class=c2 rowspan=3><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span></td>
    <td class=c3d>alpha</td>
  </tr>
  <tr>
    <td class=c1>beta beta beta </td>
    <td class=c3>beta</td>
  </tr>
  <tr>
    <td class=c1>gamma gamma gamma </td>
    <td class=c3>gamma</td>
  </tr>
</table>

Обычный JS: 

var cellWidth = 1000;
var theCell = document.querySelectorAll('.c2')[0];
var theSpan = document.querySelectorAll('.c2 div')[0];
var cellHeight = theCell.offsetHeight;

do {
	theCell.style.width = cellWidth+'px';
	cellWidth--;
}
while ( theSpan.offsetHeight < cellHeight);
<table border=1 class=t>
  <tr>
    <td class=c1>alpha alpha alpha </td>
    <td class=c2 rowspan=3><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div></td>
    <td class=c3d>alpha</td>
  </tr>
  <tr>
    <td class=c1>beta beta beta </td>
    <td class=c3>beta</td>
  </tr>
  <tr>
    <td class=c1>gamma gamma gamma </td>
    <td class=c3>gamma</td>
  </tr>
</table>

Редактировать: Я добавил дополнительную строку в версию jQuery, чтобы вычесть размер шрифта из высоты ячейки при сравнении с высота дивана.

Редактировать: Добавлена ​​дополнительная линия (в версии jQuery), чтобы увеличить расстояние, вместе с некоторыми отступами для комнаты для дыхания.

0 голосов
/ 10 января 2020

Как насчет простой установки столбца таблицы на фиксированную ширину, например, так: 

.c2{
  width:150px;
}

или вы хотите, чтобы он всегда занимал три строки, независимо от того, сколько там текста. Наверное, я спрашиваю, адаптивен ли он, и вам всегда нужно, чтобы он был длиной в три строки или вы могли просто поиграть со значением ширины, пока он не будет выглядеть так, как вы хотите.

...