CODEWITHSUNDEEP
htmlcsshtml-tablemargin
c00L
c00L

Reputation: 609

Table margin is weird

I would like to give the table a margin, that the table is not 100% of the #content div. But the table is bigger than the div(outside).

Here is my fiddle: 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 code:

* {
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%;
}

Hope, that somebody can help me!

Upvotes: 0

Views: 384

Answers (2)

pbaldauf
pbaldauf

Reputation: 1681

The problem is that in your example the padding: 30px of your table is added to width: 100% which results in more than 100% of total width;


Example 1: Using percentages on table

HTML

<table>
  ...
</table>

CSS

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

Example 2 Using wrapper around table for pixelvalues

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*/
}

Upvotes: 1

user1789573
user1789573

Reputation: 535

You can use pixel size as well as percentages. 50px is 50 pixels. It would be like this:

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

Upvotes: 0

Related Questions