Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Рамка таблицы + CSS

Автор: SeregaLBN 21.3.2006, 13:17

Привет.
Есть простая табличка.
И хочу чтобы верхняя рамка у таблицы была определённого цвета и ширины.
Всё хорошо под 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

Код


.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;
}

Автор: SeregaLBN 21.3.2006, 13:50

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

Автор: ZorGG 24.3.2010, 23:00

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

Код


<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>

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

Автор: SelenIT 25.3.2010, 04:42

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

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

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

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

Автор: ZorGG 25.3.2010, 10:44

Цитата

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

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

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

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