I want to know why this table will go out of the form

Question

The top border of table has gone out of the form border (which is the border of blue background color)

form {
    margin-top: 100px;
    margin-left: 20%;
    width: 60%;
    background-color: #F0FFFF;
}

table {
    width: calc(100% - 20px);
    margin: 10px;
    text-align: center;
    border-collapse: collapse;
    border-style: none;
}

I also want to change distance between tables to 10px, so I need margin — 1900011604, Apr 02 '22 at 03:04
**DO NOT post images of code, data, error messages, etc.** - copy or type the text into the question. [ask] — Rob, Apr 02 '22 at 12:18

score 1 · Answer 1 · edited Apr 04 '22 at 18:22

1

idk just replace table margin: 10px with form padding: 10px

and change table width: calc(100% - 20px); to table width: 100%;

edited Apr 04 '22 at 18:22

1900011604

137
6

answered Apr 02 '22 at 02:56

Jacek Pietal

1,960
1
18
27

Thanks! also change table width: calc(100% - 20px); to table width: 100%; but why will table go out of form? – 1900011604 Apr 02 '22 at 03:02
maybe try box-sizing: border-box; idk – Jacek Pietal Apr 02 '22 at 03:04

I want to know why this table will go out of the form

1 Answers1