Главная » Языки программирования

Примеры css для таблиц

Содержание
  1. CSS стили для таблиц
  2. Простая таблица
  3. Стандартная таблица
  4. Стандартная таблица с зеброй
  5. Таблица без боковых рамок
  6. Толстые рамки
  7. Двойная рамка
  8. Вертикальные разделители
  9. Закругленные углы рамки
  10. Таблица полосками
  11. Горизонтальные линии
  12. Адаптивная таблица
  13. Закруглённые ячейки
  14. Изменение цвета строк при наводе мыши
  15. 43 CSS Tables
  16. Table of Contents:
  17. Related Articles
  18. Tables
  19. Author
  20. Links
  21. Made with
  22. About a code
  23. Zigzag Table
  24. Author
  25. Links
  26. Made with
  27. About a code
  28. Table with Pagination
  29. Author
  30. Links
  31. Made with
  32. About a code
  33. Table with Frozen Table Header and Left Column
  34. Author
  35. Links
  36. Made with
  37. About the code
  38. Sort Table Rows By Table Headers
  39. Author
  40. Links
  41. Made with
  42. About the code
  43. Responsive Tables Using li
  44. Author
  45. Links
  46. Made with
  47. About the code
  48. Responsive Table HTML and CSS Only
  49. Responsive Table With Flexbox
  50. CSS Responsive Table Layout
  51. Fixed Table Header
  52. Responsive Table
  53. Pure CSS Table Highlight
  54. Author
  55. Links
  56. Made with
  57. About the code
  58. Sticky Table Headers by position: sticky;
  59. Responsive Table
  60. CSS Responsive Table & Detail View
  61. Author
  62. Links
  63. Made with
  64. About a code
  65. CSS Table
  66. Responsive Table
  67. Author

CSS стили для таблиц

На странице представлены готовые примеры стилей CSS для html таблиц сайта.

Возьмём одну простую таблицу, к которой будем подключать различные стили.

Простая таблица

Стандартная таблица

.table <
width: 100%;
margin-bottom: 20px;
border: 1px solid #dddddd;
border-collapse: collapse;
>
.table th <
font-weight: bold;
padding: 5px;
background: #efefef;
border: 1px solid #dddddd;
>
.table td <
border: 1px solid #dddddd;
padding: 5px;
>

First Name Last Name ZIP
Gloria Reeves 67439
Graham Bonner 46359
Warren Wheeler 61754

Стандартная таблица с зеброй

.table <
border: 1px solid #eee;
table-layout: fixed;
width: 100%;
margin-bottom: 20px;
>
.table th <
font-weight: bold;
padding: 5px;
background: #efefef;
border: 1px solid #dddddd;
>
.table td <
padding: 5px 10px;
border: 1px solid #eee;
text-align: left;
>
.table tbody tr:nth-child(odd) <
background: #fff;
>
.table tbody tr:nth-child(even) <
background: #F7F7F7;
>

Читайте также:  Css включить перенос строк
First Name Last Name ZIP
Gloria Reeves 67439
Graham Bonner 46359
Warren Wheeler 61754

Таблица без боковых рамок

.table <
width: 100%;
margin-bottom: 20px;
border-collapse: collapse;
>
.table th <
font-weight: bold;
padding: 5px;
background: #efefef;
border: 1px solid #dddddd;
>
.table td <
border: 1px solid #dddddd;
padding: 5px;
>
.table tr td:first-child, .table tr th:first-child <
border-left: none;
>
.table tr td:last-child, .table tr th:last-child <
border-right: none;
>

First Name Last Name ZIP
Gloria Reeves 67439
Graham Bonner 46359
Warren Wheeler 61754

Толстые рамки

.table <
width: 100%;
margin-bottom: 20px;
border: 15px solid #F2F8F8;
border-top: 5px solid #F2F8F8;
border-collapse: collapse;
>
.table th <
font-weight: bold;
padding: 5px;
background: #F2F8F8;
border: none;
border-bottom: 5px solid #F2F8F8;
>
.table td <
padding: 5px;
border: none;
border-bottom: 5px solid #F2F8F8;
>

First Name Last Name ZIP
Gloria Reeves 67439
Graham Bonner 46359
Warren Wheeler 61754

Двойная рамка

.table <
width: 100%;
margin-bottom: 20px;
border: 5px solid #fff;
border-top: 5px solid #fff;
border-bottom: 3px solid #fff;
border-collapse: collapse;
outline: 3px solid #ffd300;
font-size: 15px;
background: #fff!important;
>
.table th <
font-weight: bold;
padding: 7px;
background: #ffd300;
border: none;
text-align: left;
font-size: 15px;
border-top: 3px solid #fff;
border-bottom: 3px solid #ffd300;
>
.table td <
padding: 7px;
border: none;
border-top: 3px solid #fff;
border-bottom: 3px solid #fff;
font-size: 15px;
>
.table tbody tr:nth-child(even) <
background: #f8f8f8!important;
>

First Name Last Name ZIP
Gloria Reeves 67439
Graham Bonner 46359
Warren Wheeler 61754

Вертикальные разделители

.table <
width: 100%;
border: none;
margin-bottom: 20px;
>
.table thead th <
font-weight: bold;
text-align: left;
border: none;
padding: 10px 15px;
background: #d8d8d8;
font-size: 14px;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
>
.table tbody td <
text-align: left;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
padding: 10px 15px;
font-size: 14px;
vertical-align: top;
>
.table thead tr th:first-child, .table tbody tr td:first-child <
border-left: none;
>
.table thead tr th:last-child, .table tbody tr td:last-child <
border-right: none;
>
.table tbody tr:nth-child(even) <
background: #f3f3f3;
>

Читайте также:  Processing pde to java
First Name Last Name ZIP
Gloria Reeves 67439
Graham Bonner 46359
Warren Wheeler 61754

Закругленные углы рамки

.table <
width: 100%;
border: none;
margin-bottom: 20px;
border-collapse: separate;
>
.table thead th <
font-weight: bold;
text-align: left;
border: none;
padding: 10px 15px;
background: #EDEDED;
font-size: 14px;
border-top: 1px solid #ddd;
>
.table tr th:first-child, .table tr td:first-child <
border-left: 1px solid #ddd;
>
.table tr th:last-child, .table tr td:last-child <
border-right: 1px solid #ddd;
>
.table thead tr th:first-child <
border-radius: 20px 0 0 0;
>
.table thead tr th:last-child <
border-radius: 0 20px 0 0;
>
.table tbody td <
text-align: left;
border: none;
padding: 10px 15px;
font-size: 14px;
vertical-align: top;
>
.table tbody tr:nth-child(even) <
background: #F8F8F8;
>
.table tbody tr:last-child td <
border-bottom: 1px solid #ddd;
>
.table tbody tr:last-child td:first-child <
border-radius: 0 0 0 20px;
>
.table tbody tr:last-child td:last-child <
border-radius: 0 0 20px 0;
>

First Name Last Name ZIP
Gloria Reeves 67439
Graham Bonner 46359
Warren Wheeler 61754

Таблица полосками

.table <
width: 100%;
border: none;
margin-bottom: 20px;
>
.table thead th <
font-weight: bold;
text-align: left;
border: none;
padding: 10px 15px;
background: #d8d8d8;
font-size: 14px;
>
.table thead tr th:first-child <
border-radius: 8px 0 0 8px;
>
.table thead tr th:last-child <
border-radius: 0 8px 8px 0;
>
.table tbody td <
text-align: left;
border: none;
padding: 10px 15px;
font-size: 14px;
vertical-align: top;
>
.table tbody tr:nth-child(even) <
background: #f3f3f3;
>
.table tbody tr td:first-child <
border-radius: 8px 0 0 8px;
>
.table tbody tr td:last-child <
border-radius: 0 8px 8px 0;
>

First Name Last Name ZIP
Gloria Reeves 67439
Graham Bonner 46359
Warren Wheeler 61754

Горизонтальные линии

.table <
width: 100%;
border: none;
margin-bottom: 20px;
>
.table thead th <
padding: 10px;
font-weight: 500;
font-size: 16px;
line-height: 20px;
text-align: left;
color: #444441;
border-top: 2px solid #716561;
border-bottom: 2px solid #716561;
>
.table tbody td <
padding: 10px;
font-size: 14px;
line-height: 20px;
color: #444441;
border-top: 1px solid #716561;
>

First Name Last Name ZIP
Gloria Reeves 67439
Graham Bonner 46359
Warren Wheeler 61754

Адаптивная таблица

.table <
border-radius: 5px;
font-size: 12px;
font-weight: normal;
border: none;
border-collapse: collapse;
width: 100%;
max-width: 100%;
white-space: nowrap;
background-color: white;
>
.table td, .fl-table th <
text-align: center;
padding: 8px;
>
.table td <
border-right: 1px solid #f8f8f8;
font-size: 12px;
>
.table thead th <
color: #ffffff;
background: #4FC3A1;
>
.table thead th:nth-child(odd) <
color: #ffffff;
background: #324960;
>
.table tr:nth-child(even) <
background: #F8F8F8;
>
/* Responsive */
@media (max-width: 767px) <
.table <
display: block;
width: 100%;
>
.table-wrapper:before <
content: «Scroll horizontally»;
display: block;
text-align: right;
font-size: 11px;
color: white;
padding: 0 0 10px;
>
.table thead, .fl-table tbody, .fl-table thead th <
display: block;
>
.table thead th:last-child <
border-bottom: none;
>
.table thead <
float: left;
>
.table tbody <
width: auto;
position: relative;
overflow-x: auto;
>
.table td, .fl-table th <
padding: 20px .625em .625em .625em;
height: 60px;
vertical-align: middle;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
width: 120px;
font-size: 13px;
text-overflow: ellipsis;
>
.table thead th <
text-align: left;
border-bottom: 1px solid #f7f7f9;
>
.table tbody tr <
display: table-cell;
>
.table tbody tr:nth-child(odd) <
background: none;
>
.table tr:nth-child(even) <
background: transparent;
>
.table tr td:nth-child(odd) <
background: #F8F8F8;
border-right: 1px solid #E6E4E4;
>
.table tr td:nth-child(even) <
border-right: 1px solid #E6E4E4;
>
.table tbody td <
display: block;
text-align: center;
>
>

First Name Last Name ZIP
Gloria Reeves 67439
Graham Bonner 46359
Warren Wheeler 61754

Закруглённые ячейки

First Name Last Name ZIP
Gloria Reeves 67439
Graham Bonner 46359
Warren Wheeler 61754

Изменение цвета строк при наводе мыши

First Name Last Name ZIP
Gloria Reeves 67439
Graham Bonner 46359
Warren Wheeler 61754

Источник

43 CSS Tables

Collection of free HTML and CSS table code examples: simple, responsive, pricing, periodic, etc. Update of May 2020 collection. 6 new item.

Table of Contents:

Tables

Demo image: Zigzag Table

Author

Made with

About a code

Zigzag Table

A table formatted in a zigzag diagonal layout.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Table with Pagination

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Table with Frozen Table Header and Left Column

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Sort Table Rows By Table Headers

Author

Made with

About the code

Sort Table Rows By Table Headers

Sort table rows by table headers — ascending and descending.

Demo image: Responsive Tables using LI

Author

Made with

About the code

Responsive Tables Using li

Author

Made with

About the code

Responsive Table HTML and CSS Only

HTML table made responsive only with CSS. On mobile the header row is fixed to the left, and the content is scrollable horizontally.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo Image: Responsive Table With Flexbox

Responsive Table With Flexbox

The idea was to create a nice working table which is working on smaller screens also.
Made by Matys
April 6, 2017

Demo Image: CSS Responsive Table Layout

CSS Responsive Table Layout

Using CSS for responsive table layouts instead of floats. Responsive (everything goes down to one row each), too.
Made by Luke Peters
February 21, 2017

Demo Image: Fixed Table Header

Fixed Table Header

Fixed table header with simple jQuery code.
Made by Nikhil Krishnan
November 3, 2016

Demo Image: Responsive Table

Responsive Table

CSS tricks method responsive table.
Made by Alico
April 11, 2016

Demo Image: Pure CSS Table Highlight

Pure CSS Table Highlight

A simple (and nasty) trick to have vertical and horizontal highlight on hover on tables made with pure CSS.
Made by Alexander Erlandsson
March 22, 2016

Author

Made with

About the code

Sticky Table Headers by position: sticky;

Trying out to make a sweet table with sticky table headers if their table is in the viewport (like the iOS names list names beginning capital letter).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo Image: Responsive Table

Responsive Table

Responsive table with rwd-table-patterns.
Made by SitePoint
April 15, 2015

Demo Image: CSS Responsive Table & Detail View

CSS Responsive Table & Detail View

An example table and detail view scenario.
Made by Heather Buchel
June 29, 2014

Author

Made with

About a code

CSS Table

Using CSS to fade-in a row, fade-out a row and show data in the table updating on a live basis. Also hovering over a row expands to show more information.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo Image: Responsive Table

Responsive Table

Table collapses into a «list» on small screens. Headers are pulled from data attributes.
Made by Geoff Yuen
March 25, 2014

Demo image: Responsive And Accessible Data Table

Author

Источник

Оцените статью
© 2024 Программирование