When working with tabular data on a website, it's important to ensure that the table remains usable and readable on different screen sizes. Responsive tables are designed to adapt to smaller screens while still providing a good user experience.

One common strategy for displaying tabular data in a responsive manner is to use media queries to modify the table layout based on the available screen space.

Here's an example of how we can make a table responsive using CSS and media queries:

1// Let's assume we have the following HTML structure for our table
2<div class="table-responsive">
3  <table>
4    <thead>
5      <tr>
6        <th>First Name</th>
7        <th>Last Name</th>
8        <th>Email</th>
9      </tr>
10    </thead>
11    <tbody>
12      <tr>
13        <td>John</td>
14        <td>Doe</td>
15        <td>john.doe@example.com</td>
16      </tr>
17      <tr>
18        <td>Jane</td>
19        <td>Smith</td>
20        <td>jane.smith@example.com</td>
21      </tr>
22    </tbody>
23  </table>
24</div>
25
26// CSS code for making the table responsive
27.table-responsive {
28  overflow-x: auto;
29  max-width: 100%;
30}
31
32.table {
33  width: 100%;
34  border-collapse: collapse;
35}
36
37.table th,
38.table td {
39  padding: 8px;
40  text-align: left;
41  border-bottom: 1px solid #ddd;
42}
43
44// Media query for handling the table on smaller screens
45@media (max-width: 600px) {
46  .table th,
47  .table td {
48    display: block;
49  }
50
51  .table td::before {
52    content: attr(data-label);
53    font-weight: bold;
54    display: inline-block;
55    width: 120px;
56  }
57
58  .table tr:nth-child(even) {
59    background-color: #f2f2f2;
60  }
61}

In this example, we wrap the table within a div with the class table-responsive. This div has the CSS property overflow-x: auto; to enable horizontal scrolling when the table exceeds the available width.

The table itself has the class table and the CSS property width: 100%; to make it fill its parent container. The table headers (th) and table data cells (td) have padding and a bottom border for better readability.

Then, we define a media query using the @media rule to apply styles on screens with a maximum width of 600 pixels. In this media query, we modify the display of table headers and cells to block, which stacks them vertically. We also add a data-label attribute to each cell to hold the original column label. We use the ::before pseudo-element to display the column label before each cell value. Finally, we apply alternating background colors to table rows using the n:nth-child(even) selector.

This approach allows users to scroll horizontally to view the complete table on small screens and maintains the readability of the table by displaying the column labels alongside the cell values.

Feel free to experiment with different CSS styles and media queries to create responsive tables that suit your needs and the specific constraints of your website.

xxxxxxxxxx

}

// Let's assume we have the following HTML structure for our table

<div class="table-responsive">

  <table>

    <thead>

      <tr>

        <th>First Name</th>

        <th>Last Name</th>

        <th>Email</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>John</td>

        <td>Doe</td>

        <td>john.doe@example.com</td>

      </tr>

      <tr>

        <td>Jane</td>

        <td>Smith</td>

        <td>jane.smith@example.com</td>

      </tr>

    </tbody>

  </table>

</div>

​

// CSS code for making the table responsive

.table-responsive {

  overflow-x: auto;

  max-width: 100%;