Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Пандель
0 / 0 / 0
Регистрация: 28.10.2016
Сообщений: 2
1

Оборачиваем тег TH в рамку

28.10.2016, 23:46. Просмотров 209. Ответов 2
Метки нет (Все метки)

Доброго времени суток! Уровень владения версткой - 3 дня! Просьба не пинать!

Задача: обернуть в отдельные рамки ячейки "бренд" (теги TH) и "цена" (теги TD с классом PRICE), что бы при этом между ячейками "инфо 1" и "инфо 2" (теги TD с классом INFO1 и INFO2 соответственно) границы не было. Таблица должна занимать всю ширину окна браузера или иметь фиксированный размер ячеек независимо от текста.

Проблема: при использовании селектора Border и его свойства border-collapse: collapse; задание границ для тегов TH делает границы с выездом на соседние теги TD, к которым применен атрибут colspan="2" для склейки ячеек.

Я пробовал решить проблему путем покраски нижней границы INFO1 в белый цвет, но из за этого пропадает верхняя граница PRICE. Не получается сделать селектор PRICE "главнее" INFO1.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table>
    <tr>
        <td colspan="3" rowspan="2">Позиция</td>
        <th>бренд</th>
        <td colspan="2" class="info1">инфо 1</td>
        <th>бренд</th>
        <td colspan="2" class="info1">инфо 1</td>
        <th>бренд</th>
        <td colspan="2" class="info1">инфо 1</td>
    </tr>
    <tr>
        <td colspan="2" class="info2">инфо 2</td>
        <td class="price">цена</td>
        <td colspan="2" class="info2">инфо 2</td>
        <td class="price">цена</td>
        <td colspan="2" class="info2">инфо 2</td>
        <td class="price">цена</td>
    </tr>
</table>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
table {
 
    table-layout: fixed;         /* Фиксированная ширина ячеек */
    border-collapse: collapse;   /* Склеили границы ячеек*/
    width: 100%;                 /* таблица во всю ширину окна*/
}
 
td {
    border: 2px solid black;
}
 
th {
    background-color: lightpink;
    border: 2px solid black;
    width: 12%;
}
 
.info1 {
    border-bottom: 2px solid white; /* таким способом я пытался
    смыть границы между ""инфо 1" и ""инфо 2". Но смылась верхняя
    граница "цена". Какого хера? */
}
 
.price {
    background-color: lightblue;
    border: 2px solid black;
}
0
Миниатюры
Оборачиваем тег TH в рамку   Оборачиваем тег TH в рамку   Оборачиваем тег TH в рамку  

Оборачиваем тег TH в рамку  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
28.10.2016, 23:46
Ответы с готовыми решениями:

CSS при последовательности *тег A тег IMG* добавить content
Здравствуйте многоуважаемые форумчане! Нуждаюсь в помощи! Итак вопрос: ...

Зачем тег <code>, если есть тег <pre>?
Доброго времени суток, друзья. Не могу понять зачем тег &lt;code&gt;? Описалово...

Убрать рамку
Помогите, рамка не убирается, пример http://jsfiddle.net/wrr0ag1u/6/

убрать рамку
подскажите как убрать рамку в этом коде.. &lt;CENTER&gt; &lt;INPUT name=s1 size=100...

Убрать рамку
Как убрать рамку только у инпут текст?

2
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2747 / 2311 / 1017
Регистрация: 15.12.2012
Сообщений: 8,572
Записей в блоге: 1
29.10.2016, 01:33 2
Пандель, ну что ж... Какая задача такое и решение...

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        table {
         
            table-layout: fixed;         /* Фиксированная ширина ячеек */
            border-collapse: separate;   /* Склеили границы ячеек*/
            width: 100%;                 /* таблица во всю ширину окна*/
            border-spacing:0
        }
         
        th {
            background-color: lightpink;
            border: 2px solid black;
            width: 12%;
        }
        
        .info1 {
            border-top: 2px solid #000
        }
        
        .info1:last-child, .price:last-child{border-right:2px solid #000}
        
        .info2 {
            border-bottom: 2px solid #000; 
            border-left: 2px solid #000; 
        }
         
        .price, .pos {
            border: 2px solid black;
            border-right:0
        }
        
        .price{background-color: lightblue}
    </style>
</head>
<body>
<table>
    <tr>
        <td class="pos" colspan="3" rowspan="2">Позиция</td>
        <th>бренд</th>
        <td colspan="2" class="info1">инфо 1</td>
        <th>бренд</th>
        <td colspan="2" class="info1">инфо 1</td>
        <th>бренд</th>
        <td colspan="2" class="info1">инфо 1</td>
    </tr>
    <tr>
        <td colspan="2" class="info2">инфо 2</td>
        <td class="price">цена</td>
        <td colspan="2" class="info2">инфо 2</td>
        <td class="price">цена</td>
        <td colspan="2" class="info2">инфо 2</td>
        <td class="price">цена</td>
    </tr>
</table>
</body>
</html>
1
Пандель
0 / 0 / 0
Регистрация: 28.10.2016
Сообщений: 2
29.10.2016, 01:48  [ТС] 3
Супер!
Я даже примерно вкурил как Вы это сделали.
Теперь можно смело продолжать обучение. Спасибо огромное!
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
29.10.2016, 01:48

Введение в рамку картинки
Здравствуйте, очень стало любопытно: Как вместо стандартной рамки, используя...

Как сделать рамку
Как сделать рамку как на ОЗОНЕ?? http://www.ozon.ru

Как сделать рамку
Не могу сделать рамку для &quot;Читайте также&quot; пишу в коде &lt;div id=&quot;spisok&quot;&gt;...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru