CODEWITHSUNDEEP
htmlcssvue.jsweb
someone_that_needHelp
someone_that_needHelp

Reputation: 155

Table TD Scroll able with max height

I want to make a responsive table using a bootstrap. I want that if the text in the table cell is too long and the word wrap made the table cell height more than certain amount of pixel like 300px, the cell can be scrolled to view the rest of the text.enter image description here

Upvotes: 0

Views: 369

Answers (1)

skobaljic
skobaljic

Reputation: 9614

The cell itself cannot have scroll-bars, but you can do it this way:

table {
    width: 300px;
}
table td {
    padding: 0;
    line-height: 1.2rem;
}
.maxi {
    max-height: 6rem;
    overflow-y: auto;
}
<table>
  <tbody>
    <tr>
      <td>
        <div class="maxi">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit, lacus dictum varius lobortis, lorem diam fringilla erat, in maximus tortor neque vitae libero. Fusce ac diam tortor. Phasellus elementum pellentesque metus et pharetra. Vestibulum et est non eros elementum posuere. Morbi egestas ac nunc id semper. Donec vel dapibus risus. Duis velit sapien, lacinia at risus eget, efficitur cursus dolor. </div>
      </td>
    </tr>
  </tbody>
</table>

Also on JSFiddle.

Upvotes: 2

Related Questions