How to make HTML table responsive?

1049 views html
6

I have an HTML table with 8 cells (with images in each cell) in a single row - how do I make it RESPONSIVE so that it adjusts to a mobile viewport while still keeping its features on a desktop? I'd like to use CSS and HTML.

Can anyone help?

Thanks in advance!

answered question

making a table responsive is very tricky, why not use css grid?

Can you post your HTML markup and CSS? What have you already tried? Try looking into media queriesL developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/…

1 Answer

11

How about the following. Just wrap the table in a div to make it scrollable if required (vertical and horizontal).

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

.data-table--responsive {
    overflow-x: auto;
}
<div class="data-table--responsive">
  <table class="data-table">
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum erat ac vulputate euismod. Cras tempus, velit nec volutpat sodales, mi libero laoreet eros, eget auctor tellus dolor tempus massa. Sed porta mauris vitae diam fringilla varius. Vivamus laoreet fringilla mauris. Ut euismod felis eu diam tempor consequat. Duis accumsan erat sed purus ultrices elementum. Integer suscipit dictum lectus, ullamcorper tempus urna volutpat lacinia. Cras tincidunt nec augue eget tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec neque non mauris ullamcorper congue sed a purus.</td>
      <td>Vestibulum a est id mi laoreet luctus. Duis vestibulum ac dolor a consequat. Nullam augue enim, semper ut eleifend accumsan, consectetur quis diam. Suspendisse tellus ante, bibendum vel lobortis a, pellentesque in diam. Vestibulum erat sapien, molestie sit amet velit sit amet, malesuada maximus elit. Praesent in eros dapibus, rutrum nisi id, bibendum orci. Mauris commodo sit amet mi quis maximus. Proin eleifend mollis ex, vulputate ultricies metus tempus in. Nulla dapibus lectus purus, id pellentesque nulla malesuada at. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum a nisl rhoncus, elementum nisl ut, mollis neque. Donec fermentum est id efficitur viverra.</td>
      <td>
        Vestibulum a est id mi laoreet luctus. Duis vestibulum ac dolor a consequat. Nullam augue enim, semper ut eleifend accumsan, consectetur quis diam. Suspendisse tellus ante, bibendum vel lobortis a, pellentesque in diam. Vestibulum erat sapien, molestie sit amet velit sit amet, malesuada maximus elit. Praesent in eros dapibus, rutrum nisi id, bibendum orci. Mauris commodo sit amet mi quis maximus. Proin eleifend mollis ex, vulputate ultricies metus tempus in. Nulla dapibus lectus purus, id pellentesque nulla malesuada at. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum a nisl rhoncus, elementum nisl ut, mollis neque. Donec fermentum est id efficitur viverra.
      </td>
      <td>
        Vestibulum a est id mi laoreet luctus. Duis vestibulum ac dolor a consequat. Nullam augue enim, semper ut eleifend accumsan, consectetur quis diam. Suspendisse tellus ante, bibendum vel lobortis a, pellentesque in diam. Vestibulum erat sapien, molestie sit amet velit sit amet, malesuada maximus elit. Praesent in eros dapibus, rutrum nisi id, bibendum orci. Mauris commodo sit amet mi quis maximus. Proin eleifend mollis ex, vulputate ultricies metus tempus in. Nulla dapibus lectus purus, id pellentesque nulla malesuada at. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum a nisl rhoncus, elementum nisl ut, mollis neque. Donec fermentum est id efficitur viverra.
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </table>
</div>

posted this

Have an answer?

JD

Please login first before posting an answer.