Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.51/82: Рейтинг темы: голосов - 82, средняя оценка - 4.51
superpuper
102 / 102 / 48
Регистрация: 09.09.2010
Сообщений: 239
1

CSS аналоги colspan и rowspan

11.03.2011, 03:53. Просмотров 15236. Ответов 3
Метки нет (Все метки)

Всем спокойной ночи!
Вот делаю трёхколоночный макет.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="my_table">
    <div class="my_table_row">
      <div id="my_header">хедер</div>
    </div>
    <div class="my_table_row">
      <div id="my_left">левый сайдбар<br>сайдбар<br>сайдбар<br>сайдбар<br>сайдбар<br></div>
      <div id="my_content">контент контент контент контент контент контент контент</div>
      <div id="my_right">правый сайдбар</div>
    </div>
    <div class="my_table_row">
      <div id="my_footer">футер</div>
    </div>
  </div>
</body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#my_table {
    display: table;
    background-color: #ссс;
}
.my_table_row {
    display: table-row;
    background-color: #999;
}
#my_header, #my_left, #my_content, #my_right, #my_footer {
    display: table-cell;
}
#my_header {background-color: #696;}
#my_left {background-color: #f6f;}
#my_content {background-color: #ff3;}
#my_right {background-color: #69f;}
#my_footer {background-color: #6f6;}
Одна проблема — хедер и футер шириной как div#my_left, т.е. как одна ячейка таблицы. Как их можно растянуть на всю ширину? Нужны какие-то CSS аналоги HTML атрибутов colspan и rowspan.
0
Вложения
Тип файла: rar пример.rar (511 байт, 33 просмотров)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
11.03.2011, 03:53
Ответы с готовыми решениями:

Имитация colspan/rowspan при использовании display: table
Как обеденить несколько ячеек по горизонтали и/или вертикали при использовании...

Как менять форму ячеек c соединением, Rowspan и colspan
Ребята, привет. Как менять форму ячеек c соединением? &lt;!DOCTYPE html&gt;...

Установить свойства colspan через css
Какая замена атрибуту colspan есть в css?

Не работает rowspan
Простейший код, а не работает. Подскажите, где я просмотрел ошибку? Почему-то...

Rowspan и высота картинку
Здравствуйте - есть таблица, состоит из 5 строк и трёх колонок При чём...

3
Talik
12 / 12 / 1
Регистрация: 07.02.2009
Сообщений: 269
12.03.2011, 11:24 2
Нужны какие-то CSS аналоги HTML атрибутов colspan и rowspan.
Таких нету, это к сожалению принадлежит таблицам HTML.
1
Rayled
242 / 61 / 4
Регистрация: 23.01.2011
Сообщений: 165
13.03.2011, 07:45 3
Я возможно чего-то не понимаю, но почему бы вот так не сделать, если уж вы хотите с табличным display?
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#my_table {
        display: table;
        background-color: #ссс;
        width:100%;
}
.my_table_row {
        display: table-row;
        background-color: #999;
}
#my_left, #my_content, #my_right {
        display: table-cell;
}
#my_header {background-color: #696;}
#my_left {background-color: #f6f;}
#my_content {background-color: #ff3;}
#my_right {background-color: #69f;}
#my_footer {background-color: #6f6;}
</style>
</head>
<body>
  <div id="my_header">хедер</div>
  <div id="my_table">
    <div class="my_table_row">
      <div id="my_left">левый сайдбар<br>сайдбар<br>сайдбар<br>сайдбар<br>сайдбар<br></div>
      <div id="my_content">контент контент контент контент контент контент контент</div>
      <div id="my_right">правый сайдбар</div>
    </div>
  </div>
  <div id="my_footer">футер</div>
</body>
</html>
1
Hagrael
БТР - мой друг
331 / 273 / 47
Регистрация: 07.01.2010
Сообщений: 1,932
13.03.2011, 10:07 4
На заметку: table-cell не поддерживается IE6 и IE7.
1
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
13.03.2011, 10:07

DIV с заданной шириной в TD с colspan
Мой код: &lt;table style=&quot;width: 500px;&quot;&gt; &lt;tr&gt; &lt;td...

Table с rowspan, выделение с обеих сторон
Добрый день. Есть таблица вида: &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th...

Gulp критичный css, инструмент для генерации критичного css
Пытаюсь закрыть последний пункт в googlespeed: &quot;Удалите код JavaScript и CSS,...


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

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

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