Responsive table (pure html/css)

Question

Code : https://jsfiddle.net/qo44rgop/

I want the table to move the td's to the next line if the screen becomes to small (now it extends the table beyond the width of the div). I tried to use margin: auto on the table, it centered it on the div but it didn't adapt to the screen size.

Answer 1

---

One thing you might want to consider is changing the display property of to 'block' under certain size restrictions. Example:

@media (max-width: 600px){
  td{
    display:block
  }
}

Answer 2

I think you should use @media and set the width of the table cells to 100% (or change the display property) when the screen width fits with your concept of small (I think 768px was the normal max-width for mobile devices, don't remember now).

You have an example in the link I gave, at the bottom.