Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: возможно как то просто сделать такую таблицу (как на скрине)

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
Поиск в теме | Версия для печати
3d_killer
Отправлено: 06 Июля, 2014 - 17:05:10
Post Id



Участник


Покинул форум
Сообщений всего: 1916
Дата рег-ции: Апр. 2011  
Откуда: Ростов-на-Дону


Помог: 21 раз(а)
CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. .catalog_table{width:100%; border-collapse:collapse;
  3.     border-spacing: 1px;
  4.     border-width: 1px;}
  5. .catalog_table td{   border-color: #c4c4c4;
  6.    border-style: solid;
  7.     border-width: 1px;
  8.     padding: 5px;}
  9. .catalog_table .zag{ background:#707070;}
  10.  

CODE (html):
скопировать код в буфер обмена
  1.  
  2. <table class="catalog_table">
  3.   <tr>
  4.     <td class="zag">&nbsp;</td>
  5.     <td class="zag">&nbsp;</td>
  6.     <td class="zag">&nbsp;</td>
  7.     <td class="zag">&nbsp;</td>
  8.     <td class="zag">&nbsp;</td>
  9.   </tr>
  10.   <tr>
  11.     <td>&nbsp;</td>
  12.     <td>&nbsp;</td>
  13.     <td>&nbsp;</td>
  14.     <td>&nbsp;</td>
  15.     <td>&nbsp;</td>
  16.   </tr>
  17.   <tr>
  18.     <td>&nbsp;</td>
  19.     <td>&nbsp;</td>
  20.     <td>&nbsp;</td>
  21.     <td>&nbsp;</td>
  22.     <td>&nbsp;</td>
  23.   </tr>
  24.   <tr>
  25.     <td>&nbsp;</td>
  26.     <td>&nbsp;</td>
  27.     <td>&nbsp;</td>
  28.     <td>&nbsp;</td>
  29.     <td>&nbsp;</td>
  30.   </tr>
  31.   <tr>
  32.     <td>&nbsp;</td>
  33.     <td>&nbsp;</td>
  34.     <td>&nbsp;</td>
  35.     <td>&nbsp;</td>
  36.     <td>&nbsp;</td>
  37.   </tr>
  38. </table>
  39.  

Внутри заголовков не знаю как сделать белый край
Прикреплено изображение
Untitled-2.jpg
 
My status
 Top
IllusionMH
Отправлено: 06 Июля, 2014 - 17:12:20
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
3d_killer, первое что пришло в голову box-shadow + inset . Сейчас еще посмотрю
 
 Top
DelphinPRO
Отправлено: 06 Июля, 2014 - 17:26:57
Post Id



Активный участник


Покинул форум
Сообщений всего: 7187
Дата рег-ции: Февр. 2012  


Помог: 353 раз(а)
outline тоже можно позиционировать смещением. но вроде не кроссбраузерно.


-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
IllusionMH
Отправлено: 06 Июля, 2014 - 17:35:05
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
3d_killer, с box-shadow какой-то косяк возникает с последним элементом - серая граница в 2 пикселя получается, и так и не вышло ее красиво убрать.
Но добавив немножко легкой наркомании можно получить похожыий результат *facepalm*
CODE (CSS):
скопировать код в буфер обмена
  1. .catalog_table {
  2.     width:100%;
  3.     border-collapse:separate;
  4.     border-spacing: 1px;
  5.     background: #707070;
  6. }
  7. .catalog_table td {
  8.     background: white;
  9.     padding: 5px;
  10. }
  11. .catalog_table .zag {
  12.     border: 1px solid white;
  13.     background:#707070;
  14. }

для случая когда фон сплошной (white) а границы и фон заголовков #707070

upd. Фух, отпустило Улыбка
Можно сделать и через внутреннюю тень и без косяка с последней ячейкой
CODE (CSS):
скопировать код в буфер обмена
  1. .catalog_table{
  2.     width:100%;
  3.     border-collapse:collapse;
  4.     border: 1px solid #707070;
  5. }
  6. .catalog_table td{
  7.     padding: 5px;
  8.     border: 1px solid #707070;
  9. }
  10. .catalog_table .zag{
  11.     background:#707070;
  12.     box-shadow: inset 0 0 0 1px white;
  13.     border-right: none;
  14.     border-bottom: none;
  15. }

(Отредактировано автором: 06 Июля, 2014 - 17:42:59)

 
 Top
3d_killer
Отправлено: 06 Июля, 2014 - 17:56:19
Post Id



Участник


Покинул форум
Сообщений всего: 1916
Дата рег-ции: Апр. 2011  
Откуда: Ростов-на-Дону


Помог: 21 раз(а)
спасибо за ответы, жаль box-shadow не везде работает
(Добавление)
хотелось бы IE8 обхватить
 
My status
 Top
IllusionMH
Отправлено: 06 Июля, 2014 - 17:59:57
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
3d_killer, пользователи ие8 обойдутся без рамки.
Или вариант с фоном пробовать, но я его не проверял в фф и те.
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB