2

CSS プロパティを使用しborder-collapseて、隣接するテーブル セルの境界線を組み合わせることができます。またempty-cells、内容のない表のセルを非表示にするために使用できます。しかし、両方を使用すると、empty-cellsプロパティは効果がなく、空のセルが常に表示されます。少なくとも、複数の隣接する行と列が空の場合でも、それぞれの周りに境界線があります。

次に例を示します。

<!doctype html>
<html>
<head>
<style>
table
{
    border-collapse: collapse;
    border-spacing: 0;
}
th,
td
{
    empty-cells: hide;
    border: solid 1px black;
    padding: 2px 4px;
}
</style>
</head>

<body>
<table>
<tr>
    <th></th>
    <th></th>
    <th>Header 3</th>
</tr>
<tr>
    <th></th>
    <th></th>
    <th>Header 3</th>
</tr>
<tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td></td>
</tr>
<tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td></td>
</tr>
</table>
</body>
</html>

4

2 に答える 2

3

@Boltがこれが発生する理由を説明したので、これに対する解決策を提供します。CSS で以下のスニペットを使用して、空のセルを非表示にすることができます

th:empty, td:empty {
    border: 0;
}

デモ

:empty疑似を使用しborder: 0;て、要素がページに物理的に存在するように設定し、空のセルのスタイルをターゲットにして を に設定するだけbordersです0。

display: none;レイアウトが台無しになるので使用しませんでしtableた。境界線を折りたたんだままにしたい場合は、上記のスニペットを使用するだけで十分です。

注: 使用しているセレクターは一般的なセレクターであり、グローバルにターゲットを設定します。要素を具体的にターゲットにしたい場合は、class代わりに

.table_class_name th:empty, 
.table_class_name td:empty { 
    /* Styles goes here */
}
于 2013-09-12T07:51:01.567 に答える