VPF::Рамка таблицы + CSS - Форум программистов

SeregaLBN

Дата 21.3.2006, 13:17 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 178
Регистрация: 3.10.2003
Где: Киев

Репутация: нет
Всего: нет

Привет.
Есть простая табличка.
И хочу чтобы верхняя рамка у таблицы была определённого цвета и ширины.
Всё хорошо под IE, а вот под Firefox цвет рамки неприменяется.
Поскажите как и что подправить.

Код


<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <link rel="stylesheet" type="text/css" href="main.css" media="all" />
</head>
<body>
   <table width="100%" border='1' class='TABLE_test'>
      <tbody>
         <tr>
            <td class="TD_head" colspan='2'>
               1
            </td>
         </tr>
         <tr>
            <td class='TD_body'>
               2
            </td>
            <td class='TD_body'>
               3
            </td>
         </tr>
      </tbody>
   </table>
   </div>
</body>
</html>

и стили к ней

Код


.TABLE_test {
   border-top-width: 10px;
   border-left-width: 0px;
   border-right-width: 0px;
   border-bottom-width: 0px;
   border-color: #600000;
}
.TD_head {
   font-family: Arial;
   font-size: 37pt; 
   border-left-width: 10px;
   border-right-width: 10px;
   text-align: center;
   
   border-top-width: 0px;
   border-bottom-width: 0px;
   border-style: solid;
   border-color: #600000;
}
.TD_body {
   border-top-width: 1px;
   border-bottom-width: 1px;
   border-left-width: 1px;
   border-right-width: 1px;
   vertical-align : middle;
   padding-top: 0px;
   padding-bottom: 0px;
   padding-left: 6px;
   padding-right: 6px;
   font-family: "Arial Cyr";
   border-style: solid;
   border-color: #600000;
   text-align: left;
}

R.M.

Дата 21.3.2006, 13:27 (ссылка)

(нет голосов)

Загрузка ...

Анархист

Профиль
Группа: Участник
Сообщений: 2164
Регистрация: 8.6.2005
Где: Питер

Репутация: 9
Всего: 30

Код


.TABLE_test {
border-top: 10px solid #600000;
border-bottom: 0px;
border-left: 0px;
border-right: 0px;
}
.TD_head {
   font-family: Arial;
   font-size: 37pt; 
   border-left-width: 10px;
   border-right-width: 10px;
   text-align: center;
   
   border-top-width: 0px;
   border-bottom-width: 0px;
   border-style: solid;
   border-color: #600000;
}
.TD_body {
   border-top-width: 1px;
   border-bottom-width: 1px;
   border-left-width: 1px;
   border-right-width: 1px;
   vertical-align : middle;
   padding-top: 0px;
   padding-bottom: 0px;
   padding-left: 6px;
   padding-right: 6px;
   font-family: "Arial Cyr";
   border-style: solid;
   border-color: #600000;
   text-align: left;
}

--------------------

Помнишь как бодрили дискотеки прошлого века? Теперь стул, компьютер и нету человека.

Nokia LifeStyle - Всё для смартфонов Nokia

SeregaLBN

Дата 21.3.2006, 13:50 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 178
Регистрация: 3.10.2003
Где: Киев

Репутация: нет
Всего: нет

Сенкью вери мач, Куксикус!

ZorGG

Дата 24.3.2010, 23:00 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 38
Регистрация: 24.3.2010
Где: Мир сей.

Репутация: нет
Всего: нет

Я лично пользуюсь таким решением:

Код


<table width="100%" border="0" bgcolor="#FF6666"><tr><td>

 <table width="100%" border="0" bgcolor="#FF9999" bordercolor="#FF6666" bordercolordark="#FF6666" bordercolorlight="#FF6666"><tr><td>
  content
 </td></tr></table>

</td></tr></table>

То есть создаю таблицу в таблице и внешнюю заливаю цветом бордюра а внутреннюю цветом таблицы.
Жду критики.

Это сообщение отредактировал(а) ZorGG - 25.3.2010, 00:13

SelenIT

Дата 25.3.2010, 04:42 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

ZorGG, а на бумаге пишете ручкой с пером, которое надо макать в чернильницу? А ездите на телеге с лошадью и деревянными колесами? ;)

Да, решение железобетонное и работает даже в NN3.0 и HTML-смотрелке из TheBat 2. Но это музейный экспонат года так 97-го. Все современные браузеры умеют делать тонкие рамки средствами CSS:

table { border-collapse: collapse; }
td { border: /* какой угодно */ }

И таблицы можно использовать исключительно по прямому назначению - структурировать табличные данные.

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

ZorGG

Дата 25.3.2010, 10:44 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 38
Регистрация: 24.3.2010
Где: Мир сей.

Репутация: нет
Всего: нет

Цитата

Все современные браузеры умеют делать тонкие рамки средствами CSS:

table { border-collapse: collapse; }
td { border: /* какой угодно */ }

Возможно я ошибаюсь, но вебдизайн, на сколько я помню должен быть более-мение универсальным + к этому Опера не поганит такую систему своим непониманием bordercolor, bordercolorlight, bordercolordark.

А насчёт CSS я ниего против не имею и border-collapse так-же использую, но редко.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »