Стиль таблицы CSS
https://stackoverflow.com/questions/284475
-
08-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Мне нужно оформить стол так, чтобы у него были закругленные углы.
Я просто обдумываю, как лучше всего это сделать:
Обычно, когда я оформляю div так, чтобы у него были закругленные углы, я использую 2 divs с пустыми комментариями вверху и внизу и применяю к ним sizing & background image CSS.
Таблица, однако, имеет внутренние границы, поэтому мне пришлось бы тщательно выровнять вертикальные линии в угловых изображениях bg, чтобы они соответствовали истинным границам ячеек.
Пока это ясно ?
Поэтому мне было интересно, как другие отнесутся к этому.Я думаю, лучшее, что я могу сделать, это просто использовать одно полное фоновое изображение фиксированного размера, границы и все остальное, а сверху наложить таблицу без полей.В конце концов, таблица всегда будет одного и того же размера.
Кто-нибудь может придумать способ получше?
Решение
Лучше сделать фоновое изображение только с углами, а не с границами. Примените класс к верхней левой, верхней правой, нижней левой и нижней правой ячейке, чтобы определить, что следует использовать фоновое изображение углов.
И стиль границ с CSS. Не помещайте их в фоновое изображение.
В вашем подходе вы всегда будете иметь вертикальные линии на фоновом изображении, которые не соответствуют границам фактических ячеек таблицы.
Другие советы
25 способов сделать это .... http: / /www.cssjuice.com/25-rounded-corners-techniques-with-css/
На самом деле, есть слишком много способов сделать это.
Вы пробовали http://www.tainedcornr.com/ ?
Сделайте что-нибудь вроде этого...
XHTML:(извините, пришлось сначала удалить '<"поскольку это не позволило бы мне опубликовать это нормально, ИСПРАВЬТЕ ЭТО, ДЖЕФФ!)
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:#цены { вес шрифта: жирный;выравнивание по тексту:поцентру }
#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 изображения, но это не должно занять слишком много времени.Вам также нужно будет добавить класс в последнюю ячейку в каждой строке, если вы хотите добавить эту тень справа и просто соответствующим образом изменить ее фоновое изображение и свойство width.
Разыгрывая свою оригинальную идею, вы можете добавить класс в каждую угловую ячейку, эффективно отключая соответствующие оскорбительные границы. Затем вы можете использовать полноразмерное фоновое изображение в & Lt; thead & Gt; и < tfoot > элементы для учета закругленных углов.
Остальные ячейки могут иметь свои границы, и линии будут выстроены правильно.
Единственная оставшаяся проблема - учет этой взорванной тени. Это другое упражнение.
Лучшим способом была бы сетка из 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>
Примечание:есть несколько неразрывных пробелов, которые ТАКИМ образом удаляются из кода.Ознакомьтесь с демонстрационной версией living для получения дополнительной информации
Наслаждайтесь!
