CSS-Imperfect-Tabellenränder

Question

Ich habe zwei Tabellen, die inline angeordnet sind, so dass die rechte Seite von Tabelle 1 die linke Seite von Tabelle 2 berührt, wodurch die Illusion entsteht, dass es sich um eine Tabelle handelt.

Der Grund dafür ist, dass auf dem mobilen Gerät die Tabellen untereinander angezeigt werden, damit die Benutzer beim Lesen nicht von links nach rechts blättern müssen.

Das heißt, ich kann nicht die Tabellenrahmen korrekt dargestellt:

Wie Sie sehen können, wo die Intelligenz Wert den Rangwert erfüllt, die Grenze ist dünner als alle anderen Zellen kein ersichtlicher Grund. Außerdem sind die inneren Zellgrenzen dicker als die äußere Grenze der beiden Tabellen. Die Stärke sollte 2px um den Tisch sowie innerhalb des Tisches sein.

Kann mir jemand helfen, dies für mich zu klären?

@media screen and (min-width: 769px) { 
 
    table#statcontainer, 
 
    table#statcontainer2 { 
 
    display: inline-block; 
 
    width: initial; 
 
    } 
 
    table#statcontainer, 
 
    table#statcontainer2 { 
 
    width: 50% !important; 
 
    } 
 
} 
 
table#statcontainer, 
 
table#statcontainer2 { 
 
    width: 100%; 
 
} 
 
table#statcontainer tr:first-child, 
 
table#statcontainer2 tr:first-child { 
 
    font-weight: bold; 
 
} 
 
table#statcontainer, 
 
table#statcontainer2, 
 
tr#stat-header, 
 
tr#stat-header2, 
 
td.stats { 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    font-family: Impact, Charcoal, sans-serif; 
 
} 
 
td.stats { 
 
    border: 1px solid #d03908; 
 
    width: 78px; 
 
    padding: 5px; 
 
} 
 
td.value { 
 
    font-size: 30px; 
 
    padding: 0; 
 
} 
 
td.stats p { 
 
    margin: 0; 
 
} 
 
tr#stat-header, 
 
tr#stat-header2 { 
 
    background: #d03908; 
 
    /* For browsers that do not support gradients */ 
 
    background: -webkit-linear-gradient(#d03908, #fff); 
 
    /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(#d03908, #fff); 
 
    /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(#d03908, #fff); 
 
    /* For Firefox 3.6 to 15 */ 
 
    background: linear-gradient(#d03908, #fff); 
 
    /* Standard syntax */ 
 
} 
 
.entry-content { 
 
    float: left; 
 
}

<div class="entry-content"> 
 
    <table id="statcontainer"> 
 
    <tr id="stat-header" class="tablekey"> 
 
     <td id="couragekey" class="stats"> 
 
     <span><p>Courage</p></span> 
 
     </td> 
 
     <td id="endurancekey" class="stats"> 
 
     <span><p>Endurance</p></span> 
 
     </td> 
 
     <td id="fireblastkey" class="stats"> 
 
     <span><p>Fireblast</p></span> 
 
     </td> 
 
     <td id="intelligencekey" class="stats"> 
 
     <span><p>Intelligence</p></span> 
 
     </td> 
 
    </tr> 
 
    <tr id="stat-value" class="tablevalue"> 
 
     <td id="couragevalue" class="stats value"> 
 
     <p>10</p> 
 
     </td> 
 
     <td id="endurancevalue" class="stats value"> 
 
     <p>10</p> 
 
     </td> 
 
     <td id="fireblastvalue" class="stats value"> 
 
     <p>8</p> 
 
     </td> 
 
     <td id="intelligencevalue" class="stats value"> 
 
     <p>10</p> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
    <table id="statcontainer2"> 
 
    <tr id="stat-header2" class="tablekey"> 
 
     <td id="rankkey" class="stats noleftborder"> 
 
     <span><p>Rank</p></span> 
 
     </td> 
 
     <td id="skillkey" class="stats"> 
 
     <span><p>Skill</p></span> 
 
     </td> 
 
     <td id="speedkey" class="stats"> 
 
     <span><p>Speed</p></span> 
 
     </td> 
 
     <td id="strengthkey" class="stats"> 
 
     <span><p>Strength</p></span> 
 
     </td> 
 
    </tr> 
 
    <tr id="stat-value2" class="tablevalue"> 
 
     <td id="rankvalue" class="stats value noleftborder"> 
 
     <p>10</p> 
 
     </td> 
 
     <td id="skillvalue" class="stats value"> 
 
     <p>10</p> 
 
     </td> 
 
     <td id="speedvalue" class="stats value"> 
 
     <p>8</p> 
 
     </td> 
 
     <td id="strengthvalue" class="stats value"> 
 
     <p>10</p> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

JS Fiddle: http://jsfiddle.net/exmRf/424/

Beachten Sie, dass in der JS-Geige, ich das Gegenteil Problem: die Grenze, wo die Tische erfüllen ist dicker als die anderen Zellen!

Answer 1

Denken Sie daran, die Grenzen fügen zusammen, so dass, wenn die Tabellen platzieren nebeneinander 2px + 2px = 4px

Schritt 1: Entfernen Sie die HTML Sie nicht

Schritt 2 benötigen: Vereinfachen Sie die CSS und entfernen Sie den rechten Rand des linken Tischs, wenn sie nebeneinander platziert werden.

Hinweis: Ich habe die Tabellen verschoben, so dass Sie die abschließenden und öffnenden Tabellen-Tags nicht zusammen hacken müssen. Möglicherweise müssen Sie einen Clearfix auf das div anwenden, das sie enthält.

Beachten Sie auch durch die Medien Query nach tha Hauptkörper des CSS bewegen muss ich hier nicht verwenden !important

.entry-content table 
 
{ 
 
    border-collapse: collapse; 
 
    width:100%; 
 
} 
 

 
.entry-content td, .entry-content th 
 
{ 
 
    border: 1px solid #d03908; 
 
    width: 78px; 
 
    padding: 5px; 
 
    text-align:center; 
 
    font-family: Impact, Charcoal, sans-serif; 
 
} 
 

 
.entry-content td 
 
{ 
 
    font-size: 30px; 
 
} 
 

 
thead { 
 
    background: #d03908; /* For browsers that do not support gradients */ 
 
    background: -webkit-linear-gradient(#d03908, #fff); /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(#d03908, #fff); /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(#d03908, #fff); /* For Firefox 3.6 to 15 */ 
 
    background: linear-gradient(#d03908, #fff); /* Standard syntax */ 
 
} 
 

 
@media screen and (min-width: 769px) { 
 
    .entry-content table 
 
    { 
 
    width:50%; 
 
    float:left; 
 
    } 
 
    
 
    #statcontainer tr td:last-child, #statcontainer tr th:last-child 
 
    { 
 
    border-right:none; 
 
    } 
 
}

<div class="entry-content"> 
 
    <table id="statcontainer"> 
 
    <thead> 
 
     <tr class="tablekey"> 
 
     <th id="couragekey" class="stats"> 
 
      Courage 
 
     </th> 
 
     <th id="endurancekey" class="stats"> 
 
      Endurance 
 
     </th> 
 
     <th id="fireblastkey" class="stats"> 
 
      Fireblast 
 
     </th> 
 
     <th id="intelligencekey" class="stats"> 
 
      Strength 
 
     </th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr id="stat-value" class="tablevalue"> 
 
     <td id="couragevalue" class="stats value"> 
 
      10 
 
     </td> 
 
     <td id="endurancevalue" class="stats value"> 
 
      10 
 
     </td> 
 
     <td id="fireblastvalue" class="stats value"> 
 
      8 
 
     </td> 
 
     <td id="intelligencevalue" class="stats value"> 
 
      10 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    <table id="statcontainer2"> 
 
    <thead> 
 
    <tr class="tablekey"> 
 
     <th id="rankkey" class="stats noleftborder"> 
 
     Rank 
 
     </th> 
 
     <th id="skillkey" class="stats"> 
 
     Skill 
 
     </th> 
 
     <th id="speedkey" class="stats"> 
 
     Speed 
 
     </th> 
 
     <th id="strengthkey" class="stats"> 
 
     Strength 
 
     </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr id="stat-value2" class="tablevalue"> 
 
     <td id="rankvalue" class="stats value noleftborder"> 
 
     10 
 
     </td> 
 
     <td id="skillvalue" class="stats value"> 
 
     10 
 
     </td> 
 
     <td id="speedvalue" class="stats value"> 
 
     8 
 
     </td> 
 
     <td id="strengthvalue" class="stats value"> 
 
     10 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 2

Erstens wird durch das Zuweisen einer Breite zu Ihren p-Tags Ihre inkonsistente Breite korrigiert. Zweitens sollten Sie die inkonsistente Randstärke korrigieren, indem Sie den Rand um die Tabellen, der sich um den Rand um jede Zelle herum befindet, um 1 Pixel entfernen.