Как убрать пробелы между ячейками в HTML-таблице

Я пытаюсь удалить пустое пространство между Table1Header и Table2Header. Я пробовал границы:0px, отступы: 0px и интервал границы:0px; стили. Firefox и Opera говорят мне, что мой стиль межстрочного интервала переопределяется стилем пользовательского агента (2 пикселя). Как я могу заставить браузер использовать мои стили?

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;
}
Источник

4 ответа

Решение

Браузеры не говорят вам, что ваш border-spacing Стиль переопределяется таблицей стилей агента пользователя. Вместо этого они могут указывать, что наследование не происходит для него. Это просто вызвано тем, что некоторая таблица стилей устанавливает свойство элемента.

Причина, по которой ваше правило не распространяется на внутреннюю table Элемент в том, что он не соответствует ни одному из ваших селекторов. Селектор

table.tableGroup > tr > td > table

не соответствует этому, потому что tr элемент никогда не является потомком table даже если может показаться. По синтаксису HTML, есть промежуточный tbody элемент, даже если его начальный и конечный тег отсутствуют. Следующий селектор будет соответствовать:

table.tableGroup > tbody > tr > td > table

Конечно, простой table селектор тоже сделает эту работу, если вы хотите, чтобы все table элементы, которые будут стилизованы по правилу.

Источник

Вы можете просто использовать border-collapse: collapse; или даже border-spacing: 0; Это хорошо

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

демонстрация

Вы можете легко переопределить таблицу стилей useragent с помощью простого селектора элемента.

Если вы хотите нормализовать стили, вы должны использовать CSS Reset

Прихожу к вашему селектору, который мне кажется грязным, так как вы нацеливаетесь на стол с class.tableGroup и table вложенный под этим

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

Так что тебе лучше использовать

table.tableGroup, 
table.tableGroup table {
   border-spacing: 0;
}
Источник

Вам нужно добавить (border="0" cellpadding="0" cellspacing="0") Табличные данные в каждом теге таблицы

пример

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

*пример с вашими классами *

<table border="0" cellpadding="0" cellspacing="0"  class="tableGroup">
Источник

Попробуй это

table {
    border-spacing:0px; 
}

работает с использованием CSS

Источник
Другие вопросы по тегам