CODEWITHSUNDEEP
htmlcss
Danny
Danny

Reputation: 117

HTML Table Scrollable with Columns

I am creating a table in html and it needs to be scrollable. So I changed the display to block and made overflow-y scroll. When I do this it makes the columns header not spaced out so there is a lot of excess space. I know the display block setting is what causes this, but I need to make it scrollable. how do I set this in css and html?

table {
  margin-bottom: 40px;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  height: 250px !important;
  overflow-y: scroll;
  display: block;
}

  <table>
    <thead>
      <tr class="rowTable header">
        <th class="cell">Date Submitted</th>
        <th class="cell">Bounty Name</th>
        <th class="cell">Company</th>
        <th class="cell">Paid</th>
        <th class="cell">Details</th>
        <th class="cell">Response</th>
      </tr>
    </thead>
    <tbody>
      {% for report in recentReports %}
      <tr class="rowTable">
        <td class="cell">{{report.date}}</td>
        <td class="cell"><a href="/_hunter/bounty/{{report.bountyID}}">{{report.name}}</td>
        <td class="cell"><a href="/_hunter/company/{{report.accountID}}">{{report.company}}</a></td>
        <td class="cell">{{report.amountPaid}}</td>
        <td class="cell">
          <button type="button" class="detailsButton" data-toggle="modal" 
          data-target="#detailsModal" data-whatever="@getbootstrap" 
          data-ID={{report.reportID}}>
            View
          </button>
        </td>
        <td class="cell">
          <button type="button" class="messageButton" data-toggle="modal" 
            data-target="#messageModal" data-whatever="@getbootstrap" 
            data-ID={{report.reportID}}>
            View
          </button>
        </td>
      </tr> 
      {% endfor %}
    </tbody>
  </table>

Here is a photo of what happens. I think its clear to see that what i want is the columns take take up the entire table evenly. The image is of just the table, not the entire webpage.

enter image description here

Upvotes: 0

Views: 155

Answers (2)

Franco
Franco

Reputation: 2329

You need to do what @Johannes suggests:

<div id="wrapper">
  <!-- put your table here-->
</div>

Change your Css to:

#wrapper {
  margin-bottom: 40px;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  height: 250px !important;
  overflow-y: scroll;
  display: block;
}
table{
  width:100%
}

And you are done. If you find this answer useful, please up vote @Johannes answer. And if you feel Happy up vote mine to.

See example:

https://jsfiddle.net/ex239ck6/

Upvotes: 2

Johannes
Johannes

Reputation: 67738

put the table in a DIV that has the settings your table has now (i.e. height and overflow), and let the table be a table...

Upvotes: 1

Related Questions