表边距很奇怪

Question

我想给表格一个保证金，表格不是#content div的100％。但是这张桌子比div（外面）大。

这是我的小提琴：jsfiddle

HTML code：

</form>

    <table>
    <tr>
        <th>Jobart</th>
        <th>Stadteil</th>
        <th>Berufsfeld</th>
        <th>Title</th>
        <th>Vergütung</th>
        <th>Gesucht zum(Datum)</th>
        <th>Weitere Informationen</th>
    </tr>


    <tr>
        <td>Gelegenheitsjob</td>
        <td>Charlottenburg</td>
        <td>Bau, Architektur, Vermessung</td>
        <td>kl</td>
        <td></td>
        <td>0000-00-00</td>
        <td><a href="index.php?site=Jobangebot_Inserat&j_id=16">Weiter</a></td>
    </tr>


    <tr>
        <td>Gelegenheitsjob</td>
        <td>Charlottenburg</td>
        <td>Bau, Architektur, Vermessung</td>
        <td>kljlk</td>
        <td>78678</td>
        <td>2014-12-01</td>
        <td><a href="index.php?site=Jobangebot_Inserat&j_id=15">Weiter</a></td>
    </tr>


    <tr>
        <td>Ausbildungsplatz</td>
        <td>Lichtenberg</td>
        <td>Gesundheit</td>
        <td>kökölkölk</td>
        <td>321321</td>
        <td>2014-12-23</td>
        <td><a href="index.php?site=Jobangebot_Inserat&j_id=19">Weiter</a></td>
    </tr>


    <tr>
        <td>Praktika</td>
        <td>Tempelhof</td>
        <td>Technik, Technologiefelder</td>
        <td>hallo</td>
        <td>1337€</td>
        <td>2014-12-25</td>
        <td><a href="index.php?site=Jobangebot_Inserat&j_id=17">Weiter</a></td>
    </tr>


    <tr>
        <td>Praktika</td>
        <td>Reinickendorf</td>
        <td>Medien</td>
        <td>jljlkjljkl</td>
        <td>7987987</td>
        <td>2014-12-28</td>
        <td><a href="index.php?site=Jobangebot_Inserat&j_id=18">Weiter</a></td>
    </tr>


</table>

CSS代码：

* {
margin: 0;
padding: 0;
}

body {
background-color: gray;
width: 100%;
}

#header {
background-color: blue;
height: 250px;
width: 100%;
}


nav {
width: 100%;
height: 50px;
background-color: yellow;
}

nav ul {
margin: 0;
}

nav ul li {
list-style: none;
float: left;
display: block;
margin: 8px 0 0 50px;
}

nav a:link {
text-decoration: none;
color: #696969;
font-family: 'Oswald', sans-serif;
font-size: 22px;
}

nav a:visited {
color: #696969;
}

nav a:hover {
color: black;
}

nav a:active {
color: black;
}


#content {
clear: left;
background-color: white;
width: 100%;
height: 100%;
}

form {
padding: 30px;
}

table {
width: 100%;
margin: 30px;
border-collapse: collapse;
/*border-spacing: 8px;*/
}

table tr:nth-of-type(odd) td {
background-color: gray;
}

th {
background-color: #8dc043;
height: 50px;
border: 1px solid #578415;
}

tr {
border: 1px solid #578415;
}

td {
border: 1px solid #578415;
padding: 8px;
}

fieldset {
padding: 15px;
}

footer {
border: 1px solid red;
background-color: green;
height: 50px;
}


footer ul {
margin: 15px 0 0 0;
}

footer ul li {
list-style: none;
float: left;
display: block;
margin: 0 0 0 50px;
}

#wrapper {
margin: 0 auto;
width: 85%;
}

希望，有人可以帮助我！

Answer 1

问题在于，在您的示例中，表的padding: 30px已添加到width: 100%，这会导致超过100％ < em>总宽度;

Example 1：使用表格中的百分比

<强> HTML

<table>
  ...
</table>

<强> CSS

table {
    margin: 3%;
    width: 94%;
}

Example 2在像素值的表格中使用包装器

<强> HTML

<div class="tablemargin">
    <table>
      ...
    </table>
</div>

<强> CSS

.tablemargin {
    margin: 30px; /*sets margin around the table*/
}

table {
    width: 100%;
    margin: 0;   /*set margin to 0 or remove this property completely*/
}

Answer 2

您可以使用像素大小和百分比。 50像素是50像素。它会是这样的：

nav {
width: 100px;
height: 50px;
background-color: yellow;
}