Стили таблицы CSS
Мне нужно, чтобы у таблицы были закругленные углы.
Я просто смотрю, как лучше это сделать:
Обычно, когда я делаю div с закругленными углами, я использую 2 div с пустыми комментариями вверху и внизу и применяю к ним CSS для изменения размера и фонового изображения.
Однако таблица имеет внутренние границы, поэтому мне пришлось бы тщательно выровнять вертикальные линии в угловых изображениях bg, чтобы они соответствовали истинным границам ячеек.
Это ясно так далеко?
Так что мне было интересно, как другие подойдут к этому. Я думаю, что лучшее, что я могу сделать, это просто использовать одно полное фоновое изображение фиксированного размера, границы и все остальное и наложить поверх него таблицу без полей. В конце концов, стол всегда будет одного размера.
Кто-нибудь может придумать лучший способ?
@ Дуг Чемберлен - это был не мой вопрос, я просто добавил к нему тег. Я согласен, в основном; я бы проголосовал за закругленные углы с помощью CSS3 для браузера, который его поддерживает, и чтобы остальные видели квадратные углы; в противном случае это слишком много разметки и проблем для такой небольшой выгоды. Но опять же, я не специалист по визуальному дизайну.
Ссылки на ваши изображения мертвы, что делает вопрос неясным.
Да, действительно, с 2008 года я ложился спать несколько раз: - /
Ответы 6
Лучше сделать фоновое изображение только с углами, а не с границами. Примените класс к верхней левой, верхней правой, нижней левой и нижней правой ячейкам, чтобы определить, что следует использовать фоновое изображение углов.
И стилизуйте границы с помощью css. Не помещайте их в фоновое изображение.
В вашем подходе вы всегда будете иметь вертикальные линии на вашем фоновом изображении, не совпадающие с границами фактических ячеек таблицы.
Вы пробовали http://www.oundedcornr.com/?
Лучшим способом будет 9-сетка, где у вас есть углы фона, а верхний, нижний, левый и правый фон повторяются.
Ваша таблица находится в ячейке 5
Редактировать
Как пишут некоторые в комментариях, нельзя добиться эффекта с помощью 9-сетки. Вам нужно создать систему из 12 сеток (созданную мной прямо сейчас :)
Живая демонстрация
.
Код:
Предупреждение: это некрасиво, но работает
<html>
<head>
<style>
.cell1 {background: #f8f8f8 url(images/cell1.gif) no-repeat left top; height: 10px; font-size: 1px;}
.cell2 {background: #f8f8f8 url(images/cell2.gif) repeat-x top; height: 10px; font-size: 1px; border-right: solid 1px #c3c2c2; font-weight:bold; }
.cell3 {background: #f8f8f8 url(images/cell3.gif) no-repeat right top; height: 10px; font-size: 1px;}
.cell4 {background: white url(images/cell4.gif) repeat-y left; border-bottom: solid 1px #c3c2c2; width: 13px; }
.cell5 {background-color: #f8f8f8; padding: 5px; border-right: solid 1px #c3c2c2; font-weight:bold; border-bottom: solid 1px #c3c2c2; }
.cell6 {background: white url(images/cell6.gif) repeat-y right; border-bottom: solid 1px #c3c2c2; width: 18px; }
.cell7 {background: white url(images/cell7.gif) repeat-y left; width: 13px;}
.cell8 {background-color: white; padding: 5px; border-right: solid 1px #c3c2c2; font-weight:normal; }
.cell9 {background: white url(images/cell9.gif) repeat-y right; width: 18px;}
.cell10 {background: white url(images/cell10.gif) no-repeat left bottom; height: 17px;font-size: 1px; }
.cell11 {background: white url(images/cell11.gif) repeat-x bottom; border-right: solid 1px #c3c2c2; height: 17px; font-size: 1px; }
.cell12 {background: white url(images/cell12.gif) no-repeat right bottom; height: 17px;font-size: 1px; }
.lastcolumn, th.lastcolumn, td.lastcolumn {border-right: solid 0px #c3c2c2; }
</style>
</head>
<body>
<table id = "pricing" border = "0" cellpadding = "0" cellspacing = "0">
<thead>
<tr>
<th class = "cell1"></th>
<th class = "cell2"> </th>
<th class = "cell2"> </th>
<th class = "cell2"> </th>
<th class = "cell2"> </th>
<th class = "cell2"> </th>
<th class = "cell2 lastcolumn"> </th>
<th class = "cell3"></th>
</tr>
<tr>
<th class = "cell4"> </th>
<th class = "cell5">Incoming calls</th>
<th class = "cell5">National calls</th>
<th class = "cell5">Calls to US & Canada</th>
<th class = "cell5">Calls to other Phones</th>
<th class = "cell5">Calls to other Countries</th>
<th class = "cell5 lastcolumn">SMS text messages</th>
<th class = "cell6"> </th>
</tr>
</thead>
<tbody>
<tr>
<td class = "cell7"></td>
<td class = "cell8">Select</td>
<td class = "cell8">country</td>
<td class = "cell8">from</td>
<td class = "cell8">dropdown</td>
<td class = "cell8">list</td>
<td class = "cell8 lastcolumn">above</td>
<td class = "cell9"></td>
</tr>
<tr>
<td class = "cell10"></td>
<td class = "cell11"> </td>
<td class = "cell11"> </td>
<td class = "cell11"> </td>
<td class = "cell11"> </td>
<td class = "cell11"> </td>
<td class = "cell11 lastcolumn"> </td>
<td class = "cell12"></td>
</tr>
</tbody>
</table>
</body>
</html>
Примечание: есть несколько неразрывных пробелов, которые SO удаляет из кода. Посмотрите живую демонстрацию для получения дополнительной информации
Наслаждаться!
Для меня это имеет смысл. Если бы я использовал PHP, я бы поместил вышеуказанное в два включаемых файла - один, который заканчивается <td> для ячейки 5, а другой начинается с </td> для ячейки 5. Так что вы можете включить, вставить content, include и не загромождают код этой страницы таким количеством вложенных тегов таблиц.
Как бы вы довели внутренние границы ячейки до края в этом случае? Вы имеете в виду, что будет столько же ячеек 2,4,6 и 8, сколько ячеек в самой таблице, а ячейка 5 вместо встроенной таблицы будет содержать данные таблицы?
Сделай что-нибудь вроде этого ...
XHTML: (извините, мне пришлось удалить первый '<', так как это не позволяло мне размещать его в обычном режиме, ИСПРАВИТЬ ЭТО JEFF!)
table id = "pricing" border = "0" cellpadding = "0" cellspacing = "0">
<thead>
<tr>
<th>Incoming calls</th>
<th>National calls</th>
<th>Calls to US & Canada</th>
<th>Calls to other Phones</th>
<th>Calls to other Countries</th>
<th>SMS text messages</th>
</tr>
</thead>
<tbody>
<tr>
<td>Select</td>
<td>country</td>
<td>from</td>
<td>dropdown</td>
<td>list</td>
<td>above</td>
</tr>
</tbody>
</table>
CSS: # цена { font-weight: жирный; выравнивание текста: центр }
#pricing thead
{
background-image:url("images/pricing_top.gif");
background-position:top;
background-repeat:no-repeat;
padding:10px 0 0 /* replace 10px with the height of pricing_top.gif */
}
#pricing th
{
background-image:url("images/pricing_header_bg.gif");
background-repeat:repeat-y;
border-bottom:1px solid #c3c2c2;
width:100px /* replace 100px with the width of pricing_header_bg.gif */
}
#pricing tbody
{
background-image:url("images/pricing_bottom.gif");
background-position:bottom;
background-repeat:no-repeat;
padding:0 0 10px /* replace 10px with the height of pricing_bottom.gif */
}
#pricing td
{
background-image:url("images/pricing_cell_bg.gif");
background-repeat:repeat-y;
width:100px /* replace 100px with the width of pricing_cell_bg.gif */
}
Единственный недостаток в том, что вам нужно создать 4 изображения, но это не займет много времени. Вам также нужно будет добавить класс в последнюю ячейку в каждой строке, если вы хотите добавить эту падающую тень справа и просто изменить ее свойство background-image и width соответственно.
Вы можете сделать это с помощью одного изображения. Один спрайт, содержащий четыре угла: левый верхний угол в правом нижнем углу спрайта, правый верхний угол в левом нижнем углу спрайта и т. д. Используйте CSS, чтобы разместить этот фон в каждой из ячеек (с отрицательным значения для позиции)
Нет, не с тенями и границами.
25 способов сделать это .... http://www.cssjuice.com/25-ounded-corners-techniques-with-css/
На самом деле способов сделать это слишком много.
Разыгрывая свою первоначальную идею, вы можете добавить класс к каждой угловой ячейке, эффективно отключая их соответствующие оскорбительные границы. Затем вы можете использовать полноразмерное фоновое изображение в элементах <thead> и <tfoot> для учета закругленных углов.
Для остальных ячеек границы можно включить, и линии будут правильно выровнены.
Единственная оставшаяся проблема заключается в том, чтобы объяснить эту взорванную тень. Это другое упражнение.
@ Натан, это не для тебя. Я съеживаюсь, когда кто-то (читай нетехнический) говорит о закругленных углах. Как закругленные углы повышают удобство использования / функциональность веб-страницы?