Responsive tables can be implemented in three ways: first, use media query to adjust the layout, change the table structure to vertical display and label the data type with data-label. Secondly, horizontal scrolling is achieved through overflow-x. Suitable for the situation where there is a lot of content without re-arrangement. Finally, combine front-end frameworks such as Bootstrap's .table-responsive class to simplify development and have good compatibility. Select the appropriate method according to project needs.

Responsive forms are important in modern web design, especially when viewed on mobile devices. Traditional tables can become difficult to read on small screens, so some CSS tricks are needed to adapt them to different screen sizes.

Adjust table layout using media queries

A common approach is to use media queries to apply different styles based on the screen width. For example, you can change the layout of a table from horizontal to vertical:

 table {
  width: 100%;
  border-collapse: collapse;
}

@media (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }

  th {
    display: none;
  }

  tr {
    margin-bottom: 1rem;
  }

  td {
    position: relative;
    padding-left: 50%;
  }

  td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    padding: 0.5rem;
    font-weight: bold;
  }
}

This way, on the small screen, each cell will be displayed as a block-level element and the data type is marked by data-label attribute.

Simple scrolling effect with overflow-x

If you do not want to change the table structure, you can achieve horizontal scrolling by setting overflow-x: auto of the container:

 .table-container {
  overflow-x: auto;
}

.table-container table {
  min-width: 100%;
}

This method is simple and effective, and is suitable for situations where there is a lot of content but no complex rearrangement is required.

• Advantages : Simple implementation, suitable for rapid deployment.
• Disadvantages : The mobile experience is average, and users need to swipe to view the complete content.

Simplify development with frameworks or libraries

If you are using front-end frameworks (such as Bootstrap, Foundation, etc.), you usually have built-in support for responsive tables. For example, Bootstrap provides the .table-responsive class:

 <div class="table-responsive">
  <table class="table">
    <!-- Table content-->
  </table>
</div>

This method saves the hassle of manually writing media queries, and is optimized for better compatibility.

Basically that's it. You can choose the appropriate method to implement responsive tables based on project requirements.

The above is the detailed content of Creating responsive tables with CSS. For more information, please follow other related articles on the PHP Chinese website!