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

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

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

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

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

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

EDIT: Я имею в виду высоту только столбца, ширина столбцов фиксирована. Поиск google все, что я мог получить, - это решения для ширины, поэтому, возможно, то, о чем я прошу, не может или не было сделано. Я имею в виду объем текста, который заполняет высоту столбца. Для простоты можно сказать, что столбец 1 является единственным, который меняется. Но количество текста, которое заполняет высоту столбца 1, может быть больше или меньше того, что заполняет два других столбца, оставляя пустую область в столбце 1, если в двух других столбцах меньше текста или пустой области, если она имеет больше текста, чем любой из двух других. Надеюсь, что это очистит :)

источник

2015-06-12 Steve

Добавить класс по тд в первой колонке с мин-шириной, например. 'td.myclass {min-width: 100px;}' Таким образом, вы не добавляете пустое пространство в tb, но у вас нет слишком маленького td. –

Спасибо за ответ, но я на самом деле ссылаюсь на высоту каждого столбца. Ширины установлены. – Steve

Извините или недоразумение, но для таблицы вы имеете в виду HTML

? –

ответ

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

источник

2015-10-19 09:43:02

Не изменилось ли мое Редактирование? – Steve

Как новостной сайт. Если вы посмотрите на новостные сайты, их столбцы всегда выглядят даже внизу. Это может быть немного текста с более ... ссылкой или что-то, чтобы колонки выглядели сбалансированными. Ваш образец выглядит так, будто изображение повторяется, если столбец растет. – Steve

Ссылка «Читать дальше»? Нет, извините, это не совсем понятно из вопроса. Я думал, что вы хотите заполнить остальную часть ячейки чем-то, если содержимое не такое же. Но если вы включаете ссылки «читать больше», это ваше решение показать столько текста, сколько вы хотите. То есть вы решаете, насколько высоки столбцы; поэтому нет «оставшегося» пространства. –

Смежные вопросы