CSS不完美的表格边框

Question

我有两个内联布局的表格，因此表格1的右侧触及表格2的左侧，从而产生了它们是一张桌子的错觉。

原因是在移动设备上，表格会一个接一个地显示，因此用户在阅读时不必左右滚动。

那就是说，我无法正确显示表格边框：

正如您所看到的，在智能值满足等级值的情况下，边界比所有其他单元格更薄，没有明显的原因。此外，内部单元格边框比两个表格的外边框厚。桌子周围以及桌子内的厚度应为2px。

有人可以帮我澄清一下吗？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

JS小提琴： http://jsfiddle.net/exmRf/424/

请注意，在JS小提琴中，我遇到了相反的问题：表格遇到的边框比其他单元格更厚！

Answer 1

请记住边框加在一起所以将表格放在一起时2px + 2px = 4px

第1步：删除不需要的HTML

第2步：简化CSS并将左表放在彼此旁边时删除左边的右边框。

注意我已经浮动了表格，所以你不必一起破解关闭和打开表格标签。您可能需要将clearfix应用于包含它们的div。

另请注意，将媒体查询移至CSS主体之后我不需要使用!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

首先，为p标签指定宽度将修复不一致的宽度。 其次，删除表格周围的1 px边框（添加到每个单元格周围的边框），应修复不一致的边框粗细。