您可以为每个单元格设置不同的边框间距吗？答案

【问题标题】：Can you set border-spacing differently for each cell?您可以为每个单元格设置不同的边框间距吗？
【发布时间】：2012-07-24 21:09:55
【问题描述】：

我有一张看起来像 this 的表

我想删除每组“上一个”和“当前”单元格之间的间距，但在行和其他列之间保留它。这可能吗？

【问题讨论】：

标签： html css border border-spacing

【解决方案1】：

没有那个标记，border-spacing 和 border-collapse 都适用于 'table' 和 'inline-table' 元素 - 即整个表格，而不是它们的一部分。

您可以通过合并单元格并使用其他结构将数据块并排放置来伪造它，但这会失去一些语义。

【讨论】：

【解决方案2】：

您可以在表格中使用表格。不是最简洁的解决方案，但它有效（我只将它应用于第一个单元格）

Fiddle

【讨论】：

是的，我也想过这个，但就像你说的那样，它不是很整洁。

【解决方案3】：

我会添加额外的单元格来稍微伪造填充，然后把它们弄乱。检查fiddle

【讨论】：

【解决方案4】：

用填充单元格伪造它，并在单元格内设置其他样式的 div。

见here

注意：单元格上的填充使渐变看起来很难看。

【讨论】：

【解决方案5】：

我使用了一些 div 并为 div 添加了一些新样式。下面是完整的代码。我只做了 2 行。您可以根据需要执行任意数量的行。

<html>
<head>

<style>
   .dash-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 10px;
}

.dash-table td,
.dash-table th {
    font-size: 16px;
    padding: 10px;
    line-height: normal;
    text-align: center;
    font-weight: bold;
}

.dash-prev {
    border-radius: 10px 0px 0px 10px;
    width: 25%;
}

.dash-curr {
    border-radius: 0px 10px 10px 0px;
}

.dash-actual {
    font-size: 14px;
}

.dash-blue,
.dash-green,
.dash-amber,
.dash-red {
    color: #ffffff;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
      border-top: 10px solid #fff;
}

.dash-blue {
  background-color: #0074cc;
  *background-color: #0055cc;
  background-image: -ms-linear-gradient(top, #0088cc, #0055cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc));
  background-image: -webkit-linear-gradient(top, #0088cc, #0055cc);
  background-image: -o-linear-gradient(top, #0088cc, #0055cc);
  background-image: -moz-linear-gradient(top, #0088cc, #0055cc);
  background-image: linear-gradient(top, #0088cc, #0055cc);
  background-repeat: repeat-x;
  border-color: #0055cc #0055cc #003580;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}

.dash-green {
  background-color: #5bb75b;
  *background-color: #51a351;
  background-image: -ms-linear-gradient(top, #62c462, #51a351);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
  background-image: -webkit-linear-gradient(top, #62c462, #51a351);
  background-image: -o-linear-gradient(top, #62c462, #51a351);
  background-image: -moz-linear-gradient(top, #62c462, #51a351);
  background-image: linear-gradient(top, #62c462, #51a351);
  background-repeat: repeat-x;
  border-color: #51a351 #51a351 #387038;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}

.dash-amber {
  background-color: #faa732;
  *background-color: #f89406;
  background-image: -ms-linear-gradient(top, #fbb450, #f89406);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
  background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
  background-image: -o-linear-gradient(top, #fbb450, #f89406);
  background-image: -moz-linear-gradient(top, #fbb450, #f89406);
  background-image: linear-gradient(top, #fbb450, #f89406);
  background-repeat: repeat-x;
  border-color: #f89406 #f89406 #ad6704;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}

.dash-red {
  background-color: #da4f49;
  *background-color: #bd362f;
  background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
  background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
  background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
  background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
  background-image: linear-gradient(top, #ee5f5b, #bd362f);
  background-repeat: repeat-x;
  border-color: #bd362f #bd362f #802420;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', GradientType=0);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
div
{
    float:left;
    width: 50%;
}

.divLeft
{
    padding-top: 14%;
}
</style>
</head>
<body>
    <table class="dash-table">
  <thead>
    <tr>
      <th></th>
      <th colspan="2">Global</th>
      <th colspan="2">GB</th>
      <th colspan="2">US</th>
      <th colspan="2">RW</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><h2>#</h2></td>
      <td class="dash-prev dash-blue">
        <div class="divLeft">
        Previous hour<br><h2>#</h2>
        </div>
        <div>
        Current hour (projected): <h2>#</h2><br>
        <span class="dash-actual">Actual: #</span>
        </div>
      </td>
      <td class="dash-prev dash-green">
        <div class="divLeft">
        Previous hour<br><h2>#</h2>
        </div>
        <div>
        Current hour (projected): <h2>#</h2><br>
        <span class="dash-actual">Actual: #</span>
        </div>
      </td>
      <td class="dash-prev dash-amber">
        <div class="divLeft">
        Previous hour<br><h2>#</h2>
        </div>
        <div>
        Current hour (projected): <h2>#</h2><br>
        <span class="dash-actual">Actual: #</span>
        </div>
      </td>
      <td class="dash-prev dash-red">
        <div class="divLeft">
        Previous hour<br><h2>#</h2>
        </div>
        <div>
        Current hour (projected): <h2>#</h2><br>
        <span class="dash-actual">Actual: #</span>
        </div>
      </td>
    </tr>

    <tr>
      <td><h2>#</h2></td>
      <td class="dash-prev dash-blue">
        <div class="divLeft">
        Previous hour<br><h2>#</h2>
        </div>
        <div>
        Current hour (projected): <h2>#</h2><br>
        <span class="dash-actual">Actual: #</span>
        </div>
      </td>
      <td class="dash-prev dash-green">
        <div class="divLeft">
        Previous hour<br><h2>#</h2>
        </div>
        <div>
        Current hour (projected): <h2>#</h2><br>
        <span class="dash-actual">Actual: #</span>
      </td>
      <td class="dash-prev dash-amber">
        <div class="divLeft">
        Previous hour<br><h2>#</h2>
        </div>
        <div>
        Current hour (projected): <h2>#</h2><br>
        <span class="dash-actual">Actual: #</span>
        </div>
      </td>
      <td class="dash-prev dash-red">
        <div class="divLeft">
        Previous hour<br><h2>#</h2>
        </div>
        <div>
        Current hour (projected): <h2>#</h2><br>
        <span class="dash-actual">Actual: #</span>
        </div>
      </td>
    </tr>

  </tbody>
</table>?

</body>
</html>

查看下面的结果

如果有任何问题，请告诉我。

【讨论】：