Проблемы с таблицами.

mefxl · №1

Здравствуйте!
Начинающий верстальщик, столкнулся с проблемой, а именно с таблицей в Firefox. Создав сайт начал просматривать его на всех браузерах, и почему то только в Firefox таблица ломается.

Выделить код

Код:

<table class="section-services">
    <tbody>
        <tr>
            <td rowspan="2" width="110">
                <img src="images/services-3.png" alt="services-1" width="77" height="44" />
            </td>
            <td>Landing-page</td>
        </tr>
        <tr>
            <td><span>От транс</span></td>
        </tr>
        <tr>
            <td rowspan="0" colspan="2">Landing - современный формат сайта.</td>
        </tr>
        <tr>
            <td rowspan="0" colspan="2">Срок в срок</td>
        </tr>
        <tr>
            <td rowspan="0" colspan="2">
                <a href="#">Подробнее</a>
            </td>
        </tr>
    </tbody>
</table>

Выделить код

Код:

.section-services img {
    display: block;
}

.section-services tr:nth-child(1),
.section-services tr:nth-child(2) {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

.section-services tr:nth-child(2) {
    color: #fff;
}

.section-services tr:nth-child(3) td {
    padding: 15px 0;
    font-weight: normal;
}

.section-services tr:nth-child(4) {
    text-transform: uppercase;
    font-weight: bold;
}

.section-services tr:nth-child(5) td {
    padding-top: 13px;
    text-align: right;
}

Сначала думал, что проблема в joomla, но после того как взял html код с css создав отдельно страницы, все было точно так же, ему явно не нравится объединение ячеек.
Почему только Firefox не хочет воспринимать эту таблицу, как мне бы хотелось?

yup · №2

А как это должно выглядеть по задумке? Потому что то, как этот код показывает Firefox, соответствует моим представлениям о том, как это должно выглядеть.
Похоже, Вы что-то недопоняли насчёт "rowspan=0" (судя по их обилию в подряд идущих строчках)...

Добавлено 22-04-2017 12:17:20
Хм... Интересно: с "<!DOCTYPE html>" (HTML5) показывает неправильно (склеивает строчки). Без "<!DOCTYPE html>" (HTML4) - правильно.
Разбираться нет времени - убегать надо, дела зовут.

Отредактировано yup (22-04-2017 12:18:05)

mefxl · №3

Вот как вижу во всех браузерах кроме Firefox:

_______________________________________________________________________________
Вот как вижу в Firefox:

_______________________________________________________________________________

Так же можно посмотреть мой codepen, через разные браузеры.

https://codepen.io/mefxl/pen/mmJMMw

Отредактировано mefxl (22-04-2017 12:38:29)

yup · №4

1. Без видимых границ между ячейками разбираться с проблемами таблиц - занятие безнадёжное.

2. Как я уже сказал, Firefox по-разному отображает эту таблицу в зависимости от того, начинается файл со строки "<!DOCTYPE ...>" или нет. codepen.io не позволяет добраться до этой части структуры странички.

3. В чём смысл (планируемый) наличия атрибута rowspan="0" сразу у такой кучи ячеек? Тем более, что, судя по картинкам, растягивать ячейки на всю высоту таблицы не требуется вовсе, а значит, он там вообще ни разу не нужен.

4. Попробуем подумать, как должна сверстаться таблица в том виде, как она записана в коде.
Первая строка

Выделить код

Код:

<tr>
      <td rowspan="2" width="110">
        <img src="images/services-3.png" alt="services-1" width="77" height="44" />
      </td>
      <td>Landing-page</td>
    </tr>

состоит из двух столбцов, причём ячейка первого из них (левого) растянута на две строки.
Вторая строка

Выделить код

Код:

<tr>
      <td><span>От транс</span></td>
    </tr>

состоит из двух столбцов - ячейка первого "унаследована" от предыдущей строки, и ячейка правого описана здесь.
Третья строка

Выделить код

Код:

<tr>
      <td rowspan="0" colspan="2">Landing - современный формат сайта.</td>
    </tr>

состоит из ячейки, растянутой по горизонтали на два столбца и по вертикали - до конца (до низа) таблицы.
В четвёртой строке тоже описана ячейка, растянутая по горизонтали на два столбца и по вертикали - до конца (до низа) таблицы.

Выделить код

Код:

<tr>
      <td rowspan="0" colspan="2">Срок в срок</td>
    </tr>

Стоп! А где эта ячейка должна размещаться? Начиная от левой границы таблицы? Нет. Сначала в строке располагается ячейка, "унаследованная" от предыдущей строки (согласно её rowspan="0"). Причем занимает эта ячейка аж два столбца (colspan="2"). И только начиная с третьего столбца браузер может расположить описанную в этом блоке <tr> ячейку - абсолютно аналогично тому, как сбоку к "унаследованной" ячейке первой строки была пририсована ячейка второй строки.
С пятой строкой - то же самое: из-за rowspan="0" в четвёртой строке она наследует ячейки и третьей, и четвёртой строк, а описанная в пятом блоке <tr> ячейка добавляется к ним, сдвигаясь, таким образом, ещё дальше вправо.

А теперь убираем нахрен все эти rowspan="0" и получаем нормальную таблицу:

Выделить код

Код:

<table class="section-services">
  <tbody>
    <tr>
      <td rowspan="2" width="110">
        <img src="images/services-3.png" alt="services-1" width="77" height="44" />
      </td>
      <td>Landing-page</td>
    </tr>
    <tr>
      <td><span>От транс</span></td>
    </tr>
    <tr>
      <td colspan="2">Landing - современный формат сайта.</td>
    </tr>
    <tr>
      <td colspan="2">Срок в срок</td>
    </tr>
    <tr>
      <td colspan="2">
        <a href="#">Подробнее</a>
      </td>
    </tr>
  </tbody>
</table>

Отредактировано yup (23-04-2017 02:55:03)

mefxl · №5

yup
Спасибо, но почему Firefox не нравится rowspan="0" ))

Полезная информация

№122-04-2017 11:42:44