Languages
[Edit]
EN

HTML - add horizontal scroll to table

7 points
Created by:
Marley-Marks
292

In this short article, we would like to show how to add a horizontal scroll bar to the table using CSS.

The solution wraps table element with div element using that has added overflow-x style.

Quick solution:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    table {
      border-collapse: collapse; 
    }

    table, td, th {
      border: 1px solid black;
    }

  </style>
</head>
<body>

  <div style="overflow-x: scroll; width: 400px;">
    <table style="width: 600px;">
      <thead>
        <tr>
          <th>Problem</th>
          <th>JavaScript</th>
          <th>Java</th>
          <th>Python</th>
          <th>PHP</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>some problem title 1</td>
          <td>todo</td>
          <td>todo</td>
          <td>todo</td>
          <td>todo</td>
        </tr>
        <tr>
          <td>some problem title 2</td>
          <td>todo</td>
          <td>todo</td>
          <td>todo</td>
          <td>todo</td>
        </tr>
      </tbody>
    </table>
  </div>

</body>
</html>

HTML table

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join