1

ボーダーの折りたたみが適用されたテーブルを作成しました。これは、すべてのテーブルの css の標準です。

私の新しいテーブルでは、行ヘッダーの横にある小さなセクションを色にする必要があります。td タグにはパディングがあるため、div は完全な距離にはなりません。色付きのビットのみを含む新しいテーブル セルを追加する場合も、同じ問題が発生します。

ボーダーを追加すると問題が解決し、ボーダーの崩壊を除いて機能するという考えでした。そのため、ここで問題が示されていますhttp://jsfiddle.net/dtv6P/ここで、1つのセルに特に適用された左の境界線がテーブルの目に見える境界の外にあることがわかります。セルに「border-collapse:separate」を適用しようとしましたが、うまくいかないようです。アイデアはありますか?

edit* 色は、データ行に基づいて配列から選択されます

基本的なアイデア コード (私の実際のコードではありません)

<head>
<style>
td {
border: 2px solid black;
padding: 4px;
}

table {
border-collapse: collapse
}
</style>
</head>

<body>
<table>
<tr><td>1a</td><td>2a</td><td>3a</td></tr>
<tr><td style="border-left: 10px solid;">1b</td><td>2b</td><td>3b</td></tr>
<tr><td>1c</td><td>2c</td><td>3c</td></tr>
</table>
</body>
4

2 に答える 2

0

これは機能するものです...しかし、コンテンツの高さを知る必要があります...あまり便利ではありませんが、機能します。

<table>
<tr><td>1a</td><td>2a</td><td>3a</td></tr>
<tr><td><div class="withColor"></div>1b</td><td>2b</td><td>3b</td></tr>
<tr><td>1c</td><td>2c</td><td>3c</td></tr>
</table>

あなたのCSSで

td {
border: 2px solid black;
padding: 4px;
height:20px;
}
td div.withColor {
position:absolute;
margin:-4px 0 0 -4px;
border-left:4px solid red;
height:28px;
}
于 2013-05-24T13:35:59.767 に答える