Граница вокруг тд на мобильном

0

При просмотре на мобильном устройстве существует граница вокруг td class="pos-nochange" хотя граница установлена на 0px. И одна вещь, которую я не понимаю, - это то, почему границы становятся больше или меньше (выглядит довольно незафиксированным), когда пользователь увеличивает масштаб (масштабируется) на своих мобильных устройствах?

<table style="font-family: Open Sans; font-size:12px; border:0px">
    <tbody>
        <tr>
            <td style="background-color: #44445e;" colspan="5" width="300">
                <div id="mleaguetable"></div>
                <div class="live"><span style="font-size:15px">LIVE</span>
                </div>
            </td>
        </tr>
        <tr>
            <th style="background-color: #050528; text-align: center; vertical-align: middle;" colspan="2" height="30"><strong><span style="color: #828293;">Pos</span></strong>
            </th>
            <th style="background-color: #050528; text-align: left; vertical-align: middle;" width="155"><strong><span style="color: #828293; padding: 0 0 0 5px;">Club</span></strong>
            </th>
            <th style="background-color: #050528; text-align: center; vertical-align: middle;" width="50"><strong><span style="color: #828293;">Pld</span></strong>
            </th>
            <th style="background-color: #050528; text-align: center; vertical-align: middle;" width="50"><strong><span style="color: #828293;">Pts</span></strong>
            </th>
        </tr>
        <tr>
            <td style="background-color: #51516d; vertical-align: middle; text-align: right;" width="30" height="30"><span style="color: #ffffff;">1</span>
            </td>
            <td class="pos-nochange" style="background-color: #51516d;"></td>
            <td style="background-color: #51516d; border-right: 1px solid #44445E;"><span style="color: #ffffff; padding: 0 0 0 5px;"><a href="/en-gb/clubs/profile.overview.html/arsenal"><span style="color: #ffffff;">Utd For Utd</span>
                </a>
                </span>
            </td>
            <td style="background-color: #51516d; text-align: center; border-right: 1px solid #44445E;"><span style="color: #ffffff;">5</span>
            </td>
            <td style="background-color: #51516d; text-align: center;"><strong><span style="color: #ffffff;">13</span></strong>
            </td>
        </tr>...</tbody>
</table>
  • 0
    Добавьте border-collapse:collapse style-rule к вашему <table> игнорируйте встроенный стиль, лучше создавайте классы!
  • 0
    попробуйте использовать !important . поместите этот код в конец border:1px solid #e1e1e1 !important;
Показать ещё 2 комментария
Теги:
html-table
mobile

2 ответа

1

Используйте правило стиля border-collapse:

table
{
   border-collapse:collapse;
}

Fiddle Demo

-2

Добавьте в таблицу атрибут border="".

  • 0
    Пожалуйста, обоснуйте голосование против. Человеку, который проголосовал только за то, чтобы тренировать свой палец, позвольте мне процитировать вам кое-что: «В HTML5 атрибут border используется только для указания того, предназначена ли таблица для макета или нет, и единственными допустимыми значениями атрибута являются« »или« 1" .»
  • 0
    Я понизил голосование, потому что это не объясняет, почему граница появляется только на td.pos-nochange . Также гораздо лучше рекомендовать использовать CSS для достижения этой цели, чем рекомендовать атрибуты HTML. CSS был разработан, чтобы отделить дизайн от разметки, и должен использоваться как таковой.
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню