Page 1 of 1

CSS Responsive Table

Posted: Fri Oct 27, 2023 8:23 am
by Guest
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