CSS Responsive Table

CSS Responsive Table


CSS Responsive Table - 
A table is said to be responsive when it has a scroll bar in it.
We can easily make a table responsive in the following steps - 
1. To make a table responsive firstly put the table inside a container like a <div>
2. Write Overflow-x:auto  , or Overflow-y:auto
Now we will see Example - 
Example - 

<!DOCTYPE html>
<html lang="en">
<style>
table {
  width: 100%;
  border: 1px solid black;
}

th, td {
  text-align: center;
  padding: 9px;
}

</style>


<head>
    <link rel="stylesheet" href="sample.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia|Audiowide|Trirong">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>


    <title>Document</title>
</head>
<body>
    <html>

  <head>
      <title>HTML Tables</title>
  </head>
 
  <body>
      <div style="overflow-y: auto;">
      <table>
        <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
            <td>Row 1, Column 2</td>
            <td>Row 1, Column 2</td>
            <td>Row 1, Column 2</td>
        </tr>
       
        <tr>
            <td>item 1</td>
            <td>item 2</td>
            <td>item 2</td>
            <td>item 2</td>
            <td>item 2</td>
        </tr>
        <tr>
            <td>Row 3, Column 1</td>
            <td>Row 3, Column 2</td>
            <td>Row 3, Column 2</td>
            <td>Row 3, Column 2</td>
            <td>Row 3, Column 2</td>
        </tr>
   
        <tr>
            <td>Row 4, Column 1</td>
            <td>Row 4, Column 2</td>
            <td>Row 4, Column 2</td>
            <td>Row 4, Column 2</td>
            <td>Row 4, Column 2</td>
        </tr>
   
        <tr>
            <td>Row 5, Column 1</td>
            <td>Row 5, Column 2</td>
            <td>Row 5, Column 2</td>
            <td>Row 5, Column 2</td>
            <td>Row 5, Column 2</td>
        </tr>
   
        <tr>
            <td>Row 6, Column 1</td>
            <td>Row 6, Column 2</td>
            <td>Row 6, Column 2</td>
            <td>Row 6, Column 2</td>
            <td>Row 6, Column 2</td>
        </tr>
        </table>
      </div>
  </body>
</html>
     
</body>

</html>

Output -