8

データを表示するためのhtmlファイルを生成するプログラムを書いています。すべての列を揃える必要があるため、単一の html テーブルを使用しようとしていますが、いくつかの行の間に実線の水平線を入れてデータを分離したいと考えています。を使用してborder-top、border-bottom私が望むものに向かってほとんどの道を歩むことができましたが、これが生成する水平線はしっかりしていません (画像を参照)。

クロムブラウザからの画像

私の質問は次のとおりです。

  1. テーブル内のいくつかの行の間に実線の水平線を表示するにはどうすればよいですか
  2. また、小さなクエリですが、左側の列の行ラベルとデータの間に少しスペースを空けるより良い方法はありますか。現在、空白の列を指定しています。
その画像の背後にある html は次のとおりです。

<html>
<head>
    <meta HTTP-EQUIV="Content-Type" Content="text/html; charset=Windows-1252">
    <style type="text/css">
        tr.border_top td {
            border-top:1pt solid black;
        }
        tr.border_bottom td {
            border-bottom:1pt solid black;
        }
    </style>
</head>
<body bgcolor=white><b>DATA</b></p>
<table>
    <col align="left"></col>
    <col width=20></col>
    <col align="right"></col>
    <col align="right"></col>
    <col align="right"></col>
    <col align="right"></col>
    <tr class="border_top">
        <td><b>XYZ1</b></td>
        <td></td>
        <td>2.120</td>
        <td><span style="color:blue">2.280</span></td>
        <td><span style="color:blue">2.810</span></td>
        <td>3.000</td>
    </tr>
    <tr class="border_bottom">
        <td><b>ABC1</b></td>
        <td></td>
        <td>1.370</td>
        <td><span style="color:blue">1.550</span></td>
        <td>1.690</td>
        <td><span style="color:blue">1.780</span></td>
    </tr>
    <tr>
        <td><b>XYZ2</b></td>
        <td></td>
        <td><span style="color:blue">1.900</span></td>
        <td>1.940</td>
        <td>2.050</td>
        <td><span style="color:blue">2.100</span></td>
    </tr>
    <tr class="border_bottom">
        <td><b>ABC2</b></td>
        <td></td>
        <td><span style="color:blue">1.910</span></td>
        <td>1.950</td>
        <td>2.060</td>
        <td><span style="color:blue">2.100</span></td>
    </tr>
</table>
</body>
</html>
4

2 に答える 2

14

CSSで、デフォルトを削除してセルborder-spacingに追加しますpadding

table { border-spacing:0 }
td { padding:10px; }

JSFiddleデモ

于 2013-06-21T14:41:15.357 に答える
2

たとえば、テーブルにクラスを与えますmytable。次に、CSS で次のようにします。

.mytable {
 border-collapse: collapse;
}

.mytable td {
 padding: .2em;
}

これcollapseにより、セル間のスペースがなくなり、要求どおりに連続した境界線が作成されます。ただし、すべてのテキストが非常に接近しているため、セルを少しパディングすると見栄えが良くなります。

于 2013-06-21T14:52:04.237 に答える