Как динамически заполнить пустое место в столбце

У меня есть таблица с тремя столбцами. Содержимое столбца 1 является динамическим. Это расписание на день, поэтому каждый день длина текста меняется. Столбец 2 также динамичен, но меняется не так часто, может быть несколько раз в месяц. Колонка 3 статическая, информацию меняю вручную.

Проблема в том, что каждый день в одном из столбцов может быть пустое место. В любой день столбец 1 может быть длиннее или короче двух других столбцов. Что я хочу сделать, так это динамически заполнить пустое пространство независимо от того, какой столбец в нем нуждается, чтобы все три выглядели несколько сбалансированно.

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

Я искал различные свойства HTML/CSS, но пока не нашел решения. Может быть, я слишком много прошу, но надеюсь, что кто-то сделал что-то подобное. Большинство новостных сайтов, похоже, хорошо справляются с этим даже внутри разделов. Их колонки выглядят сбалансированными.

Я не знаю, как это будет работать на стороне сервера, так как ему нужно знать окончательную высоту, но если у вас есть такое решение, я использую VB, а также Javascript, если на стороне клиента. Но я думаю, что будет способ CSS.

РЕДАКТИРОВАТЬ: я имею в виду только ВЫСОТУ столбца, ширина столбца фиксирована. При поиске в Google все, что я мог получить, это решения для ширины, поэтому, возможно, то, о чем я прошу, не может быть сделано или не было сделано. Я имею в виду количество текста, которое заполняет HEIGHT столбца. Для простоты предположим, что изменяется только столбец 1. Но объем текста, который заполняет HEIGHT столбца 1, может быть больше или меньше того, что заполняет два других столбца, оставляя пустую область либо в столбце 1, если в нем меньше текста, либо пустую область в двух других столбцах, если он имеет больше текста, чем любой из двух других. Надеюсь, это проясняет :)


html css asp.net tabular
person Steve    schedule 12.06.2015    source источник
comment
Например, добавьте класс на td в первый столбец с минимальной шириной. td.myclass {min-width: 100px;} Таким образом, вы не добавляете пустого места в tb, но и не делаете td слишком маленьким.   -  person Germano Plebani    schedule 12.06.2015
comment
Спасибо за ответ, но на самом деле я имею в виду высоту каждого столбца. Ширина установлена.   -  person Steve    schedule 12.06.2015
comment
Извините или недоразумение, но для таблицы вы имеете в виду HTML ‹table›?   -  person Germano Plebani    schedule 12.06.2015
comment
Без проблем. Когда я искал, результаты, которые вернулись, также были о ширине. Да, я имею в виду таблицу HTML. Я знаю, что аргументы div предпочтительнее, но в этом случае таблица работает лучше всего. На самом деле, это действительно должно хорошо работать для того, что я пытаюсь сделать, потому что общая высота каждого столбца установлена ​​одинаковой.   -  person Steve    schedule 12.06.2015
comment
Тег ‹table› идеально подходит для таблицы :) в любом случае в HTML-таблице высота столбца не может измениться, если отсутствует td   -  person Germano Plebani    schedule 12.06.2015

Ответы (1)


arrow_upward
0
arrow_downward

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

body {background:#FFE}
table {
  border: 1px outset gray
}
td {
  border: 1px inset gray;
  width: 33.3%;
  vertical-align: top;
  padding: 0;
}
td:first-child {
  background: url(http://lorempixel.com/600/900) repeat;
}
td:first-child + td {
  background: url(http://lorempixel.com/600/901) repeat;
}
td:first-child + td + td {
  background: url(http://lorempixel.com/600/902) repeat;
}
td > div {
  background: #FFE;
  padding: .33em
}
<table>
  <tr>
    <td>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
    </td>
    <td>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </td>
    <td>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </div>
    </td>
  </tr>
</table>

person Mr Lister    schedule 19.10.2015
comment
Как новостной сайт. Если вы посмотрите на новостные сайты, кажется, что их столбцы всегда выходят даже в самый низ. Это может быть немного текста с дополнительной... ссылкой или чем-то еще, чтобы столбцы выглядели сбалансированными. Ваш образец выглядит так, будто изображение повторяется, если столбец растет. - person Steve; 20.10.2015
comment
Ссылка Подробнее? Нет, извините, это совсем не ясно из вопроса. Я думал, вы хотите чем-то заполнить оставшуюся часть ячейки, если содержимое не одинаковой высоты. Но если вы включаете ссылки «Читать дальше», вы сами решаете показывать столько текста, сколько хотите. т.е. вы сами решаете, какой высоты будут колонны; так что лишнего места нет. - person Mr Lister; 20.10.2015
comment
Кстати, если вы хотите неповторяющееся изображение, просто используйте изображение большего размера! - person Mr Lister; 20.10.2015
comment
Пустое пространство динамично. Столбец 1 меняется каждый день, столбец 2 — не реже одного раза в неделю, столбец 3, возможно, менее статичен в течение месяца. Пустое пространство всегда будет разным, и в зависимости от того, сколько информации содержится в каждом столбце, он может стать самым высоким столбцом в любое время. Неважно, есть ли ссылка «Читать дальше» или нет, но предпочтительно текст, что-то, что предоставляет информацию, которая частичное изображение просто заполняет пространство. - person Steve; 21.10.2015