Tabelle mittig zentrieren

TeamBob

Hallo Community,

ich habe eine kleine Tabelle aus 3 Spalten, wobei die mittlere Spalte mehr als Leerspalte (Abstandshalter) gedacht ist.
Ich möchte, dass die gesamte Tabelle auf der Seite mittig angezeigt wird und die Schrift normal linksbündig ist.
Egal was ich eingebe, die Tabelle wird leider nicht mittig angezeigt.

HTML

<style>
div.table {     display: table;     width: calc(100% -  10px);     padding: 5px;   }   div.spalte1 {      display: table-cell;      width: 350px;     padding: 5px;   }      div.spalte2 {      display:  table-cell;    width: 10px;     padding: 5px;   }      
</style>
<div class="table" align="center">       
<div class="spalte1" align="center">
<div align="left"><ul>
<li><font size="3">1</font></li>
<li><font size="3">2</font></li>
<li><font size="3">3</font></li>
<li><font size="3">4</font></li>
</ul></div>
</div>       
<div class="spalte2" align="left">.</div>       
<div class="spalte1" align="center">
<div align="left"><ul>
<li><font size="3">5</font></li>
<li><font size="3">6</font></li>
<li><font  size="3">7</font></li>
<li><font size="3">8</font></li>
</ul></div>
</div>

Alles anzeigen

Theas1965

Ich sehe da keine Tabelle, und der font-Tag ist veraltet, nutze auch da CSS

TeamBob

das sind farblich unterlegte Abschnitte (Blöcke) und diese sollten mittig angezeigt werden.
Ist für eine Darstellung in Ebay gedacht, daher nutze ich HTML nicht sonderlich häufig.
Wie genau müsste es denn aussehen wen

djheke

Probier mal

Code

<style>
.myebay {  
 margin:0 auto;   
 display: table;
 box-sizing:border-box;    
 background:#aaa; 
}   


.myebay ul {   
 margin:0;
 padding: 5px; 
 background:#dac;
 display: table-cell;  
 list-style:none;    
 width: 350px;     
} 


.myebay ul:nth-child(odd) {
 background:#abc;
}


.myebay li {
 padding:5px;
}
</style>
<div class="myebay">       
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>

Alles anzeigen

Und hier noch auf die Schnelle eine Ebayvorlage. Wenn benötigt.
http://gipspferd.de/forumhilfe/ebayvorlage1/index.html

Und hier der relevante Code

Code

<div id="mywrapper">
<header><h1>Willkommen auf meiner Auktion</h1></header>
<main>
 <section class="flex">
    <article class="descripe col-66 ">
      <h3>ARTIKELBESCHREIBUNG</h3>
       <p>
            Hier der text 
       </p>
        </article>


    <article class="col-33 info">
          <div>
        <h3 class="fa fa-5x fa-info-circle weiss"><b>Info</b></h3>
          <p>
                Wichtige Information
              </p>
      </div>
    </article>
 </section>




<!--Nur wenn die Tabelle gebraucht wird ansonsten löschen -->
    <table>
    <caption>Techniche Daten</caption>
    <tr><th>Hersteller</th><td>HP</td></tr>
    <tr><th>Modell</th><td>Pavilion</td></tr>
    <tr><th>Prozessor</th><td>Celeron 1GHz</td></tr>
    <tr><th>Arbeitsspeicher</th><td>4 GB DDR3</td></tr>
    <tr><th>Festplatte</th><td>nicht vorhanden</td></tr>
    <tr><th>Netzteil</th><td>nicht vorhanden</td></tr>
    </table>


<!-- Bilderauswahl-->
 <section class="gal">
    <ul>
    <li><a href="bildpfad"><img alt="" src="bildpfad/bild.jpg"></a></li>
    <li><a href="bildpfad"><img alt="" src="bildpfad/bild.jpg"></a></li>
    <li><a href="bildpfad"><img alt="" src="bildpfad/bild.jpg"></a></li>
    </ul>
 </section>


 <section class="flex">
    <article class="col-33">
      <h3 class="fa fa-5x fa-info-circle"><b>Info</b></h3>
        <p>
          Wegen der Gesetzesbestimmungen erfolgt die Auktion unter Ausschluss jeglicher Gewährleistung, Garantie und Rücknahme. Da es sich um Privatverkauf handelt. Ich hoffe potenzielle Käufer sind damit einverstanden.
        </p>
    </article>


    <article class="col-33">
      <h3 class="fa fa-5x fa-truck"><b>Versand</b></h3>
       <p>Schnelle Bearbeitung Ihrer Bestellung. Täglicher Versand außer Sonntags und Feiertags Top Kundenservice.</p>
    </article>


    <article class="col-33">
      <h3 class="fa fa-5x fa-euro "><b>Zahlung</b></h3>
        <p style="text-align:left;margin-right:10px;">Ich akzeptiere folgende Zahlungsarten:</p>
        <p style="text-align:left;margin-right:10px;"><i style="margin-right:10px;" class="fa fa-bank"></i>Banküberweisung.</p>
        <p style="text-align:left;margin-right:10px;"><i style="margin-right:10px;" class="fa fa-cc-paypal"></i>Paypal.</p>
    </article>
 </section>


 <section class="flex">
    <article class="col-33">
      <h3 class="fa fa-5x fa-question-circle"><b>Frage</b></h3>
        <p>Wenn Sie Fragen zum Artikel haben, können Sie mir gerne eine <a style="display:block;" href="http://contact.ebay.de/ws/HIER DEN REST EINTRAGEN>Nachricht</a> zukommen lassen.</p>
    </article>


    <article class="col-33">
      <h3 class="fa fa-5x fa-eye"><b>Meine Artikel</b></h3>
        <p>Hier gibt es noch <a style="display:block;" href="#pfadzuweiterenartikel">weitere Artikel</a> von mir.</p>
    </article>


    <article class="col-33">
      <h3 class="fa fa-5x fa-star"><b>Meine Bewertungen</b></h3>
        <p>Hie finden Sie meine aktuellen <a style="display:block;" href="#pfadzudeinenbewertungen">Bewertungen</a> von anderen Käufern.</p>
    </article>
 </section>


</main><!--/main-->


 <footer>
  Weitere Vorlagen auf <a href="http://www.gipspferd.de">gipspferd.de</a>
 </footer>
</div><!--/#mywrapper-->


<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">


<style type="text/css">
#mywrapper { background:#222;}
#mywrapper main * { margin:0; padding:0;}
#mywrapper main , header , footer { width:90%; margin:0px  auto; padding:10px; font-family: 'Poiret One'; line-height:20px;  letter-spacing:1px; box-sizing:border-box;}
#mywrapper main { background: #fff;}
#mywrapper header { background:url(deinegrafik) no-repeat right center #0c9; background-size:contain; padding:3em ; color:#fff; font-weight:bold;}
#mywrapper section { padding:10px 0; text-align:center;}
#mywrapper article { text-align:center; background:#eee; padding:20px; margin-right:10px;}
#mywrapper article:last-child { margin-right:0;}
#mywrapper article a { color:#FA335F; font-weight:bold;}
#mywrapper .descripe h3 { padding:10px; font-weight:bold; font-size:1.5em;}
#mywrapper h3 { padding:10px; font-weight:bold; font-size:5em;}
#mywrapper p { padding:10px;}
#mywrapper h3 b { display:none;}
#mywrapper footer { padding:10px; background:transparent; text-align:right; color:#aaa;}
#mywrapper footer a { color:#aaa; text-decoration:none; font-family:sans-serif;}
#mywrapper table { width:100%; border-collapse:collapse; font-family:arial; border:1px solid #999; background:#fff;}
#mywrapper th,#mywrapper td { padding:5px; border:1px solid #999;}
#mywrapper th { width:30%;}
#mywrapper caption{background:#0c9; color:#fff; padding:5px; text-align:left;}
#mywrapper .gal { margin:50px 0; border-top:2px solid #eee; border-bottom:2px solid #eee;}
#mywrapper .gal ul { margin:10px; list-style:none; display:flex;}
#mywrapper .gal li { margin-right:10px; background:#eee; display: flex; align-items: center; width:33%;}
#mywrapper .gal li:last-child { margin-right:0;}
#mywrapper .gal img { width:100%;}
#mywrapper .gal a { display:block;  padding:22px; outline:none;}
#mywrapper .flex { display:flex;}
#mywrapper .descripe { padding:1em ; text-align:left;}
#mywrapper .info {  background:#FA335F; font-weight:bold; color:#fff; display: flex; align-items: center; font-family:sans serif;}
#mywrapper .col-66 { width:66%;}
#mywrapper .col-33 { width:33%;}
#mywrapper .fa { color:#0c9;}
#mywrapper .weiss { color:#fff;}
#mywrapper .none { display:none;}




@media (max-width: 800px) {
#mywrapper main , #mywrapper header,#mywrapper footer{ width:100%;}
#mywrapper .flex , #mywrapper .info , #mywrapper .col-66 , #mywrapper .col-33 { width:100%; flex-direction: column; margin:5px 0;border:none;box-sizing:border-box;} 
}
</style>

Alles anzeigen

Tags