web-dev-qa-db-ja.com

htmlテーブルのセル間のスペースを削除する方法

Table1HeaderとTable2Headerの間の空白を削除しようとしています。 border：0px、padding：0px、border-spacing：0pxを試しました。スタイル。 FirefoxとOperaは、ボーダー間隔のスタイルがユーザーエージェントスタイル（2px）によって上書きされることを教えてくれます。ブラウザにスタイルシットを使用させるにはどうすればよいですか？

http://jsfiddle.net/cdjDR/2/

<table class="tableGroup">
    <tbody>
        <tr>
            <td>
                <table>
                    <tbody>
                        <tr class="tableHeader">
                            <td><span class="tableHeader"><label>Table1Header</label></span>

                            </td>
                        </tr>
                        <tr class=" tableData">
                            <td>
                                <div class="ui-datatable">
                                    <div>
                                        <table>
                                            <thead>
                                                <tr>
                                                    <th>
                                                        <div><span><span class="ui-header-text">Table1Col1</span></span>
                                                        </div>
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td><span>2</span>

                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td>
                <table>
                    <tbody>
                        <tr class="tableHeader">
                            <td><span class="tableHeader"><label>Table2Header</label></span>

                            </td>
                        </tr>
                        <tr class="tableData">
                            <td>
                                <div class="ui-datatable">
                                    <div>
                                        <table>
                                            <thead>
                                                <tr>
                                                    <th>
                                                        <div><span><span class="ui-header-text" >Table2Col1</span></span>
                                                        </div>
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td><span>12345</span>

                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

span.tableHeader > label {
    display: inline-block;
    float:left;
    line-height:30px;
    padding-left:10px;
    color: #202020;
    font-size: 13px;
}
tr.tableHeader {
    background-color: #EEEEEE;
}
table.tableGroup, table.tableGroup > tr > td > table {
    border-spacing: 0px;
}
table.tableGroup div.ui-datatable th > div > span >span.ui-header-text {
    color: #808080;
    font-size: 11px;
}
table.tableGroup td, table.tableGroup th {
    padding: 0px;
    border: 0px;
}
htmlcsshtml-tableborder-spacing
7
user3193136

ブラウザはあなたのborder-spacingスタイルは、ユーザーエージェントのスタイルシートによって上書きされます。代わりに、継承は発生しませんであることを示している可能性があります。これは単にsomeスタイルシートが要素のプロパティを設定するという事実によって引き起こされます。

ルールが内部のtable要素に適用されない理由は、どのセレクターとも一致しないためです。セレクター

table.tableGroup > tr > td > table

tr要素がtableの子であるように見えても、子になることはないため、一致しません。 HTML構文では、開始タグと終了タグが欠落している場合でも、間にtbody要素があります。次のセレクターが一致します。

table.tableGroup > tbody > tr > td > table

もちろん、すべてのtable要素をルールでスタイル設定する場合は、単なるtableセレクターでも同様に機能します。

1
Jukka K. Korpela

単にborder-collapse: collapse;を使用することも、border-spacing: 0;でも問題ありません。

table { /* Will apply to all tables */
    border-spacing: 0;
    /* OR border-collapse: collapse; */
}

デモ

単純な要素セレクターを使用して、useragentスタイルシートを簡単にオーバーライドできます。

スタイルを正規化したい場合は、 CSSリセット を使用する必要があります

class.tableGroupとその下にネストされたtableでテーブルをターゲットにしているので、私には汚いように見えるセレクターに来ます

table.tableGroup, table.tableGroup > tr > td > table {
    border-spacing: 0px;
}

だからあなたはよりよく使う

table.tableGroup, 
table.tableGroup table {
   border-spacing: 0;
}
16
Mr. Alien

追加する必要があります（border = "0" cellpadding = "0" cellspacing = "0"）すべてのテーブルタグにテーブルトリビュート

例

<table border="0" cellpadding="0" cellspacing="0">

*クラスの例*

<table border="0" cellpadding="0" cellspacing="0"  class="tableGroup">
4
fahd4007

これを試して

table {
    border-spacing:0px; 
}

cssを使用して動作します

3
Shail Paras