Блог

Главная - Вопросы по программированию - Проблема со строками между ячейками таблицы HTML, отображаемыми на iOS

Проблема со строками между ячейками таблицы HTML, отображаемыми на iOS

#html #css #ios #html-table

#HTML #css — код #iOS #html-таблица

Вопрос:

У меня есть таблица (одна строка, показанная на изображении), которая имеет прямоугольную тень и все границы, установленные на none. К сожалению, на iOS вы можете видеть эти очень светлые линии между ячейками таблицы (три в ряд).

Они могут исходить из тени ящика, но я не уверен, почему между буквами s вообще есть пробел!

Между ячейками таблицы появляются светлые линии.

 /* For spacing between rows */

table {
    border-collapse: seperate;
    border-spacing: 0 15px;
}


/* For rounded edges on each row */

td:first-child {
    border-radius: 21px 0 0 21px;
    -moz-border-radius: 21px 0 0 21x;
    -webkit-border-radius: 21px 0 0 21px;
    width: 10%;
}


/* For rounded edges on each row */

td:last-child {
    border-radius: 0 21px 21px 0;
    -moz-border-radius: 0 21px 21px 0;
    -webkit-border-radius: 0 21px 21px 0;
}

td {
    background: var(--main-bg);
    padding: 20px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
}

Заранее спасибо!

Комментарии:

1. Линии на самом деле являются тенями , на которые наносятся td тени . И между клетками нет свободного пространства. Это из-за различий z-index в каждой ячейке, т.Е. Они перекрываются.

2. Я вижу! Это имеет смысл, спасибо. Можно ли установить z-индекс на ту же величину, чтобы избавиться от теней, или я должен, например, поменять местами z-индексы справа налево?

3. Применение того же z-index самого не сработает. Вместо этого вы можете добавить тень <table> . Таким образом, не будет никаких очередей.