2

次のドキュメントを参照してください。

<table>
  <tr>
    <td>
      <p>foo bar baz</p>
    </td>
  </tr>
</table>

この：

td {
  padding: 10px;
  border-bottom: 1pt solid gray;
}

その結果、次のような結果になります

HTML スニペットの結果

ルールは常にテーブル セルの幅です。ルールを小さくする (水平方向のスペースを少なくする) CSS/HTML の方法はありますか?

ルールは、セル幅よりも小さい特定のサイズにする必要があります。これはどのように見えるべきかです（要点を理解していただければ幸いです-もちろん、ダブルダッシュは簡単です）：

   123.44
  2312.49
 --------
    12.12
  1231.44
 ========
  1234.33
4

3 に答える 3

3

下の境界線は？の幅よりも短くする必要があるということtdですか？その場合、これは不可能ですが、境界線を表す要素を追加して、その要素の幅を100％より短くすることができます。技術的にはアドバイスしますが、同じことを行うことhrがdivでき、おそらく理解しやすいでしょう。

HTML

<table>
  <tr>
    <td>
      <p>foo bar baz</p>
      <div style="width:75%;border-bottom:1px solid #000;"> </div>
    </td>
  </tr>
</table>

ライブデモ
http://jsfiddle.net/Zs9dG/

于 2013-02-04T10:05:09.460 に答える
1

あなたはそれをhtmlコードで管理することができます、さもなければそれがはるかに便利であるulとliを使用してください。

   <table>
      <tr>
        <td>
          <p>123.44</p>
        </td>
      </tr>
      <tr>
        <td>
          <p>12312.49</p>
        </td>
      </tr>
      <tr>
        <td>
          <p> -------- </p>
        </td>
      </tr>
      <tr>
        <td>
          <p>12.12</p>
        </td>
      </tr>
      <tr>
        <td>
          <p>1231.44</p>
        </td>
      </tr>
      <tr>
        <td>
          <p> ======== </p>
        </td>
      </tr>
      <tr>
        <td>
          <p> 1234.33 </p>
        </td>
      </tr>
    </table>
于 2013-02-04T10:05:02.793 に答える
1

表の各セルに段落を配置する場合は、その上に境界線を配置してみませんか?

td > p {
    display: inline;
    border-bottom: 1pt solid gray;
}

<p>を toに設定するdisplay: inlineと、ボーダーはその中のコンテンツと同じ幅になります。次に、表のセルに水平方向のパディングを追加すると、目的の効果が得られるはずです。

于 2013-02-04T10:03:14.800 に答える