• Страница 1 из 2
  • 1
  • 2
  • »
Модератор форума: dotbot  
Края у таблицы
alex6859
Сообщений: 872
Репутация: 145

Сообщение # 1 | 21:25:58
Как можно сделать, чтобы края у таблицы были не прямоугольными, а немного закруглёнными?

сondor
Сообщений: 4661
Репутация: 1528

Сообщение # 2 | 21:29:30
alex6859, атрибут border-radius используйте в css
brizing
Разработчик
Сообщений: 2556
Репутация: 1091

Сообщение # 3 | 21:29:41
Очень муторно, действительно у таблицы есть закругление фона, но не закругление рамки.
Нужно верстать div'ами.

Так же можно поместить таблицу в такой див:
<div style="border-radius: 5px;"></div>

Читайте книги role.su - Rolesu Authors Workshop.
alex6859
Сообщений: 872
Репутация: 145

Сообщение # 4 | 21:36:59
Цитата ([Бриз)
]Так же можно поместить таблицу в такой див:
Не выходит. Получается обычная таблица.

сondor
Сообщений: 4661
Репутация: 1528

Сообщение # 5 | 21:43:12
Цитата (alex6859)
Не выходит. Получается обычная таблица.


alex6859, на каком сайте если не секрет
alex6859
Сообщений: 872
Репутация: 145

Сообщение # 6 | 21:47:36
Цитата (condor-bird)
на каком сайте если не секрет
Какая разница? http://multinfo.ucoz.ru

сondor
Сообщений: 4661
Репутация: 1528

Сообщение # 7 | 21:49:19
Цитата (alex6859)
Какая разница?


Большая разница) Какую именно таблицу? Где описание материала?
alex6859
Сообщений: 872
Репутация: 145

Сообщение # 8 | 21:52:08
condor-bird, таблица в самом первом материале заключена в дивы, как сказал Бриз, но закругленных краев нет.

сondor
Сообщений: 4661
Репутация: 1528

Сообщение # 9 | 21:59:52
alex6859, если я правильно понял, то найдите стиль в css:

Код
.eBlock {
color: #333;
padding: 10px;
border: 1px solid #DDD;
margin-bottom: 10px;
}


Ну и border-radius: 10px; туда

Добавлено (31 Июл 2013, 21:56:21)
---------------------------------------------
Нет,
Цитата (condor-bird)
если я правильно понял,
не правильно понял.... Это не то...

Добавлено (31 Июл 2013, 21:59:52)
---------------------------------------------
alex6859, у вас там вот такое:

Код
<table style="border-collapse: collapse; width: 100%; background-color: rgb(30, 144, 255); border: 1px solid black; background-image: url(http://multinfo.ucoz.ru/panel/editor/saf/undefined); background-position: initial initial; background-repeat: initial initial;"


Уберите от туда
Код
border-collapse: collapse;


и
Код
background-image: url(http://multinfo.ucoz.ru/panel/editor/saf/undefined);


После добавить туда
Код
border-radius: 6px;


Тогда все будет норм
Сообщение отредактировал condor-bird - Среда, 31 Июл 2013, 22:01:55
alex6859
Сообщений: 872
Репутация: 145

Сообщение # 10 | 21:59:52
Цитата (condor-bird)
не правильно понял.... Это не то...

блин, вот я не знаю, где в CSS класс таблиц.

brizing
Разработчик
Сообщений: 2556
Репутация: 1091

Сообщение # 11 | 22:02:58
alex6859, Вот так заработает:
<div style="overlow: hidden; border-radius: 10px;">таблица</div>
Опять таки, углы не скругляться, а обрежутся.

Читайте книги role.su - Rolesu Authors Workshop.
alex6859
Сообщений: 872
Репутация: 145

Сообщение # 12 | 22:05:40
Теперь - то скругление есть, но рамка выглядеть стала по другому.
Код
<div style="border-radius: 5px;"><table style="width: 100%; background-color: rgb(30, 144, 255); border: 1px solid black;border-radius: 6px; background-position: initial initial; background-repeat: initial initial;" width="" align=""><tbody><tr><td style="border: 1px solid black;"><br></td><td style="border: 1px solid black;"><br></td><td style="border: 1px solid black;"><br></td></tr><tr><td style="border: 1px solid black;"><br></td><td style="border: 1px solid black;"><br></td><td style="border: 1px solid black;"><br></td></tr><tr><td style="border: 1px solid black;"><br></td><td style="border: 1px solid black;"><br></td><td style="border: 1px solid black;"><br></td></tr></tbody></table></div>

Добавлено (31 Июл 2013, 22:03:55)
---------------------------------------------
[Бриз], попробую

Добавлено (31 Июл 2013, 22:05:40)
---------------------------------------------

Цитата (|Бриз|)
Опять таки, углы не скругляться, а обрежутся.
Но здесь на форуме, при оформлении поста, рамки красиво выглядят закруглёнными.

Ljubasha
Сообщений: 834
Репутация: 157

Сообщение # 13 | 22:09:56
Ещё бы display: blockж добавить там где надо и все ок.
brizing
Разработчик
Сообщений: 2556
Репутация: 1091

Сообщение # 14 | 22:19:02
alex6859, Здесь div-ная верстка плюс table-ичный скелет. Закругления на дивах, а таблица тут только формирует основные области.

Вот дивная таблица с закруглениями:

Цитата
<style>
div {
width: 33%;
height: 50px;
float: left;
border: 1px solid black;
}
</style>

<div style="border-radius: 15px 0 0 0;">1</div>
<div>2</div>
<div style="border-radius: 0 15px 0 0;">3</div>

<div>4</div>
<div>5</div>
<div>6</div>

<div style="border-radius: 0 0 0 15px;">7</div>
<div>7</div>
<div style="border-radius: 0 0 15px 0;">9</div>

Добавлено (31 Июл 2013, 22:19:02)
---------------------------------------------
Мой пример быстрее всего тут посмотрите:
http://xhtml.ru/instr/html_editor/

Весь скопировать и вставить в этот редактор.


Читайте книги role.su - Rolesu Authors Workshop.
alex6859
Сообщений: 872
Репутация: 145

Сообщение # 15 | 22:20:05
Цитата ([Бриз)
]Вот дивная таблица с закруглениями:
От этого кода сайт аж скрючило. Ладно, спасибо всем.

  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск:
Telegram
Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!