Create a “Responsive Table” in WordPress

To create a responsive table in WordPress, you can use one of the following methods:

  1. Use a plugin: There are several WordPress plugins that allow you to create responsive tables. Some popular ones include WP Table Manager, TablePress, and Ninja Tables.
  2. Use HTML and CSS: You can create a responsive table using HTML and CSS. To do this, you can wrap the table in a div element and give it a class name. Then, in your stylesheet, you can define the class to make the table responsive. Here’s an example:
<style>
.responsive-table {
  width: 100%;
  overflow-x: auto;
}

.responsive-table th,
.responsive-table td {
  white-space: nowrap;
}

.responsive-table th {
  position: sticky;
  top: 0;
  background-color: #333;
  color: #fff;
}

.responsive-table td {
  background-color: #ddd;
}
</style>

<div class="responsive-table">
  <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1 Cell 1</td>
        <td>Row 1 Cell 2</td>
        <td>Row 1 Cell 3</td>
      </tr>
      <tr>
        <td>Row 2 Cell 1</td>
        <td>Row 2 Cell 2</td>
        <td>Row 2 Cell 3</td>
      </tr>
    </tbody>
  </table>
</div>

This will create a responsive table that works on most devices. You can customize the CSS to suit your needs.