CODEWITHSUNDEEP
htmlcss
torbenrudgaard
torbenrudgaard

Reputation: 2561

max-width and min-width scaling, is this possible?

What I would like to do

I got a table with 3 columns:

The Text and Input must be max 200px and min 100px

I want them to be 200px---200px---????px (rest of screen width)

I only want them to scale smaller when screen is less than 400px

Then they should scale down nicely until 100px--100px--0px

enter image description here

How can this be done?

I tried but it seems to ignore min/max with both table and divs. 

<table style="width:100%;" border="1">
  <tr>
    <td style="">
      <div style="width:10%; min-width:100px; max-width:200px; width:auto;">
        The text goes here
      </div>
    </td>
    <td style="">
      <input style="width:10%; min-width:100px; max-width:200px; width:auto;" 
             type="text" value="field is here">
    </td>
    <td style="width:80%;"></td>
  </tr>
</table>

(I use inline styles because its quicker when testing, will put in CSS once it works)

Upvotes: 0

Views: 1031

Answers (1)

EugenAz
EugenAz

Reputation: 171

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>

Upvotes: 2

Related Questions