「visibility：hidden;」を設定すると、Google Chromeで表のセル枠が消えるのはなぜですか「国境崩壊：崩壊」

Question

私はCSSを使ってHTMLテーブルをスタイル付けしようとしています。私は、印刷レイアウト（または他のスタイルシート）でその内容が可視でなければならないので、CSSを通して単一セルの内容を隠す能力が必要です。 テーブルには<thead>と<tbody>セクションがあり、それぞれ<tr>、<th>と<td>には境界線が適用されているため、非表示にすると境界線（外側のものでも）が常に表示されます。

私のスタイルシートでは、border-collapse: collapse;と設定し、私はvisibility:hidden;で非表示にしたいセルを非表示にしています。これは、Google Chrome（およびFirefoxのマイナーディスプレイのグリッチを除く）ではほとんど問題なく動作します。幅..）。あなたはこのコードをしようとした場合、それも小さなスペースにまで隠されたすべてのセルを持つ行を崩壊見ることができるように

table.example { 
 
    width:100%; 
 
    border-collapse: collapse; 
 
} 
 

 
table.example td{ 
 
    padding: 2px; 
 
} 
 

 
table.example .number { 
 
    text-align:right; 
 
} 
 

 
table.example .null{ 
 
    visibility:hidden; 
 
} 
 

 
table.example .number.negative{ 
 
    color:red; 
 
} 
 

 
table.example .Date{ 
 
    text-align:center; 
 
} 
 

 
table.example th{ 
 
    background-color: #dedbde; 
 
} 
 

 
table.example, th.example, td.example,.example thead,.example tbody{ 
 
    border: 1px solid #a5a6a5; 
 
} 
 

 
#Demo1 .hideme.Col1, 
 
#Demo1 .hideme.Col2 { 
 
    visibility:hidden; 
 
    border: 0; 
 
} 
 

 
#Demo1 { 
 
    width: 50%; 
 
} 
 

 
.Col1 { 
 
    width: 4%; 
 
} 
 

 
.Col2, .Col3, .Col4 { 
 
    width: 32%; 
 
}

<table class="example" id="Demo1"> 
 
    <thead> 
 
    <tr class=" example"> 
 
     <th class="Col1 example"></th><th class="Col2 example">Title1</th><th class="Col3 example">Title2</th><th class="Col4 example">Title3</th> 
 
    </tr> 
 
    </thead><tbody> 
 
    <tr class="r1 example odd first"> 
 
    <td class="Col1 example"><img src="image.png" alt="test" height="15px" width="15px"></td><td class="Col2 example"><a href="#" class="detaillink">  2865    </a></td><td class="Col3 example Date">10.06.2011</td><td class="Col4 example Date">10.07.2011</td> 
 
    </tr><tr class="r2 example even"> 
 
    <td class="Col1 example"><img src="image.png" alt="test" height="15px" width="15px"></td><td class="Col2 example"><a href="#" class="detaillink">  2864    </a></td><td class="Col3 example Date">10.06.2011</td><td class="Col4 example Date">10.07.2011</td> 
 
    </tr><tr class="r3 example odd"> 
 
    <td class="Col1 example hideme"><img src="image.png" alt="test" height="15px" width="15px"></td><td class="Col2 example hideme"><a href="#" class="detaillink">  2863    </a></td><td class="Col3 example hideme Date">10.06.2011</td><td class="Col4 example hideme Date">10.08.2011</td> 
 
    </tr><tr class="r4 example even"> 
 
    <td class="Col1 example"><img src="image.png" alt="test" height="15px" width="15px"></td><td class="Col2 example"><a href="#" class="detaillink">  2863    </a></td><td class="Col3 example Date">10.06.2011</td><td class="Col4 example Date">10.08.2011</td> 
 
    </tr><tr class="r5 example odd"> 
 
    <td class="Col1 example"><img src="image.png" alt="test" height="15px" width="15px"></td><td class="Col2 example"><a href="#" class="detaillink">  2299    </a></td><td class="Col3 example Date">10.05.2011</td><td class="Col4 example Date">10.06.2011</td> 
 
    </tr><tr class="r6 example even"> 
 
    <td class="Col1 example null"></td><td class="Col2 example null"></td><td class="Col3 example Date null"></td><td class="Col4 example Date null"></td> 
 
    </tr><tr class="r7 example odd"> 
 
    <td class="Col1 example"><img src="image.png" alt="test" height="15px" width="15px"></td><td class="Col2 example"><a href="#" class="detaillink">  1249    </a></td><td class="Col3 example Date">10.03.2011</td><td class="Col4 example Date">10.04.2011</td> 
 
    </tr><tr class="r8 example even"> 
 
    <td class="Col1 example"><img src="image.png" alt="test" height="15px" width="15px"></td><td class="Col2 example"><a href="#" class="detaillink">  1248    </a></td><td class="Col3 example Date">10.03.2011</td><td class="Col4 example Date null"></td> 
 
    </tr><tr class="r9 example odd"> 
 
    <td class="Col1 example"><img src="image.png" alt="test" height="15px" width="15px"></td><td class="Col2 example null"></td><td class="Col3 example Date">10.02.2011</td><td class="Col4 example Date">10.03.2011</td> 
 
    </tr><tr class="r10 example even last"> 
 
    <td class="Col1 example"><img src="image.png" alt="test" height="15px" width="15px"></td><td class="Col2 example"><a href="#" class="detaillink">   563    </a></td><td class="Col3 example Date">10.02.2011</td><td class="Col4 example Date">20.03.2011</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

：私も、この動作の例を作成し

。

この問題は、私の現在のプロジェクトではあまり重要ではありません。ほとんどのユーザーはInternet Explorerを使用しますが、解決策が見つからず、この問題が将来私に影響する可能性があります他の人が既にこの問題にぶつかっていることを確認してください）、なぜこれが起きているのか本当に知りたいです。

Answer 1

アップデート1

あなたのTDは、テキストのみを表示している場合は、この

テキストインデントを試すことができます：-9999px;

ブラウザの互換性についてはわかりませんが、インライン要素にのみ影響するはずです。これで視認性を取り除く必要はありません。

---

このdiv要素は、あなたがあなたの携帯に今持っている要素が含まれており、その唯一のDIVにvisibility:hiddenを設定し、各セル内のdivを置きます。

例

<tr class="r2 example even"> 
    <td class="Col1 example"> 
    <div> 
     what you want to hide here... 
    </div> 
    </td> 
</tr> 

Answer 2

はTRの境界線を設定するだけでなく、tdは私のためにそれを修正するようです。

.collateral-tabs .std tr, 
.collateral-tabs .std td { 
    border: 1px solid #333; 
}