HTML mehreren Tabellen Abstands,

Question

können sagen, ich habe zwei Tabellen in einem Div gewickelt:

<div class = "main" id = "mainDiv"> 
    <table id = "one"> 
    1 
    </table> 

    <table id = "two"> 
    2 
    </table> 
</div> 

Wie kann ich zeigt diese zwei Beistelltischen an Seite mit 5 px voneinander? Gibt es etwas wie "cellspacing", das ich nur für Tabellen verwenden kann?

Answer 1

Ihre Struktur nicht korrekt ist, sollte es so sein:

<div class = "main" id = "mainDiv"> 
    <table id = "one"> 
     <tr> 
     <td>1</td> 
     </tr> 
    </table> 

    <table id = "two"> 
     <tr> 
     <td>2</td> 
     </tr> 
    </table> 
</div> 

Und man konnte die display:table; der Tabelle display:inline-table; ändern, um sie auf einer Linie auszurichten.

Like this

Answer 2

würde ich CSS verwenden und man kann es machen, so dass es in Reaktion ist, prüfen Sie den Code für 2 Spalten. In diesem Code ist es 2 Spalten gleicher Breite bei 49,2%. Wenn du einen anderen Split willst, ändere das.

/* SECTIONS */ 
 
.section { 
 
\t clear: both; 
 
\t padding: 0px; 
 
\t margin: 0px; 
 
} 
 

 
/* COLUMN SETUP */ 
 
.col { 
 
\t display: block; 
 
\t float:left; 
 
\t margin: 1% 0 1% 1.6%; 
 
} 
 
.col:first-child { margin-left: 0; } 
 

 
/* GROUPING */ 
 
.group:before, 
 
.group:after { content:""; display:table; } 
 
.group:after { clear:both;} 
 
.group { zoom:1; /* For IE 6/7 */ } 
 

 
/* GRID OF TWO */ 
 
.span_2_of_2 { 
 
\t width: 100%; 
 
} 
 
.span_1_of_2 { 
 
\t width: 49.2%; 
 
} 
 

 
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 
 

 
@media only screen and (max-width: 480px) { 
 
\t .col { 
 
\t \t margin: 1% 0 1% 0%; 
 
\t } 
 
} 
 

 
@media only screen and (max-width: 480px) { 
 
\t .span_2_of_2, .span_1_of_2 { width: 100%; } 
 
}

<div class="section group"> 
 
\t <div class="col span_1_of_2"> 
 
\t This is column 1 
 
\t </div> 
 
\t <div class="col span_1_of_2"> 
 
\t This is column 2 
 
\t </div> 
 
</div>