Depending on the width of the window, you need to change the indent to the left. This is now done via @media

table{ margin: 0 0 0 2%; } @media (min-width: 1540px){ table{ margin: 0 0 0 15%; } } @media (min-width: 2000px){ table{ margin: 0 0 0 25%; } }

How can this be implemented via calc () in CSS?

  • and vw does not fit? - midia

1 answer 1

through Calc, you can implement linear (continuous) calculations, but not specify discreteness / intervals of changes. That is, if it is exactly necessary for you that the margin on the left is 25% on screens over 2000, 15% on 1540 ... 2000 and 2% on all others, then you should do it exactly as you did - through media Kveri. That's when Calc () can transfer not only four basic mathematical operations, but logical operators and formulas of functions, then it will be possible to return to this topic and think ...

Alternatively, if you are satisfied with the linear and continuous increment / change - make a margin as a percentage of the width of the window (viewport), as you suggested in the comments:

 table{margin: 0 0 0 25 vw;}

With a width of 1540 pixels, for example, the margins will be 385 px, and with 2000 the width will be 500 px, but the intermediate window widths will give you intermediate results. You will achieve exactly the same effect by setting the padding-left:25% parent container of the table (if it is equal to the width of the window, of course).