Sweepster Sweepster - 19 days ago 5
CSS Question

CSS Imperfect Table Borders

I have two tables that are layed out inline so that the right side of Table 1 touches the left side of table 2, creating the illusion that they are one table.

The reason why is that on mobile device, the tables are to be displayed one under the other so users don't have to scroll left-right while reading.

That said, I cannot get the table borders to display correctly:

enter image description here

As you can see, where the intelligence value meets the rank value, the border is thinner than all the other cells for no apparent reason. Also, the interior cell borders are thicker than the outside border of the two tables. The thickness should be 2px around the table as well as inside the table.

Can someone help clarify this for me?



@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/

Note that in the JS fiddle, I have the opposite problem: the border where the tables meet is thicker than the other cells!

Answer

Keep in mind that borders add together so when placing the tables next to each other 2px + 2px = 4px

Step 1: Remove the HTML you don't need

Step 2: Simplify the CSS and remove the right border of the left table when they are placed next to eachother.

Note I have floated the tables so you dont have to hack the closing and opening table tags together. You may need to apply a clearfix to the div containing them though.

Also note by moving the Media Query to after tha main body of the CSS I don't need to use !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>

Comments