CSS Responsive Table

Guest · Post by **Guest** » Fri Oct 27, 2023 8:23 am

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:

First Name
Last Name
Points
Points
Points
Points
Points
Points
Points
Points
Points
Points
Points
Points

Jill
Smith
50
50
50
50
50
50
50
50
50
50
50
50

Eve
Jackson
94
94
94
94
94
94
94
94
94
94
94
94

Adam
Johnson
67
67
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

<div style="overflow-x:auto;"><table>
... table content ...</table>
</div>

Try it Yourself »

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

More Examples
Make a fancy table
This example demonstrates how to create a fancy table.
Set the position of the table caption
This example demonstrates how to position the table caption.

Test Yourself With Exercises

Exercise:
Set the border to "2px solid green" for table, th and td elements.

<style>
{
: 2px solid green;
}
</style>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>

Submit Answer »
Start the Exercise

CSS Table Properties

Property
Description

border
Sets all the border properties in one declaration

border-collapse
Specifies whether or not table borders should be collapsed

border-spacing
Specifies the distance between the borders of adjacent cells

caption-side
Specifies the placement of a table caption

empty-cells
Specifies whether or not to display borders and background on empty cells in a table

table-layout
Sets the layout algorithm to be used for a table

★
+1

Reference: https://www.w3schools.com/css/css_table_responsive.asp