Здравствуйте!
Начинающий верстальщик, столкнулся с проблемой, а именно с таблицей в 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 не хочет воспринимать эту таблицу, как мне бы хотелось?
А как это должно выглядеть по задумке? Потому что то, как этот код показывает Firefox, соответствует моим представлениям о том, как это должно выглядеть.
Похоже, Вы что-то недопоняли насчёт "rowspan=0" (судя по их обилию в подряд идущих строчках)...
22-04-2017 12:17:20
Хм... Интересно: с "<!DOCTYPE html>" (HTML5) показывает неправильно (склеивает строчки). Без "<!DOCTYPE html>" (HTML4) - правильно.
Разбираться нет времени - убегать надо, дела зовут.
Вот как вижу во всех браузерах кроме Firefox:
_______________________________________________________________________________
Вот как вижу в Firefox:
_______________________________________________________________________________
Так же можно посмотреть мой codepen, через разные браузеры.
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>состоит из двух столбцов, причём ячейка первого из них (левого) растянута на две строки.
Вторая строка
состоит из двух столбцов - ячейка первого "унаследована" от предыдущей строки, и ячейка правого описана здесь.
Третья строка
состоит из ячейки, растянутой по горизонтали на два столбца и по вертикали - до конца (до низа) таблицы.
В четвёртой строке тоже описана ячейка, растянутая по горизонтали на два столбца и по вертикали - до конца (до низа) таблицы.
Стоп! А где эта ячейка должна размещаться? Начиная от левой границы таблицы? Нет. Сначала в строке располагается ячейка, "унаследованная" от предыдущей строки (согласно её 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
Спасибо, но почему Firefox не нравится rowspan="0" ))