CODEWITHSUNDEEP
phphtmlcss
Lisa234
Lisa234

Reputation: 69

Adding a scroll bar vertically to a table

I want to add a scroll bar vertically to my html dynamic table. I have put my table inside a div, but it doesn't seem to be working. please help

this is my html code

<thead>
    <tr> 
        <td colspan="5">
            <div class="scrollit">
              <th><span>ID</span></th> 
              <th><span>Name</span></th>
              <th><span>Location</span></th>
              <th><span>Date</span></th>
              <th><span>Catagory</span></th>
           </div>
        </td>
    </tr>
</thead>

php code

  print "<tr>"; 
  print "<td>";
  print "<div>";
  print "<td >" . $row['ID'] . "</td>"; 
  print "<td >" . $row['Name'] . "</td>"; 
  print "<td >" . $row['Location'] . "</td>"; 
  print "<th >" . $row['Date'] . "</th>";
  print "<td >" . $row['Category'] . "</td>";    
  print "</div>";
  print "</td>";
  print "</tr>"; 
  }               
  print "</table>";

css code:

.scrollit {
  overflow:scroll;
  height:100px;
}

By the way, I retrieve data from the database to the table.

Upvotes: 0

Views: 496

Answers (2)

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26278

Try it something like this:

.tbl_container{
  height: 50px;
  overflow-y: scroll;
}
<div class="tbl_container">
  <table border="1">
    <tr>
      <td>row1 col1</td>
      <td>row1 col2</td>
    </tr>
    <tr>
      <td>row2 col1</td>
      <td>row2 col2</td>
    </tr>
    <tr>
      <td>row3 col1</td>
      <td>row3 col2</td>
    </tr>
  </table>
</div>

Upvotes: 0

Super User
Super User

Reputation: 9642

You have some syntax error in your HTML code, Check updated snippet below

.scrollit {
    width:100%;
    overflow:scroll;
    height:300px;
    display: block;
}
<div class="scrollit">
    <table width="100%">
        <thead>
            <tr>
                <th><span>ID</span></th>
                <th><span>Name</span></th>
                <th><span>Location</span></th>
                <th><span>Date</span></th>
                <th><span>Catagory</span></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
        </tbody>
    </table>
</div>

Upvotes: 1

Related Questions