HTMLのテーブルからボーダーを完全に削除する方法

私の目的は、フォトフレームのようなHTMLページを作ることです。つまり、4枚の写真で囲まれた真っ白なページを作りたいのです。

これが私のコードです。

<table>
    <tr>
        <td class="bTop" colspan="3">
        </td>
    </tr>
    <tr>
        <td class="bLeft">
        </td>
        <td class="middle">
        </td>
        <td class="bRight">
        </td>
    </tr>
    <tr>
        <td class="bBottom" colspan="3">
        </td>
    </tr>                                                    
</table>

そして、CSSクラスは以下のようになっています。

.bTop
{
    width: 960px;
    height: 111px;
    background-image: url('../Images/BackTop.jpg');
}
.bLeft
{
    width: 212px;
    height: 280px;
    background-image: url('../Images/BackLeft.jpg');    

}

.middle
{
    width: 536px;
    height: 280px;
}

.bRight
{
    width: 212px;
    height: 280px;
    background-image: url('../Images/BackRight.jpg');    
}

.bBottom
{        
    width: 960px;
    height: 111px;
    background-image: url('../Images/BackBottom.jpg');       
}

問題は、テーブルのセルとセルの間に薄く白い線が入ってしまうことです。つまり、画像の境界線が連続していないのです。どうすればこのような白いスペースを避けることができますか？

Brian Tompsett - 汤莱恩
編集された質問 7日 11月 2017 в 10:07
プログラミング
html css html-table background-image
16日 4月 2011 в 2:39
1ビュー
ソリューション
<table cellspacing="0" cellpadding="0">

そして、cssでは

table {border: none;}

EDIT: iGELが指摘しているように、この解決策は公式に非推奨となっています（まだ使えますが）ので、もしゼロから始めるのであれば、jnpcl's border-collapseの解決策を使うべきです。

今のところ、私はこの変更を非常に気に入っていません（テーブルをあまり扱わないので）。いくつかの作業が少し複雑になっています。例えば、2つの異なるボーダーを同じ場所に（視覚的に）表示させたい場合、1つはある行の最上部、もう1つは別の行の最下部に表示されます。これらのボーダーは崩れてしまいます（＝片方しか表示されません）。この場合、ボーダーの優先順位はどのように計算されるのか、また、どのようなボーダースタイルが強いのか（ダブルとソリッドなど）を検討する必要があります。

私はこのようにしました。

<table cellspacing="0" cellpadding="0">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>

----------

.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}

さて、ボーダーの折りたたみでは、常にボーダーが1つ削除されてしまうので、これではうまくいきません。何か別の方法でやらなければなりません（もちろん他にも解決策はあります）。一つの可能性はCSS3のbox-shadowを使うことです。

<table class="tab">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>​​​


.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}​

また、ボーダーを1つだけにして、"groove|ridge|inset|outset"のようなボーダースタイルを使うこともできます。しかし、私にとっては、両方の色をコントロールすることができないので、これは最適ではありません。

もしかしたら、ボーダーを折りたたむためのシンプルで素晴らしいソリューションがあるかもしれませんが、私はまだそれを見たことがありませんし、正直なところ、あまり時間をかけていません。もしかしたら誰かが教えてくれるかもしれません。)

Damb
編集した答え 25日 11月 2012 в 9:31
解説 (2)
 
table {
    border-collapse: collapse;
}
Aruna Herath
編集した答え 6日 10月 2018 в 3:46
解説 (0)

私の場合は、テーブルとすべてのセルからボーダーを完全に取り除くために、次のようなことをする必要がありました。この方法では、HTMLを全く変更する必要がないので、私の場合は助かりました。

table, tr, td {
    border: none;
}
解説 (1)