Неожиданный интервал границы в таблице HTML - PullRequest
Новая
       4

Неожиданный интервал границы в таблице HTML

0 голосов
/ 11 апреля 2019

Я могу видеть границу между ячейками в таблице, см. Изображения ниже, вы сможете увидеть цвет фона. Я наблюдаю такое поведение на мобильных устройствах, таких как Ipad и вкладка Andriod

Table over the yellow background

Same table over the blue background

сохраните вышеуказанную страницу как index.html, и если вы используете Chrome, то 1. Откройте инструменты отладки. 2. Элемент списка 3. Нажмите на панель инструментов устройства переключения 4. Выберите IPAD и поиграйте с уровнем увеличения, вы сможете увидеть разницу 

<html>
<head>
    sdfsdf
</head>
<body  style="background: #c5c3c8;">
    <style>
        #root-GA-1-GA-1 .objbox table tbody tr.odd_material td {
        background: #3b3f45 ;
        color : #ffffff;
        }
        #root-GA-1-GA-1 .objbox table tbody tr.ev_material td {
        background: #2e3135 ;
        color : #ffffff;
        }
    </style>
    <div id="root-GA-1-GA-1" style="width: 980px; height: 1271px; cursor: default;">
        <div class="objbox" >
            <table cellpadding="0" cellspacing="0" class="obj" style="width: 980px; table-layout: fixed;">
                <tbody>
                    <tr class=" ev_material" style="height: 50px;">
                        <td align="left" valign="middle" class="cell_style0 ">K1</td>
                        <td align="left" valign="middle" class="cell_style0 ">AA</td>
                    </tr>
                    <tr class=" odd_material" style="height: 50px;">
                        <td align="left" valign="middle" class="cell_style0 ">K2</td>
                        <td align="left" valign="middle" class="cell_style0 ">AB</td>
                    </tr>
                    <tr class=" ev_material" style="height: 50px;">
                        <td align="left" valign="middle" class="cell_style0   ">K3</td>
                        <td align="left" valign="middle" class="cell_style0   ">AC</td>
                    </tr>
                    <tr class=" odd_material" style="height: 50px;">
                        <td align="left" valign="middle" class="cell_style0 ">K23</td>
                        <td align="left" valign="middle" class="cell_style0 ">AaC</td>
                    </tr>
                    <tr class=" ev_material" style="height: 50px;">
                        <td align="left" valign="middle" class="cell_style0  ">K334</td>
                        <td align="left" valign="middle" class="cell_style0  ">ACa</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    </div>
</body>

Есть идеи, как избавиться от этих странных линий?

1 Ответ

0 голосов
/ 11 апреля 2019

В идеале вы должны действительно предоставить HTML-код вместе с CSS, это помогает определить, есть ли что-то не так в HTML.

Но если вы используете тег <table>, вам также следует добавить cellspacing="0" cellpadding="0"

Итак, ваш <table> тег должен выглядеть так:

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

EDIT:

Также стоит упомянуть, что CSS сбрасывается, так как разные браузеры и устройства отображаются немного по-разному. Ниже сбрасывается значение <table>, и его дети должны работать, затем вы можете удалить cellspacing="0" cellpadding="0" из тега <table>. 

table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;       
    vertical-align: baseline;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...