CODEWITHSUNDEEP
htmlcss
D.R.
D.R.

Reputation: 21224

table in div, scroll on overflow?

I have the following HTML:

<div class="gv-left col-lg-4">
    <h2>Title</h2>
    <table class="table table-hover table-condensed">
        <thead>
            <tr><th>ID</th></tr>
        </thead>
        <tbody id="songs">
        </tbody>
    </table>
</div>

The div is a child of a Bootstrap row within a Bootstrap fluid container. The gv-left class on the div defines a fixed height for the div of height: 95vh;. The tbody is filled by a JavaScript function with content (tr / td).

I want to achieve:

If I add a fixed height to the tbody as well, and give it a style of display: block; overflow-y: auto; the scrolling works like a charm. Unfortunately, if I remove the height of the fixed table/tbody such that it fills the remaining space within the div => it outgrows the div and the tbody never becomes scrollable (instead the table just overflows the div and a page h-scrollbar is present).

Any ideas?

Upvotes: 2

Views: 2481

Answers (1)

Razia sultana
Razia sultana

Reputation: 2221

.table-wrapper {
  border: 1px solid red;
  width: 100px;
  height: 50px;
  overflow: auto;
}
table {
  border: 1px solid black;
  margin-right: 20px;
}
td {
  width: 20px;
  height: 20px;
  background-color: #ccc;
}
<div class="table-wrapper">
  <table>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
    </tr>
  </table>
</div>

Upvotes: 0

Related Questions