Question

我的表格看起来像this

enter image description here

我想删除每组“Previous”和“Current”单元格之间的间距，但是要在行和其他列之间保留它。这可能吗？

Answer 1

不使用该标记，border-spacing和border-collapse都适用于'table'和'inline-table'元素 - 即整个表，而不是它们的一部分。< / p>

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

Answer 2

用填充的细胞伪造它，并在细胞内部进行其他样式的分割。

请参阅here

enter image description here

注意：你在细胞上的填充使渐变看起来很难看。

Answer 3

您可以在表格中使用表格。不是最好的解决方案，但它可以工作（我只将它应用到第一个单元格）

Fiddle

Answer 4

我会添加额外的细胞来伪装填充物，然后乱用那些。查看fiddle

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

检查 enter image description here

下面的结果

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

你能为每个细胞设置不同的边界间距吗？

5 个答案: