Create a striped, hover and responsive table

Description: Make a table of three students with striped rows and a hover effect, which scrolls sideways on small screens.

Hint:

• Use table table-striped table-hover and wrap it in table-responsive.

---

Solution

<div class="table-responsive">
  <table class="table table-striped table-hover">
    <thead class="table-dark"><tr><th>#</th><th>Name</th><th>City</th><th>Marks</th></tr></thead>
    <tbody>
      <tr><td>1</td><td>Anita</td><td>Delhi</td><td>88</td></tr>
      <tr><td>2</td><td>Ravi</td><td>Pune</td><td>92</td></tr>
      <tr><td>3</td><td>Maya</td><td>Kolkata</td><td>79</td></tr>
    </tbody>
  </table>
</div>

How it works

• table-striped colors every second row, table-hover highlights the row under the mouse.
• table-responsive adds a horizontal scroll when the table is wider than the screen.

Read Tables.

• Previous Exercise
• Next Exercise

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.