2017-04-03 2 views
0

Ich brauche eine Tabelle in der Mitte der Seite, aber der Inhalt meiner Tabelle ist auf der rechten Seite wie auf dem Bild.Tisch in der Mitte

[EDIT]: Leider ich, dass nur das ansprechende Tabke zu sagen vergessen wird man vermasselt es auf edastehlik.wz.cz Ansichtsfenster sehen kann: 500 - 1050

Not like this

Aber ich würde brauchen haben es wie folgt aus:

Like this

.tabulkaodesilac { 
 
    width: 100%; 
 
    margin-left: 400px; 
 
    display: block; 
 
} 
 

 
#jmeno, 
 
#e-mail, 
 
#spam, 
 
#predmet { 
 
    border-radius: 50px; 
 
    background: rgba(141, 109, 182, 0.75); 
 
    width: 350px; 
 
    height: 25px; 
 
    font-family: Calibri; 
 
    font-size: 16px; 
 
    color: white; 
 
    padding: 0 10px; 
 
    border-style: none; 
 
} 
 

 
@media screen and (max-width: 1050px) { 
 
    .tabulkaodesilac { 
 
    padding: 0px; 
 
    margin-bottom: 10px; 
 
    position: relative; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    } 
 
    #jmeno, 
 
    #e-mail, 
 
    #spam, 
 
    #predmet { 
 
    width: 70%; 
 
    font-family: verdana; 
 
    margin-left: 10px; 
 
    display: block; 
 
    margin: 0 auto; 
 
    } 
 
}
<table class="tabulkaodesilac"> 
 
    <tr> 
 
    <td><input id="jmeno" type="text" name="jmeno" placeholder="Vaše Jméno" /> <br></td> 
 
    <td><input id="e-mail" type="email" name="email" placeholder="Váš E-mail" /><br></td> 
 
    </tr> 
 
    <tr> 
 
    <td><input id="spam" type="text" name="spam" placeholder="Zadejte aktuální rok" /><br></td> 
 
    <td><input id="predmet" type="text" name="predmet" placeholder="Předmět" /> <br></td> 
 
    </tr> 
 
</table>

Antwort

0

Ihre Tabelle hat margin-left: 400px; UND display: block; - vor allem der display: block; verhindert es tatsächlich davon, dass eine Tabelle (eine Tabelle hat display: table haben) - so einfach diese löschen (und auch, dass zu großem Spielraum) und es wird funktionieren:

.tabulkaodesilac { 
 
    width: 100%; 
 
} 
 

 
#jmeno, 
 
#e-mail, 
 
#spam, 
 
#predmet { 
 
    border-radius: 50px; 
 
    background: rgba(141, 109, 182, 0.75); 
 
    width: 350px; 
 
    height: 25px; 
 
    font-family: Calibri; 
 
    font-size: 16px; 
 
    color: white; 
 
    padding: 0 10px; 
 
    border-style: none; 
 
} 
 

 
@media screen and (max-width: 1050px) { 
 
    .tabulkaodesilac { 
 
    padding: 0px; 
 
    margin-bottom: 10px; 
 
    position: relative; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    } 
 
    #jmeno, 
 
    #e-mail, 
 
    #spam, 
 
    #predmet { 
 
    width: 70%; 
 
    font-family: verdana; 
 
    margin-left: 10px; 
 
    display: block; 
 
    margin: 0 auto; 
 
    } 
 
}
<table class="tabulkaodesilac"> 
 
    <tr> 
 
    <td><input id="jmeno" type="text" name="jmeno" placeholder="Vaše Jméno" /> <br></td> 
 
    <td><input id="e-mail" type="email" name="email" placeholder="Váš E-mail" /><br></td> 
 
    </tr> 
 
    <tr> 
 
    <td><input id="spam" type="text" name="spam" placeholder="Zadejte aktuální rok" /><br></td> 
 
    <td><input id="predmet" type="text" name="predmet" placeholder="Předmět" /> <br></td> 
 
    </tr> 
 
</table>

+0

Leider habe ich vergessen zu sagen, dass nur die ansprechende Tabke messed besteht man es auf edastehlik.wz.cz Ansichtsfenster sehen kann: 500-1050 –

0

Sie können margin: 0 auto für die Tabelle angeben, und andere Sachen entfernen von dort:

.tabulkaodesilac { 
 
    margin: 0 auto; 
 
} 
 

 
#jmeno, 
 
#e-mail, 
 
#spam, 
 
#predmet { 
 
    border-radius: 50px; 
 
    background: rgba(141, 109, 182, 0.75); 
 
    width: 350px; 
 
    height: 25px; 
 
    font-family: Calibri; 
 
    font-size: 16px; 
 
    color: white; 
 
    padding: 0 10px; 
 
    border-style: none; 
 
} 
 

 
@media screen and (max-width: 1050px) { 
 
    .tabulkaodesilac { 
 
    padding: 0px; 
 
    margin-bottom: 10px; 
 
    position: relative; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    } 
 
    #jmeno, 
 
    #e-mail, 
 
    #spam, 
 
    #predmet { 
 
    width: 70%; 
 
    font-family: verdana; 
 
    margin-left: 10px; 
 
    display: block; 
 
    margin: 0 auto; 
 
    } 
 
}
<table class="tabulkaodesilac"> 
 
    <tr> 
 
    <td><input id="jmeno" type="text" name="jmeno" placeholder="Vaše Jméno" /> <br></td> 
 
    <td><input id="e-mail" type="email" name="email" placeholder="Váš E-mail" /><br></td> 
 
    </tr> 
 
    <tr> 
 
    <td><input id="spam" type="text" name="spam" placeholder="Zadejte aktuální rok" /><br></td> 
 
    <td><input id="predmet" type="text" name="predmet" placeholder="Předmět" /> <br></td> 
 
    </tr> 
 
</table>

+0

Leider habe ich vergessen zu sagen, dass nur die ansprechende Tabke ist vermasselt können Sie es auf Edastehlik.wz.cz Ansichtsfenster sehen: 500 - 1050 –