---
title: CSS Responsive Table
description: "## Responsive Table A responsive table will display 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…"
url: "https://apprentice.mn/docs/css-responsive-table-2/"
updated: "2021-05-10"
category: CSS
---

# CSS Responsive Table

## Responsive Table

A responsive table will display 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 |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| Jill | Smith | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
| Eve | Jackson | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
| Adam | Johnson | 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:

     `<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>`

## CSS Table Properties

| Property | Description |
| --- | --- |
| [border](https://www.w3schools.com/cssref/pr_border.asp) | Sets all the border properties in one declaration |
| [border-collapse](https://www.w3schools.com/cssref/pr_border-collapse.asp) | Specifies whether or not table borders should be collapsed |
| [border-spacing](https://www.w3schools.com/cssref/pr_border-spacing.asp) | Specifies the distance between the borders of adjacent cells |
| [caption-side](https://www.w3schools.com/cssref/pr_tab_caption-side.asp) | Specifies the placement of a table caption |
| [empty-cells](https://www.w3schools.com/cssref/pr_tab_empty-cells.asp) | Specifies whether or not to display borders and background on empty cells in a table |
| [table-layout](https://www.w3schools.com/cssref/pr_tab_table-layout.asp) | Sets the layout algorithm to be used for a table |

        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-responsive-table-2%2F&linkname=CSS%20Responsive%20Table](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-responsive-table-2%2F&linkname=CSS%20Responsive%20Table)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-responsive-table-2%2F&linkname=CSS%20Responsive%20Table](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-responsive-table-2%2F&linkname=CSS%20Responsive%20Table)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-responsive-table-2%2F&linkname=CSS%20Responsive%20Table](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-responsive-table-2%2F&linkname=CSS%20Responsive%20Table)[https://www.addtoany.com/share](https://www.addtoany.com/share)