0

I'm trying to create a table e.g. 8 number of columns. It works fine on the desktop screen. However, when trying on a smaller screen or trying to reduce the size of the browser, tds get divided equally and content gets squeezed.

I want to have the min-width of the td to be say 200px. How can we achieve this?

I tried

table-layout: fixed
td { min-width:200px;  
 }

Apparently, min-width on td does not work. I also tried putting <td><div style:"min-width:200px"></div></td> However, this does not work. td's border and the content in the divgets out of placed when doing so.

Is there any idea? I can use bootstrap 3 as well if that solves the issue.

Thanks.

ANewGuyInTown
  • 5,957
  • 5
  • 33
  • 45
  • Did you try this https://stackoverflow.com/questions/18503849/set-min-width-in-html-tables-td – chintuyadavsara Oct 23 '20 at 08:07
  • As you can see if you visit the link given by @chintuyadavsara `min-width` is supposed to work. Can you please provide a code snippet with HTML and CSS to reproduce the problem? – Cedric Cholley Oct 23 '20 at 08:16

1 Answers1

2

table-layout: fixed , this attribute (fixed) affects min-width. When I set it to automatic or inherit, and add the style min-width:200px, the td's width will not change when the width of browser's window is shrinked.

Karney.
  • 4,803
  • 2
  • 7
  • 11