0

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!

1
  • 1
    Some weird and perhaps un-needed html here. It is invalid to put a p in a span. Do you actually need any other elements in the td other than the text? Lastly why are you not using th for table headers?
    – Jon P
    Jul 12, 2016 at 1:48

2 Answers 2

1

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>

0

Firstly, assigning a width to your p tags will fix your inconsistent width. Second, removing the 1 px border around the tables, which adds onto the border around each cell, should fix your inconsistent border thickness.

1
  • See my updated CSS. I increased the width of the cells through td.stats (responsive solution needed) but where the two tables meet, the border is thinner than the other cells. 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.
    – Sweepster
    Jul 12, 2016 at 1:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.