web-dev-qa-db-ja.com

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');       
}

私の問題は、私はテーブルのセル間に細い白線が入っているということです、私は絵の境界が連続的ではないことを意味します。どうすればこれらの空白を避けることができますか？

htmlcsshtml-tablebackground-image
116
yazanpro
<table cellspacing="0" cellpadding="0">

そしてCSSで：

table {border: none;}

EDIT：iGELが指摘したように、この解決法は公式には推奨されていません（それでもまだうまくいきます）。 - コラプスソリューション。

私は実際にはこれまでのところこの変更はかなり嫌いです（それほど頻繁にテーブルを操作しないでください）。それはいくつかのタスクをもう少し複雑にします。例えば。 2つの異なる境界線を同じ場所に（視覚的に）含めたい場合、一方が一方の行のTOP、もう一方の行のBOTTOMです。それらは崩壊します（=それらのうちの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つ削除されるため、これは機能しません。私は他の方法でそれをしなければなりません（もっと多くの解決策があります）。 1つの可能性は、box-shadowでCSS3を使うことです：

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

<style>
.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;}​
</style>

単一の枠線で "groove | ridge | inset | outset"の枠線スタイルを使うこともできます。しかし、私にとってはこれは最適ではありません。なぜなら私は両方の色を制御できないからです。

境界線を折りたたむためのシンプルでいい解決策がいくつかあるかもしれませんが、私はまだそれを見たことがなく、正直なところあまり時間をかけていません。たぶんここの誰かが私/私たちを見せることができるでしょう;）

154
Damb
table {
    border-collapse: collapse;
}
79
drudge

私にとっては、テーブルとすべてのセルから枠線を完全に削除するために、このようなことをする必要がありました。これはHTMLを修正することを全く必要としません、これは私の場合に役に立ちました。

table, tr, td {
    border: none;
}
12
sean.boyer

ブートストラップ環境では、トップの答えはどれも役に立ちませんでしたが、以下を適用するとすべての境界線が取り除かれました。

.noBorder {
    border:none !important;
}

として適用：

<td class="noBorder">
10
Stephan

ブートストラップ環境では、これが私の解決策です。

    <table style="border-collapse: collapse; border: none;">
        <tr style="border: none;">
            <td style="border: none;">
            </td>
        </tr>
    </table>
6
KLMN

これは私にとって問題を解決したものです：

あなたのHTML trタグに、これを追加してください：

style="border-collapse: collapse; border: none;"

これにより、テーブルの行に表示されていた境界線がすべて削除されました。

3
Khozanai