Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/3: Рейтинг темы: голосов - 3, средняя оценка - 4.67
0 / 0 / 1
Регистрация: 22.01.2015
Сообщений: 126
1

Стилизация таблицы

10.04.2017, 14:22. Показов 566. Ответов 1
Метки нет (Все метки)

Здравствуйте. Пытаюсь стилизовать таблицу:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<table>
<tr>
    <th></th>
    <th>Название</th>
    <th>Рейтинг</th>
</tr>
<tr>
    <td>1</td>
    <td>Рулон</td>
    <td>3.00</td>
</tr>
</table>
CSS
1
2
3
4
5
6
7
table {width:100%;border-radius:3px;text-align:center;border-spacing:0;border-collapse:collapse;}
table th {border-right:1px solid #FFFFFF;padding:3px 0;color:#FFFFFF;font-weight:bold;background-color:red;}
table td {border:1px solid #b88c27;font-size:14px;padding:1px;vertical-align:middle;}
table tr:nth-child(odd){background-color: #F5F5DC;} 
table tr:hover{background-color:#F5F5F5;}
table th:first-child {border-top-left-radius:3px;}
table th:last-child {border-top-right-radius:3px;}
Cкрин: [del]
Стилизация таблицы


Все бы хорошо, но возник вопрос, правая сторона со значением td выступает (прикрепил изображение). Возможно ли закруглить последнюю строку в таблице, как в шапке (th). Благодарю за любые подсказки.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
10.04.2017, 14:22
Ответы с готовыми решениями:

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

Стилизация таблицы
Всем привет! Я только начал кодить, поэтому плохо понимаю что как. Короче, у меня во такое: ...

Стилизация границ таблицы
Здравствуйте! Требуется создать стилизованную таблицу и одним из пунктов является стилизация...

Стилизация
Всем привет ! не могу никак отстилизовать последнего кота. Через опасити не получается т.к....

1
Модератор
Эксперт JSЭксперт HTML/CSS
3742 / 2640 / 1515
Регистрация: 12.07.2015
Сообщений: 6,641
Записей в блоге: 4
10.04.2017, 20:21 2
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    body {
      padding: 10px;
    }
 
    .table {
      width: 300px;
      border-radius: 10px 10px 0 0;
      overflow: hidden;
    }
 
    table {
      border-collapse: collapse;
      width: 100%;
    }
 
    thead {
      background-color: red;
      border: 1px solid red;
      color: #fff;
    }
    thead tr :not(:last-child) {
      border-right: 1px solid #fff;
    }
 
    tbody td {
      border: 1px solid #b88c27;
    }
 
  </style>
</head>
<body>
  <div class="table">
  <table>
    <thead>
      <tr>
        <th></th>
        <th>Название</th>
        <th>Рейтинг</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Рулон</td>
        <td>3.00</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Рулон</td>
        <td>3.00</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
10.04.2017, 20:21

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Стилизация hr
Здрасте! Вот написал я такой код &lt;div id=&quot;header&quot;&gt; &lt;div class=&quot;text&quot;&gt;Привет!!!&lt;/div&gt; ...

Стилизация кнопок
Можно ли как-нибудь поменять кнопку &lt;input type=&quot;file&quot; name=&quot;attach&quot;&gt; на свою картинку? такой же...

Стилизация меню
Доброго времени суток! Столкнулся с проблемой стилизации меню. Задумано так, что меню должно...

Стилизация скролбара
Ребята, посоветуйте хороший (проверенный) и легковесный плагин, для стилизации скрола, как...

Стилизация checkbox
Как дать стиль checkbox, чтобы у него было примерно вот такой стиль? Помогите пожалуйста. Чтобы...

стилизация формы
есть такой код в форме отправки &lt;div class=&quot;form-group&gt; &lt;input class=&quot;form-control&quot;...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.