Saving table proportions

Question

I have a table representing the coordinates.

How can I resize dynamically, so it is always suitable for the parent div (width: 100%), like an image?

I am currently using @media queries that are hard-coded. But there must be a better way.

.hitbox { width: 25%; /* of page */ } @media (min-width: 702px) and (max-width: 800px) { .hitbox .tablewrapper { font-size: 9px; } } @media (min-width: 800px) and (max-width: 840px) { .hitbox .tablewrapper { font-size: 10px; } } @media (min-width: 840px) and (max-width: 915px) { .hitbox .tablewrapper { font-size: 11px; } } 

edit:

The problem is if the table should be even smaller than text containing a fixed text size.

Jsfiddle
This works great.
But less than that, He does not work.
This should make the font smaller, or at least cut the cells.

edit 2: The whole table should be visible all the time, it is not important to read the text, but to see the template (with gray or red color) that it creates.

Answer 1

Use units related to the view type for your font size.

1 vw unit is equal to 1% width of the initial containing block.

Combine it with the correct width for the parent div (to body and html) and it should give you the desired result. Then the font size will be dynamically scaled depending on the size of the screen (viewport). If you reduce the size of the viewport, the font size will decrease and vice versa.

For instance:

 td { width: calc(100% / 12); padding: 2px; overflow: hidden; background: #bababa; font-size: 1.5vw; /* <---- the viewport relative font-size */ } 

Demo script 1: https://jsfiddle.net/abhitalks/ucoLcm50/9/

Demo 1 (click fullscreen to see the effect):

 * { box-sizing: border-box; padding: 0; margin: 0; } html, body { width: 100%; } div { background-color: red; width: 50%; min-width: 160px; } table { width: 100%; font-family: monospace; } td { width: calc(100% / 12); padding: 2px; overflow: hidden; background: #bababa; font-size: 1.5vw; /* <---- the viewport relative font-size */ } 

 <div> <table> <tr> <td>A1</td><td>A2</td><td>A3</td><td>A4</td> <td>A5</td><td>A6</td><td>A7</td><td>A8</td> <td>A9</td><td>A10</td><td>A11</td><td>A12</td> </tr> <tr> <td>B1</td><td>B2</td><td>B3</td><td>B4</td> <td>B5</td><td>B6</td><td>B7</td><td>B8</td> <td>B9</td><td>B10</td><td>B11</td><td>B12</td> </tr> </table> </div> 

---

An alternative solution (and better) would be to keep the font size fixed, but overflow the containing div based on min-width . This will allow you to read the table data and also allow the scrollable table if there is a space limit.

For instance:

 div { width: 50%; min-width: 180px; overflow-y: hidden; overflow-x: auto; } 

Demo script 2: https://jsfiddle.net/abhitalks/pu2yh0fc/1/

Demo 2:

 * { box-sizing: border-box; padding: 0; margin: 0; } html, body { width: 100%; } div { background-color: red; width: 50%; min-width: 180px; overflow-y: hidden; overflow-x: auto; } table { min-width: 100%; font-family: monospace; } td { min-width: calc(100% / 12); padding: 2px; overflow: hidden; background: #bababa; font-size: 1em; } 

 <div> <table> <tr> <td>A1</td><td>A2</td><td>A3</td><td>A4</td> <td>A5</td><td>A6</td><td>A7</td><td>A8</td> <td>A9</td><td>A10</td><td>A11</td><td>A12</td> </tr> <tr> <td>B1</td><td>B2</td><td>B3</td><td>B4</td> <td>B5</td><td>B6</td><td>B7</td><td>B8</td> <td>B9</td><td>B10</td><td>B11</td><td>B12</td> </tr> </table> </div> 

Answer 2

set the width of the table: 100%, and TD in the table - width 1/12 (8.3%), then TDs should resize relative to the table.

 table{ width: 100%; } td { width:8.3%; overflow: hidden; background: #bababa; } 

 <div> <table> <tr> <td>A1</td> <td>A1</td> <td>A1</td> <td>A1</td> <td>A1</td> <td>A1</td> <td>A1</td> <td>A1</td> <td>A1</td> <td>A1</td> <td>A1</td> <td>A1</td> </tr> <tr> <td>B1</td> <td>B1</td> <td>B1</td> <td>B1</td> <td>B1</td> <td>B1</td> <td>B1</td> <td>B1</td> <td>B1</td> <td>B1</td> <td>B1</td> <td>B1</td> </tr> </table> </div> 

cm

https://jsfiddle.net/ucoLcm50/1/

Answer 3

How can I resize dynamically, so it is always suitable for the parent div (width: 100%), like an image ??

See Jonathans Solution, Instead of (1/12) I suggest that it be (100/no-of-columns[td's] )% .

should reduce the font, or at least shorten the cells:

add overflow: hidden; in your div's css (so that it hides the cells [cut] coming out of this div):

 div { background-color: red; width: 50%; overflow:hidden; } table{ width:100%; } td { width:8.3%; overflow: hidden; background: #bababa; } 

 <div> <table> <tr> <td>A1</td> <td>A1</td> <td>A1</td> <td>A1</td> <td>A1</td> <td>A1</td> <td>A1</td> <td>A1</td> <td>A1</td> <td>A1</td> <td>A1</td> <td>A1</td> </tr> <tr> <td>B1</td> <td>B1</td> <td>B1</td> <td>B1</td> <td>B1</td> <td>B1</td> <td>B1</td> <td>B1</td> <td>B1</td> <td>B1</td> <td>B1</td> <td>B1</td> </tr> </table> </div> 

Fiddle

Hope this helps ...