Скругленные углы ячеек таблицы

mirchella · 04.05.2011

Не могу закруглить border для ячеек таблицы. Закругляется только фон ячеек, а бордер остается прямоугольным.

Для левой верхней ячейки таблицы использовала следующие стили:

Код:

background: red; 
border-top-left-radius:7px; 
-moz-border-radius-topleft:7px; 
-webkit-border-top-left-radius:7px; 
behavior:url(js/PIE.htc); 
border:1px solid green;

Snickers · 04.05.2011

что то я не слышал чтобы ячейки закруглялись.
это привилегия блоковых элементов. а ячейка таблицы - не блок.

tigra60 · 04.05.2011

Попробуйте так:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Таблица</title>
<style type="text/css">
table {
	background:green;
	border-top-left-radius:7px;
	border-spacing:1px;
}
td {
	padding:10px;
	background:#FFCC99;
}
td.left {
	border-top-left-radius:7px;
}
</style>
</head>

<body>
<table>
	<tr>
		<td class="left">Cell 1-1</td>
		<td>Cell 1-2</td>
		<td>Cell 1-3</td>
	</tr>
	<tr>
		<td>Cell 2-1</td>
		<td>Cell 2-2</td>
		<td>Cell 2-3</td>
	</tr>
</table>
</body>
</html>

получится вот такое:

надеюсь, идея понятна?

artvor96 · 09.05.2011

tigra60, а почему код невалидный? и здесь и в этой теме

tigra60 · 09.05.2011

валидатор ругается на стили CSS-3. Возможно, есть способ указать, что стили именно CSS-3, я этим вопросом пока не занимался.

mirchella · 12.05.2011

tigra60, спасибо!

Скругленные углы ячеек таблицы

mirchella

New Member

Snickers

Быдлокодер

tigra60

Спасатель

artvor96

Well-Known Member

tigra60

Спасатель

mirchella

New Member

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей