Как задать фиксированную высоту ячеек в первой колонке таблицы?

380
31 марта 2017, 22:14

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

Answer 1

Какие проблемы?

.table { 
  display: table; 
  float: none; 
 
} 
 
.table-cell { 
  display: table-cell; 
  float: none; 
  vertical-align: top; 
 
} 
 
.col-1 { 
  height: 50px; 
  overflow: hidden; 
}
<div class="table"> 
  <div class="table-cell"> 
    <div class="col-1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend, sem quis viverra iaculis, elit ipsum pellentesque nunc, id sollicitudin ex dolor ac quam. Nullam sed mi eget massa viverra pellentesque. Mauris at urna sed dolor tempor mollis 
      mattis in nunc. Aenean ultrices congue sapien et sollicitudin. Vivamus rhoncus, urna volutpat luctus pretium, diam metus tristique nunc, ac sagittis urna elit eget purus. Mauris dapibus, dui id vulputate finibus, nibh ipsum viverra elit, vel pharetra 
      orci est id ligula. Quisque cursus tincidunt tristique. Aenean a pharetra sapien. Vivamus sagittis tellus ut risus finibus, ac aliquam metus volutpat. Morbi eleifend semper justo vitae rhoncus. Aliquam cursus dui sed tellus sagittis, vel ultrices 
      erat ultrices. </div> 
  </div> 
  <div class="table-cell col-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend, sem quis viverra iaculis, elit ipsum pellentesque nunc, id sollicitudin ex dolor ac quam. Nullam sed mi eget massa viverra pellentesque. Mauris at urna sed dolor tempor mollis 
    mattis in nunc. Aenean ultrices congue sapien et sollicitudin. Vivamus rhoncus, urna volutpat luctus pretium, diam metus tristique nunc, ac sagittis urna elit eget purus. Mauris dapibus, dui id vulputate finibus, nibh ipsum viverra elit, vel pharetra 
    orci est id ligula. Quisque cursus tincidunt tristique. Aenean a pharetra sapien. Vivamus sagittis tellus ut risus finibus, ac aliquam metus volutpat. Morbi eleifend semper justo vitae rhoncus. Aliquam cursus dui sed tellus sagittis, vel ultrices 
    erat ultrices.</div> 
  <div class="table-cell col-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend, sem quis viverra iaculis, elit ipsum pellentesque nunc, id sollicitudin ex dolor ac quam. Nullam sed mi eget massa viverra pellentesque. Mauris at urna sed dolor tempor mollis 
    mattis in nunc. Aenean ultrices congue sapien et sollicitudin. Vivamus rhoncus, urna volutpat luctus pretium, diam metus tristique nunc, ac sagittis urna elit eget purus. Mauris dapibus, dui id vulputate finibus, nibh ipsum viverra elit, vel pharetra 
    orci est id ligula. Quisque cursus tincidunt tristique. Aenean a pharetra sapien. Vivamus sagittis tellus ut risus finibus, ac aliquam metus volutpat. Morbi eleifend semper justo vitae rhoncus. Aliquam cursus dui sed tellus sagittis, vel ultrices 
    erat ultrices.</div> 
</div>

Answer 2

Все оказалось намного проще, чем я думал. Нужно задать нужным ячейкам первой колонки display: block и высоту. http://joxi.ru/DrlzjyeCaz8j2P

READ ALSO
Добавить картинку в pdf файл

Добавить картинку в pdf файл

Здравствуйте, хочу добавить картинку в pdf файл

311
C# Кастомный роутинг в WebApi

C# Кастомный роутинг в WebApi

Здравствуйте,как сделать роутинг с параметром типа T (class)?

225
Не удается загрузить один или более запрошенных типов. Обратитесь к свойству LoaderExceptions

Не удается загрузить один или более запрошенных типов. Обратитесь к свойству LoaderExceptions

Всем доброго времени сутокПишу плагин(dll) для запуска в планировщике задач

449