1

私はこのようなテーブルを持っています

ここに画像の説明を入力

「前」と「現在」のセルの各セット間の間隔を削除したいが、行と他の列の間は保持したい。これは可能ですか？

4

5 に答える 5

2

そのマークアップではなく、 border-spacingとborder-collapseの両方が'table' および 'inline-table' 要素に適用されます。つまり、表の一部ではなく表全体に適用されます。

セルをマージし、他の構造を使用してデータの断片を並べて配置することで偽造できますが、それではセマンティクスの一部が失われます。

于 2012-07-26T09:51:44.487 に答える
1

パッド入りのセルでそれを偽造し、他のスタイルを取得するセル内のdiv。

こちらをご覧ください

ここに画像の説明を入力してください

注：セルのパディングにより、グラデーションが見苦しくなります。

于 2012-07-26T10:12:36.073 に答える
0

セルを追加してパディングを少し偽造してから、それらをいじります。フィドルを確認してください

于 2012-07-26T10:02:38.660 に答える
0

テーブル内のテーブルを使用できます。最もきちんとした解決策ではありませんが、機能します（最初のセルにのみ適用しました）

フィドル

于 2012-07-26T09:52:06.427 に答える
0

いくつかの 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>

以下の結果を確認してくださいここに画像の説明を入力

これに問題がある場合はお知らせください。

于 2012-07-26T10:32:12.277 に答える