CSS Responsive Tables: Designing Tables for Different Screen Sizes
Contents
CSS Responsive Tables
Learn how to create CSS responsive tables that adapt to different screen sizes and enhance user experience.
Improve readability, accessibility, and cross-browser compatibility for your tables.
To create a responsive table using CSS, you can use a combination of CSS media queries and the table layout techniques. Here’s an example of how you can achieve that:
HTML:
<div class="table-container">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<!-- Add more table rows as needed -->
</tbody>
</table>
</div>
CSS:
.table-container {
overflow-x: auto; /* Enable horizontal scrolling */
}
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed; /* Fixed layout to prevent column widths from changing */
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
/* Responsive styles */
@media (max-width: 600px) {
table {
display: block; /* Display as block to enable vertical scrolling */
overflow-x: auto;
}
th, td {
display: block; /* Display as block to enable vertical stacking */
}
/* Style the table header cells */
th {
background-color: #f2f2f2;
}
/* Add spacing between table cells */
td {
border: none;
border-bottom: 1px solid #ddd;
}
/* Add a separator between table rows */
tr:not(:last-child) {
border-bottom: 1px solid #ddd;
}
}
Explanation:
1-In the above example, the table is wrapped in a container div with the class “table-container” to enable horizontal scrolling on smaller screens.
2-The table itself has a fixed layout and collapses its borders.
3-The table cells (th and td) have padding and a bottom border.
4-Inside the media query, when the viewport width is less than or equal to 600px, the table and its cells are modified to stack vertically.
5-The table is displayed as a block and allows vertical scrolling if needed.
6-The cells are also displayed as blocks to stack on top of each other. Additional styles like background colors and separators are applied to enhance the table’s appearance on smaller screens.
You can customize the CSS code based on your specific requirements and design preferences.
Here’s the complete HTML code with the CSS code included:
<!DOCTYPE html>
<html>
<head>
<style>
.table-container {
overflow-x: auto; /* Enable horizontal scrolling */
}
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed; /* Fixed layout to prevent column widths from changing */
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
/* Responsive styles */
@media (max-width: 600px) {
table {
display: block; /* Display as block to enable vertical scrolling */
overflow-x: auto;
}
th, td {
display: block; /* Display as block to enable vertical stacking */
}
/* Style the table header cells */
th {
background-color: #f2f2f2;
}
/* Add spacing between table cells */
td {
border: none;
border-bottom: 1px solid #ddd;
}
/* Add a separator between table rows */
tr:not(:last-child) {
border-bottom: 1px solid #ddd;
}
}
</style>
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<!-- Add more table rows as needed -->
</tbody>
</table>
</div>
</body>
</html>
You can save the above code in an HTML file and open it in a web browser to see the responsive table in action. Remember to keep the CSS code within the <style> tags or link to an external CSS file for proper styling.
How to create a CSS fancy table ?
Here’s an example of a fancy table using HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<style>
/* Table styles */
.fancy-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background-color: #f9f9f9;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.fancy-table thead th {
background-color: #f2f2f2;
color: #333;
font-weight: bold;
padding: 10px;
text-align: center;
border-bottom: 2px solid #ddd;
}
.fancy-table tbody td {
background-color: #fff;
color: #666;
padding: 10px;
text-align: center;
border-bottom: 1px solid #ddd;
}
/* Responsive styles */
@media (max-width: 600px) {
.fancy-table {
border: 0;
box-shadow: none;
}
.fancy-table thead {
display: none;
}
.fancy-table tbody td {
display: block;
background-color: #f9f9f9;
color: #666;
font-weight: bold;
margin-bottom: 10px;
border-bottom: 2px solid #ddd;
}
.fancy-table tbody td:before {
content: attr(data-label);
float: left;
font-weight: normal;
text-transform: uppercase;
}
}
</style>
</head>
<body>
<table class="fancy-table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Header 1">Data 1</td>
<td data-label="Header 2">Data 2</td>
<td data-label="Header 3">Data 3</td>
</tr>
<tr>
<td data-label="Header 1">Data 4</td>
<td data-label="Header 2">Data 5</td>
<td data-label="Header 3">Data 6</td>
</tr>
<!-- Add more table rows as needed -->
</tbody>
</table>
</body>
</html>
Explanation:
1-In this example, we create a fancy table using CSS styles.
2-The table has a modern and visually appealing design.
3-The header cells (<th>) have a different background color and a slightly larger bottom border compared to the regular cells (<td>).
4-The table has a subtle box shadow to give it a raised appearance.
5-For responsiveness, when the viewport width is less than or equal to 600px, the table adapts to a mobile-friendly layout.
6-The header row is hidden (display: none;) to save space, and the regular cells are stacked vertically.
7-Each cell displays its respective column header using the data-label attribute and CSS pseudo-elements (:before) to show the label text.
You can customize the styles and content as per your requirements to create your own fancy table.
How to position the table caption?
To position the table caption, you can use CSS to control its placement. Here’s an example of complete HTML code where the table caption is positioned at the top of the table:
<!DOCTYPE html>
<html>
<head>
<style>
/* Table styles */
.fancy-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background-color: #f9f9f9;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.fancy-table thead th {
background-color: #f2f2f2;
color: #333;
font-weight: bold;
padding: 10px;
text-align: center;
border-bottom: 2px solid #ddd;
}
.fancy-table tbody td {
background-color: #fff;
color: #666;
padding: 10px;
text-align: center;
border-bottom: 1px solid #ddd;
}
/* Caption styles */
.fancy-table-caption {
text-align: center;
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
</style>
</head>
<body>
<table class="fancy-table">
<caption class="fancy-table-caption">Fancy Table</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<!-- Add more table rows as needed -->
</tbody>
</table>
</body>
</html>
Explanation:
1-In the above code, the table caption is added using the <caption> element inside the <table> element.
2-The caption is given a class name of “fancy-table-caption” for styling purposes.
3-The CSS code includes the caption styles, where text-align: center; centers the caption horizontally, font-size: 18px; sets the font size to 18 pixels, font-weight: bold; makes the caption bold, and margin-bottom: 10px; adds some bottom margin to separate the caption from the table.
You can modify the caption styles according to your preference by adjusting the CSS properties within the .fancy-table-caption selector.
Remember to save the HTML code in an HTML file and open it in a web browser to see the table with the positioned caption.
Uses of CSS Responsive Table:Applications
CSS responsive tables have several uses and benefits.
Here are some common use cases:
How to create Mobile-friendly layouts for a table using CSS media queries?
Mobile-friendly layouts:
Responsive tables are particularly useful for displaying tabular data on mobile devices where screen space is limited. By adapting the table layout to smaller screens, responsive tables ensure that the content remains readable and accessible.
Here’s an example of complete HTML code that demonstrates a mobile-friendly layout for a table using CSS media queries:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
/* Responsive styles */
@media (max-width: 600px) {
table {
display: block;
overflow-x: auto;
}
th, td {
display: block;
text-align: center;
border: none;
}
td:before {
content: attr(data-label);
font-weight: bold;
text-transform: uppercase;
}
td:last-child:before {
content: none;
}
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Header 1">Data 1</td>
<td data-label="Header 2">Data 2</td>
<td data-label="Header 3">Data 3</td>
</tr>
<tr>
<td data-label="Header 1">Data 4</td>
<td data-label="Header 2">Data 5</td>
<td data-label="Header 3">Data 6</td>
</tr>
<!-- Add more table rows as needed -->
</tbody>
</table>
</body>
</html>
Explanation:
1-In the above code, we have a simple table with three columns (Header 1, Header 2, and Header 3) and two rows of data.
2-The CSS styles define the table’s default layout, with column headers (th) and data cells (td) having specific padding, alignment, and border styles.
3-Inside the media query, when the viewport width is less than or equal to 600px (typically for mobile devices), the table adapts to a mobile-friendly layout.
4-The table is displayed as a block with horizontal scrolling enabled.
5-The cells are displayed as blocks, centered, and with borders removed.
6-The data-label attribute is used to add column labels to each cell using CSS pseudo-elements (:before).
7-The last column label is hidden to avoid redundancy.
This code allows the table to transform into a mobile-friendly layout where the columns stack vertically and each cell displays its respective column label for better readability on smaller screens.
Save the code in an HTML file and open it in a web browser to see the mobile-friendly table layout in action.
How to create a table layout designed for improved readability by CSS ?
Improved readability:
Responsive tables help improve the readability of tabular data by adjusting the layout, font sizes, and spacing. They prevent data from being squished or hidden, making it easier for users to understand and interpret the information.Here’s an example of complete HTML code that demonstrates a table layout designed for improved readability:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
font-family: Arial, sans-serif;
}
th, td {
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
font-weight: bold;
color: #333;
}
td {
background-color: #fff;
color: #666;
border-bottom: 1px solid #ddd;
}
/* Responsive styles */
@media (max-width: 600px) {
th, td {
display: block;
}
th {
text-align: center;
}
td:before {
content: attr(data-label);
font-weight: bold;
text-transform: uppercase;
display: block;
margin-bottom: 5px;
}
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Header 1">Data 1</td>
<td data-label="Header 2">Data 2</td>
<td data-label="Header 3">Data 3</td>
</tr>
<tr>
<td data-label="Header 1">Data 4</td>
<td data-label="Header 2">Data 5</td>
<td data-label="Header 3">Data 6</td>
</tr>
<!-- Add more table rows as needed -->
</tbody>
</table>
</body>
</html>
Explanation:
1-In the above code, we have a simple table with three columns (Header 1, Header 2, and Header 3) and two rows of data.
2-The CSS styles define the table’s layout with appropriate padding, alignment, font styles, and colors.
3-Inside the media query, when the viewport width is less than or equal to 600px (typically for mobile devices), the table adapts to a mobile-friendly layout for improved readability.
4-The cells are displayed as blocks, and each cell includes its respective column label using the data-label attribute and CSS pseudo-elements (:before). 5-The labels are displayed above the data and have additional margin to separate them.
This code ensures that the table is more readable on smaller screens by presenting the data in a vertical layout with clear column labels.
Save the code in an HTML file and open it in a web browser to see the improved readability table layout in action.
How to create a table layout designed for an enhanced user experience by CSS ?
Enhanced user experience:
By optimizing tables for different screen sizes, responsive tables provide a better user experience across various devices. Users can scroll or swipe through the table content without horizontal overflow or having to zoom in and out.
Here’s an example of complete HTML code that demonstrates a table layout designed for an enhanced user experience:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
font-family: Arial, sans-serif;
}
th, td {
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
font-weight: bold;
color: #333;
position: sticky;
top: 0;
}
td {
background-color: #fff;
color: #666;
border-bottom: 1px solid #ddd;
}
/* Responsive styles */
@media (max-width: 600px) {
table {
display: block;
overflow-x: auto;
}
th, td {
display: block;
text-align: center;
border: none;
width: auto;
}
th {
position: static;
}
td:before {
content: attr(data-label);
font-weight: bold;
text-transform: uppercase;
display: block;
margin-bottom: 5px;
}
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Header 1">Data 1</td>
<td data-label="Header 2">Data 2</td>
<td data-label="Header 3">Data 3</td>
</tr>
<tr>
<td data-label="Header 1">Data 4</td>
<td data-label="Header 2">Data 5</td>
<td data-label="Header 3">Data 6</td>
</tr>
<!-- Add more table rows as needed -->
</tbody>
</table>
</body>
</html>
Explanation:
1-In the above code, we have a simple table with three columns (Header 1, Header 2, and Header 3) and two rows of data.
2-The CSS styles define the table’s layout with appropriate padding, alignment, font styles, colors, and a sticky header to enhance the user experience.
3-Inside the media query, when the viewport width is less than or equal to 600px (typically for mobile devices), the table adapts to a mobile-friendly layout.
4-The table is displayed as a block with horizontal scrolling enabled.
5-The cells are displayed as blocks, centered, and have borders removed.
6-Each cell includes its respective column label using the data-label attribute and CSS pseudo-elements (:before).
7-The sticky header ensures that the column headers remain visible while scrolling.
This code provides an enhanced user experience by making the table content easily accessible, scrollable, and readable on smaller screens.
Save the code in an HTML file and open it in a web browser to see the enhanced user experience table layout in action.
How to create a table layout designed for accessibility ?
Accessibility:
Responsive tables play a vital role in making tabular data accessible to users with disabilities. By adapting the layout to different screen sizes, it ensures that visually impaired users using screen readers or magnification tools can access and navigate the table content effectively.
Here’s an example of complete HTML code that demonstrates a table layout designed for accessibility:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
font-family: Arial, sans-serif;
}
th, td {
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
font-weight: bold;
color: #333;
}
td {
background-color: #fff;
color: #666;
border-bottom: 1px solid #ddd;
}
/* Responsive styles */
@media (max-width: 600px) {
th, td {
display: block;
}
td:before {
content: attr(data-label);
font-weight: bold;
text-transform: uppercase;
display: block;
margin-bottom: 5px;
}
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Header 1">Data 1</td>
<td data-label="Header 2">Data 2</td>
<td data-label="Header 3">Data 3</td>
</tr>
<tr>
<td data-label="Header 1">Data 4</td>
<td data-label="Header 2">Data 5</td>
<td data-label="Header 3">Data 6</td>
</tr>
<!-- Add more table rows as needed -->
</tbody>
</table>
</body>
</html>
Explanation:
1-In the above code, we have a simple table with three columns (Header 1, Header 2, and Header 3) and two rows of data.
2-The CSS styles define the table’s layout with appropriate padding, alignment, font styles, and colors.
3-Inside the media query, when the viewport width is less than or equal to 600px (typically for mobile devices), the table adapts to a mobile-friendly layout for better accessibility.
4-The cells are displayed as blocks, and each cell includes its respective column label using the data-label attribute and CSS pseudo-elements (:before). 5-The labels are displayed above the data to provide a clear association between the headers and the data cells.
This code ensures that the table is accessible by providing appropriate labels for the data cells, which can be read by screen readers or other assistive technologies. It also ensures that the table content remains readable and understandable on smaller screens.
Save the code in an HTML file and open it in a web browser to see the accessible table layout in action.
How to create a table layout designed for multi-device compatibility?
Multi-device compatibility:
Responsive tables ensure that tabular data is well-presented and usable on a wide range of devices, including desktops, laptops, tablets, and smartphones. They eliminate the need for horizontal scrolling or zooming, making the table content easily accessible and legible.
Here’s an example of complete HTML code that demonstrates a table layout designed for multi-device compatibility:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
font-family: Arial, sans-serif;
}
th, td {
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
font-weight: bold;
color: #333;
}
td {
background-color: #fff;
color: #666;
border-bottom: 1px solid #ddd;
}
/* Responsive styles */
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
text-align: center;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
border: 1px solid #ccc;
}
td {
border: none;
border-bottom: 1px solid #ddd;
position: relative;
padding-left: 50%;
}
td:before {
position: absolute;
content: attr(data-label);
font-weight: bold;
text-transform: uppercase;
left: 6px;
top: 50%;
transform: translateY(-50%);
}
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Header 1">Data 1</td>
<td data-label="Header 2">Data 2</td>
<td data-label="Header 3">Data 3</td>
</tr>
<tr>
<td data-label="Header 1">Data 4</td>
<td data-label="Header 2">Data 5</td>
<td data-label="Header 3">Data 6</td>
</tr>
<!-- Add more table rows as needed -->
</tbody>
</table>
</body>
</html>
Explanation:
1-In the above code, we have a simple table with three columns (Header 1, Header 2, and Header 3) and two rows of data.
2-The CSS styles define the table’s layout with appropriate padding, alignment, font styles, and colors.
3-Inside the media query, when the viewport width is less than or equal to 600px (typically for mobile devices), the table adapts to a mobile-friendly layout for better multi-device compatibility.
4-The table and its elements (thead, tbody, th, td, tr) are set to display: block; to stack them vertically.
5-The column headers (th) are hidden using absolute positioning.
6-The data cells (td) are positioned relatively and display their respective column labels using the data-label attribute and CSS pseudo-elements (:before).
This code ensures that the table is compatible with various devices by providing a vertical layout that works well on smaller screens. It ensures that the table content remains accessible and readable across different devices.
Save the code in an HTML file and open it in a web browser to see the multi-device compatible table layout in action.
How to create table layout designed for cross-browser compatibility by CSS?
Cross-browser compatibility:
Responsive table techniques based on CSS and media queries are supported by modern web browsers, ensuring consistent rendering across different platforms. They provide a reliable and consistent display of tabular data across various browsers and operating systems.
Here’s an example of complete HTML code that demonstrates a table layout designed for cross-browser compatibility:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
font-family: Arial, sans-serif;
}
th, td {
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
font-weight: bold;
color: #333;
}
td {
background-color: #fff;
color: #666;
border-bottom: 1px solid #ddd;
}
/* Responsive styles */
@media only screen and (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
text-align: center;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
border: 1px solid #ccc;
}
td {
border: none;
border-bottom: 1px solid #ddd;
position: relative;
padding-left: 50%;
}
td:before {
position: absolute;
content: attr(data-label);
font-weight: bold;
text-transform: uppercase;
left: 6px;
top: 50%;
transform: translateY(-50%);
}
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Header 1">Data 1</td>
<td data-label="Header 2">Data 2</td>
<td data-label="Header 3">Data 3</td>
</tr>
<tr>
<td data-label="Header 1">Data 4</td>
<td data-label="Header 2">Data 5</td>
<td data-label="Header 3">Data 6</td>
</tr>
<!-- Add more table rows as needed -->
</tbody>
</table>
</body>
</html>
Explanation:
1-In the above code, we have a simple table with three columns (Header 1, Header 2, and Header 3) and two rows of data.
2-The CSS styles define the table’s layout with appropriate padding, alignment, font styles, and colors.
3-Inside the media query, the code uses the only screen declaration along with max-width: 600px to target screens with a maximum width of 600 pixels.
4-This helps ensure cross-browser compatibility for various devices and browsers.
5-Within the media query, the table and its elements (thead, tbody, th, td, tr) are set to display: block; to stack them vertically.
6-The column headers (th) are hidden using absolute positioning.
7-The data cells (td) are positioned relatively and display their respective column labels using the data-label attribute and CSS pseudo-elements (:before).
This code ensures that the table layout is compatible with different browsers and devices by providing a vertical layout that works well on smaller screens.
Save the code in an HTML file and open it in a web browser to see the cross-browser compatible table layout in action.
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
font-family: Arial, sans-serif;
}
th, td {
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
font-weight: bold;
color: #333;
}
td {
background-color: #fff;
color: #666;
border-bottom: 1px solid #ddd;
}
/* Responsive styles */
@media only screen and (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
text-align: center;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
border: 1px solid #ccc;
}
td {
border: none;
border-bottom: 1px solid #ddd;
position: relative;
padding-left: 50%;
}
td:before {
position: absolute;
content: attr(data-label);
font-weight: bold;
text-transform: uppercase;
left: 6px;
top: 50%;
transform: translateY(-50%);
}
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Header 1">Data 1</td>
<td data-label="Header 2">Data 2</td>
<td data-label="Header 3">Data 3</td>
</tr>
<tr>
<td data-label="Header 1">Data 4</td>
<td data-label="Header 2">Data 5</td>
<td data-label="Header 3">Data 6</td>
</tr>
<!-- Add more table rows as needed -->
</tbody>
</table>
</body>
</html>
Overall, CSS responsive tables offer a flexible and adaptable solution for presenting tabular data in a user-friendly and accessible manner across different devices. They contribute to a better user experience, improved readability, and wider compatibility, making them an essential tool for web developers and designers.
How to create a responsive table for an e-commerce product listing by CSS?
To provide a complete HTML code example, I’ll create a responsive table for an e-commerce product listing.
Here’s an example of the complete HTML code:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
/* Responsive styles */
@media (max-width: 600px) {
table {
display: block;
overflow-x: auto;
}
th, td {
display: block;
text-align: center;
border: none;
}
td:before {
content: attr(data-label);
font-weight: bold;
text-transform: uppercase;
}
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Product Name</th>
<th>Description</th>
<th>Price</th>
<th>Availability</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Product Name">Product 1</td>
<td data-label="Description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td data-label="Price">$99.99</td>
<td data-label="Availability">In Stock</td>
</tr>
<tr>
<td data-label="Product Name">Product 2</td>
<td data-label="Description">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td data-label="Price">$49.99</td>
<td data-label="Availability">Out of Stock</td>
</tr>
<!-- Add more table rows for additional products -->
</tbody>
</table>
</body>
</html>
Explanation:
1-In the above code, we create a responsive table for an e-commerce product listing.
2-The table consists of four columns: Product Name, Description, Price, and Availability.
3-Each row represents a product with relevant information.
4-The CSS styles define the table’s layout, including padding, alignment, and borders.
5-Inside the media query, when the viewport width is less than or equal to 600px, the table adapts to a mobile-friendly layout.
6-The cells are displayed as blocks, centered, and each cell includes its respective column label using the data-label attribute and CSS pseudo-elements (:before).
This code provides a complete HTML example of a responsive table for an e-commerce product listing. It ensures that the table is well-organized and readable on different screen sizes.
Save the code in an HTML file and open it in a web browser to see the responsive table layout in action.
Quiz with answers
1-What is the purpose of CSS responsive tables?
a) To create visually appealing tables
b) To improve the performance of web pages
c) To make tables adapt to different screen sizes and devices
d) To add animations to table elements
Answer: c) To make tables adapt to different screen sizes and devices
2-Which CSS property is commonly used to control the layout and spacing of a table?
a) border-collapse
b) text-align
c) font-weight
d) background-color
Answer: a) border-collapse
3-In a responsive table, how can you display column labels on smaller screens?
a) By using the <label> element
b) By adding a separate row for column labels
c) By using the data-label attribute and CSS pseudo-elements
d) By applying a special class to the column labels
Answer: c) By using the data-label attribute and CSS pseudo-elements
4-What is the purpose of the @media rule in CSS responsive tables?
a) To specify media types, such as print or screen
b) To define custom media queries for specific devices
c) To apply different styles based on the device’s screen size or capabilities
d) To include external media, such as images or videos, in the table
Answer: c) To apply different styles based on the device’s screen size or capabilities
5-Why is accessibility important in responsive tables?
a) It improves the performance of the tables
b) It ensures the tables look visually appealing on different devices
c) It allows users with disabilities to access and navigate the table content effectively
d) It makes the tables load faster on mobile devices
Answer: c) It allows users with disabilities to access and navigate the table content effectively
6-What is the purpose of the overflow-x property in CSS responsive tables?
a) To control the horizontal scrolling behavior of the table
b) To adjust the font size of the table content
c) To add shadows to the table elements
d) To apply a background color to the table
Answer: a) To control the horizontal scrolling behavior of the table
7-What is the purpose of the position: sticky property applied to table headers in CSS responsive tables?
a) To make the headers scroll along with the table content
b) To hide the headers on smaller screens
c) To add a fixed position to the headers
d) To change the font weight of the headers
Answer: a) To make the headers scroll along with the table content
8-How can CSS media queries be used to target specific screen sizes in responsive tables?
a) By specifying the screen size directly in the media query
b) By using predefined media query keywords like small, medium, or large
c) By detecting the device’s screen resolution automatically
d) By defining custom breakpoints based on the desired screen sizes
Answer: d) By defining custom breakpoints based on the desired screen sizes
9-What is the purpose of the display: block property applied to table cells in CSS responsive tables?
a) To change the cell background color
b) To remove the borders from the cells
c) To make the cells stack vertically on smaller screens
d) To change the font color of the cells
Answer: c) To make the cells stack vertically on smaller screens
10-How can CSS responsive tables contribute to a better user experience?
a) By adding animations and transitions to the table elements
b) By making the table content accessible to users with disabilities
c) By improving the performance of the table rendering
d) By automatically resizing images within the table cells
Answer: b) By making the table content accessible to users with disabilities
11-Which CSS property is commonly used to control the spacing between table cells?
a) padding
b) margin
c) spacing
d) border-spacing
Answer: d) border-spacing
12-How can you make a table caption stand out visually?
a) By applying a different font family to the caption
b) By using a larger font size for the caption
c) By adding a background color to the caption
d) By applying a text-shadow effect to the caption
Answer: c) By adding a background color to the caption
13-What is the purpose of the box-shadow property in CSS responsive tables?
a) To create a shadow effect around the table
b) To change the border style of the table
c) To add a background image to the table
d) To apply rounded corners to the table cells
Answer: a) To create a shadow effect around the table
14-How can you ensure that the table caption is aligned to the center of the table?
a) By setting the text-align property of the table to “center”
b) By applying a margin property to the caption with a value of “auto”
c) By using the <center> element around the caption
d) By applying the text-align property directly to the caption element
Answer: d) By applying the text-align property directly to the caption element
15-What is the purpose of the font-weight: bold property applied to table headers in CSS responsive tables?
a) To make the headers more visible
b) To increase the font size of the headers
c) To apply a specific font family to the headers
d) To highlight the headers as important content within the table
Answer: d) To highlight the headers as important content within the table
16-What is the purpose of the display: block property applied to the table in CSS responsive tables?
a) To remove the table borders
b) To make the table occupy the full width of its container
c) To add spacing between table rows
d) To center-align the table horizontally
Answer: b) To make the table occupy the full width of its container
17-How can you ensure that the table cells have equal width in CSS responsive tables?
a) By setting a fixed width for each cell
b) By using the table-layout: fixed property on the table
c) By applying the width: 100% property to each cell
d) By using the table-layout: auto property on the table
Answer: b) By using the table-layout: fixed property on the table
18-What is the purpose of the overflow-x: auto property applied to the table in CSS responsive tables?
a) To hide any overflowing content in the table
b) To allow horizontal scrolling of the table on smaller screens
c) To adjust the width of the table cells dynamically
d) To prevent the table from resizing based on the viewport width
Answer: b) To allow horizontal scrolling of the table on smaller screens
19-How can you apply different styles to even and odd rows in CSS responsive tables?
a) By using the :first-child and :last-child pseudo-classes
b) By using the :even and :odd selectors
c) By using the nth-child(even) and nth-child(odd) selectors
d) By using the :nth-of-type(even) and :nth-of-type(odd) selectors
Answer: c) By using the nth-child(even) and nth-child(odd) selectors
20-What is the purpose of the position: relative property applied to table cells in CSS responsive tables?
a) To make the cells draggable within the table
b) To position the cells absolutely within the table
c) To allow the cells to overlap with other elements on the page
d) To position pseudo-elements, such as :before or :after, within the cells
Answer: d) To position pseudo-elements, such as :before or :after, within the cells
21-What is the purpose of the text-align: center property applied to table headers and cells in CSS responsive tables?
a) To vertically center the content within the headers and cells
b) To align the content to the right side of the headers and cells
c) To align the content to the left side of the headers and cells
d) To horizontally center the content within the headers and cells
Answer: d) To horizontally center the content within the headers and cells
22-How can you specify custom breakpoints for CSS media queries in responsive tables?
a) By using predefined breakpoint values like sm, md, or lg
b) By defining custom CSS classes for different screen sizes
c) By using JavaScript to detect the device’s screen size
d) By specifying the desired screen width directly in the media query
Answer: d) By specifying the desired screen width directly in the media query
23-What is the purpose of the overflow-y: auto property applied to the table in CSS responsive tables?
a) To hide any overflowing content in the table
b) To allow vertical scrolling of the table on smaller screens
c) To adjust the height of the table dynamically
d) To prevent the table from resizing based on the viewport height
Answer: b) To allow vertical scrolling of the table on smaller screens
24-How can you add alternative background colors to table rows in CSS responsive tables?
a) By using the :nth-child(even) and :nth-child(odd) selectors
b) By using the :first-child and :last-child pseudo-classes
c) By applying different CSS classes to the rows
d) By using the :hover pseudo-class on the rows
Answer: a) By using the :nth-child(even) and :nth-child(odd) selectors
25-What is the purpose of the display: block property applied to table headers and cells in CSS responsive tables?
a) To remove any borders from the headers and cells
b) To make the headers and cells stack vertically on smaller screens
c) To change the font style of the headers and cells
d) To apply a specific background color to the headers and cells
Answer: b) To make the headers and cells stack vertically on smaller screens
References
Here are some references you can consult to learn more about CSS responsive tables:
MDN Web Docs – Responsive Web Design Basics:
W3Schools – Responsive Web Design:
CSS-Tricks – Responsive Data Tables:
A List Apart – Responsive Web Design:
CSS Tricks – A Complete Guide to Grid: