4

人のリストを表示する HTML テーブルがあります。行ごとに、異なるプログレスバーのような背景が必要です。何かのようなもの

<table>
  <tr class="progress-full">...</tr>
  <tr class="progress-half">...</tr>
  <tr class="progress-quarter">...</tr>
</table>

最初の行の背景全体が色付き、秒の半分、最後の行の 1/4 (クラスを使用するか、CSS でパーセンテージを直接使用)。

幅のある背景 (ここのように) を使用しようとしましたが、成功しませんでした。div を tr で囲むことはできますか? HTMLコードを調べると（例：クロムを使用）、divがテーブルの外にあるようです。

<table style="width: 300px;">
      <tr style="width: 75%; background: rgb(128, 177, 133);">
        <div style="width: 300px;">...</div>
      </tr>
      <tr style="width: 50%; background: rgb(128, 177, 133);">
        <div style="width: 300px;">...</div>
      </tr>
</table>

それとも別の方法ですか？

4

5 に答える 5

5

::beforeCSSまたは::after 疑似要素を使用すると、テーブルに余分なマークアップを追加することを避けることができます。テーブルの各行に透明な背景を与え、疑似要素に必要な幅を与えることができます。

jsfiddleの例を次に示します。

ここに画像の説明を入力

HTML :

<table>
    <tr class="progress-full">
        <td>Row 1 Col 1</td>
    </tr>
    <tr class="progress-quarter">
        <td>Row 2 Col 1</td>
    </tr>
    <tr class="progress-half">
        <td>Row 3 Col 1</td>
    </tr>
</table>

CSS :

td { padding: 10px; }

tr.progress-full td:first-child,
tr.progress-half td:first-child,
tr.progress-quarter td:first-child {
    position: relative;
}
tr.progress-full td:first-child::before,
tr.progress-half td:first-child::before,
tr.progress-quarter td:first-child::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: red;
    z-index: -1;
}

tr.progress-full td:first-child::before {
    width: 100%;
}
tr.progress-half td:first-child::before {
    width: 50%;
}
tr.progress-quarter td:first-child::before {
    width: 25%;
}

テーブル構造の可変性に応じて、この CSS をスリム化できます。tdそれぞれの最初の内側にスタイルを適用しましたtr。プログレス バーを複数tdの にまたがる必要がある場合は、100% より大きい幅を使用します。

于 2013-04-18T15:14:59.737 に答える
1

単に div またはその他の適切なコンテナーを tds 内に配置して、それらに幅と背景色を割り当ててみませんか?

以下のようなもの：

<table style="width: 300px;">
      <tr>
          <td>
               <div  class="progress-full" >
                   ...
               </div>
          </td>
      </tr>
      <tr>
          <td >
                <div class="progress-quarter" >
                    ...
                </div>
          </td>
      </tr>
</table>

このデモを見る

于 2013-04-18T14:34:27.947 に答える
1

パーセンテージ幅を ではなく に置きdivますtr（また、 s を逃しましたtd）

http://jsfiddle.net/WmESh/3/

<table style="width: 300px;">
  <tr>
      <td>
        <div style="width: 75%; background: rgb(128, 177, 133); overflow:visible;">
            <div style="width:300px;">
                ... 
            </div>        
        </div>
      </td>
  </tr>
  <tr>
      <td>
        <div style="width: 50%; background: rgb(128, 177, 133); overflow:visible;">
            <div style="width:300px;">
                ... testing sdfsdfsdfsd sdfsdsdf sdf sdfsd fsd fsd fsdfsdff sdfsdfsd
            </div>
         </div>
      </td>
  </tr>
</table>

コンテンツをテーブルの全幅にしたくない場合は、単に削除してください<div style="width:300px;"></div>

于 2013-04-18T14:38:01.197 に答える
0

@mwczの回答を使用。

HTML の場合 (私は twig を使用していますが、アイデアを得ることができます):

<td class="text-right pie-progress pie-progress-share{{ (count/totalCount)|round }}">{{ count }}</td>

CSS で:

td.pie-progress {
    position: relative;
}
td.pie-progress::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #66afe9;
    z-index: -1;
}
td.pie-progress-green::before {
    /* example of other color */
    background-color: #66af66;
}
td.pie-progress.pie-progress-share1::before {width: 1%;}
td.pie-progress.pie-progress-share2::before {width: 2%;}
...
td.pie-progress.pie-progress-share100::before {width: 100%;}
于 2014-11-19T11:54:18.580 に答える
-1

それを行う方法は、必要な色、必要な色と半分の空白、必要な色と 3/4 の空白でイメージを作成し、bacjground-image を使用することです。

汚いけどシンプル

于 2013-04-18T14:22:27.660 に答える