CODEWITHSUNDEEP
htmlcss
fabimetabi
fabimetabi

Reputation: 124

Responsive table (pure html/css)

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.

Upvotes: 0

Views: 100

Answers (2)

RompePC
RompePC

Reputation: 835

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.

Upvotes: 1

Angela
Angela

Reputation: 201

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
  }
}

Upvotes: 1

Related Questions