html - max-width and min-width scaling, is this possible? -
what do
i got table 3 columns:
- text content
- input content
- spacer
the text , input must max 200px , min 100px
i want them 200px---200px---????px (rest of screen width)
i want them scale smaller when screen less 400px
then should scale down nicely until 100px--100px--0px
how can done?
i tried seems ignore min/max both table , divs.
<table style="width:100%;" border="1"> <tr> <td style=""> <div style="width:10%; min-width:100px; max-width:200px; width:auto;"> text goes here </div> </td> <td style=""> <input style="width:10%; min-width:100px; max-width:200px; width:auto;" type="text" value="field here"> </td> <td style="width:80%;"></td> </tr> </table>
(i use inline styles because quicker when testing, put in css once works)
try this:
table { width: 100%; border: 1px solid green; } .text { background: yellow; } .input { background: pink; } .text, .input { width: 100px; } .spacer { background: orange; display: none; } @media (min-width: 400px) { .text, .input { width: 200px; } .spacer { display: table-cell; width: calc(100% - 400px); } }
<table border="0"> <tr> <td class="text">1</td> <td class="input">2</td> <td class="spacer">3</td> </tr> </table>
Comments
Post a Comment