CSS Responsive Table

Responsive Table

CSS Responsive Table: A responsive table will show a horizontal scroll bar if the screen is too small to display the full content:

Responsive Table

A responsive table will display a horizontal scroll bar if the screen is too small to display the full content. Resize the browser window to see the effect:

To create a responsive table, add a container element (like div) with overflow-x:auto around the table element:

First Name Last Name Points Points Points Points Points Points Points Points Points Points
Sohail Khan 50 50 50 50 50 50 50 50 50 50
Haroon Khan 94 94 94 94 94 94 94 94 94 94
Asad Khan 67 67 67 67 67 67 67 67 67 67

Add a container element (like <div>) with overflow-x:auto around the <table> element to make it responsive:

Example

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {background-color: #f2f2f2;}
</style>
</head>
<body>

<h2>Responsive Table</h2>
<p>A responsive table will display a horizontal scroll bar if the screen is too 
small to display the full content. Resize the browser window to see the effect:</p>
<p>To create a responsive table, add a container element (like div) with <strong>overflow-x:auto</strong> around the table element:</p>

<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
    <tr>
      <td>Sohail</td>
      <td>Khan</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Haroon</td>
      <td>Khan</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Asad</td>
      <td>Khan</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
    </tr>
  </table>
</div>

</body>
</html>

Note: In OS X Lion (on Mac), scrollbars are hidden by default and possibly shown when being used (even though “overflow:scroll” is set).


CSS Table Properties

PropertyDescription
borderSets all the border properties in one declaration
border-collapseSpecifies whether or not table borders should be collapsed
border-spacingSpecifies the distance between the borders of adjacent cells
caption-sideSpecifies the placement of a table caption
empty-cellsSpecifies whether or not to display borders and background on empty cells in a table
table-layoutSets the layout algorithm to be used for a table

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.


0 Comments

Leave a Reply

Avatar placeholder