CSS Imperfect Table Borders

Question

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:

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;
}


  
    
      
        Courage
      
      
        Endurance
      
      
        Fireblast
      
      
        Intelligence
      
    
    
      
        10
      
      
        10
      
      
        8
      
      
        10
      
    
  
  
    
      
        Rank
      
      
        Skill
      
      
        Speed
      
      
        Strength
      
    
    
      
        10
      
      
        10
      
      
        8
      
      
        10

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!

Jon P · Accepted 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;
  }
}

CSS Imperfect Table Borders

Answers (2)

Related Questions