наверх





Не каждый знает, как правильно сделать округления в таблице. А ведь есть разные методы, и через JS, и через JQeury. Однако, стоит учесть, что округления можно легко сделать через CSS.


В этом примере я покажу, как очень просто и грамотно сделать округления в таблице, написанной на HTML. Создавать округления мы будем через стили.

На самом деле, существует несколько способов создания округления в таблице. Один из них, это вставка прозрачного изображения как фон у таблицы. Само изображение округленное. Все, что не поместилось внутри него, мы убираем, то есть делаем округления. Но здесь есть минус. Мы должны знать размер таблицы, что бы создать под него определенное изображение точного размера.

Так вот, в этом примере я покажу, как сделать округления в таблице, без изображения, JS и прочего, все делается очень просто. Давайте начнем. Например, я создал следующую таблицу:

<table cellspacing="0">
<tr><th>Название</th> <th>Цена товара</th><tr>
<tr><td>Молоко</td> <td>40 р. </td><tr>
<tr><td>Яйца</td> <td>36 р. </td><tr>
<tr><td>Сахар</td> <td>23 р</td><tr>
<tr><td>Яблоки</td> <td>67 р</td><tr>
<tr><td>Мука</td> <td>24 р</td><tr>
</table>

td, th {
padding:5px;
background-color:#478CFB;
color:#fff;
}
table, tr, td, th {
border:1px solid #5C98FC;
border-collapse:collapse;
}


Передо мной встала задача - сделать небольшие округления в таблице, сверху и снизу в 10 пикселей. Конечно, многие скорее всего сделают следующие:

table {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius:10px;
}


Но поймут, что данный вариант не будет работать. Что же делать, неужели нет выхода? Он есть. Нужно обернуть нашу таблицу в блочный тег <div> с классом, которому мы зададим округления:

<div class="tableBorder">
Таблица...
</div>


Теперь перейдем к стилям и добавим к классу округления. Что бы было все видно на скриншоте, я задал по началу нашему классу черную обводку:

.tableBorder {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius:10px;
}




Как видите, округления есть, но почему-то сама таблица не хочет округляться. Нужно сделать следующие:

.tableBorder {
...
overflow:hidden;
}




То есть добавить отображение лишь внутри нашего элемента. Лишние, которое снаружи нашей обводки, будет скрыто.

Как видите, правая часть у нашей таблицы все еще не округленна, а сама обводка куда-то ушла. Это все из-за того, что таблица находится внутри элемента, у которого ширина в стилях 300 пикселей. Поэтому она начала занимать всю площадь. Эту проблему решит вид отображения элемента:

.tableBorder {
...
display:inline-block;
}




Вот и все. Мы сделали округления в таблице очень легко и просто




Просмотр демо-варианта


Поделиться
Text-shadow генератор
Занимаетесь веб-разработкой? Полноценный кроссбраузерный text-shadow генератор с поддержкой нескольких теней.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.