Start Coding
All
Accordion
Buttons
Cards
Carousel
Css Animation
Hexagons
Hover
Layout
Loaders
Menu
Navigation
Slider
Tables
Wave
Tables
Name
Known As
Year
Bruce Wayne
Batman
1939
Clark Kent
Superman
1938
Tony Stark
Iron Man
1963
Peter Parker
Spider-Man
1962
Matt Murdock
Daredevil
1964
/* Modifier */ .c-tbl--purple th { background-color: hsl(330, 50%, 40%) } .c-tbl--purple td { border-color: hsl(330, 40%, 80%); } .c-tbl--purple tr th:last-of-type { border-inline-color: hsl(330, 50%, 40%); } .c-tbl--purple tr th:first-of-type { border-inline-start-color: hsl(330, 50%, 40%); } @media (hover: hover) { .c-tbl--purple tr:hover td { background-color: hsl(330, 60%, 95%); } } /** * c-tbl.css * @version 1.0.0 * @description Generic Table Component */ :where(.c-tbl) { border-collapse: separate; border-spacing: 0; table-layout: auto; width: 99.9%; } :where(.c-tbl thead th) { background-color: hsl(200, 60%, 40%); border-style: solid; border-block-start-width: 0; border-inline-end-width: 1px; border-block-end-width: 0; border-inline-start-width: 0; color: hsl(200, 60%, 99%); padding-block: 1.25ch; padding-inline: 2ch; text-transform: uppercase; } :where(.c-tbl td) { background-color: #FFF; border-color: hsl(200, 60%, 80%); border-style: solid; border-block-start-width: 0; border-inline-end-width: 1px; border-block-end-width: 1px; border-inline-start-width: 0; padding-block: 1.25ch; padding-inline: 2ch; } /* Because of `border-collapse: separate`, we need to */ :where(.c-tbl tr td:first-of-type) { border-inline-start-width: 1px; } /* For header-cells, we set the `border-color` of the first and last border to it's `background-color` */ :where(.c-tbl tr th:last-of-type) { border-inline-color: hsl(200, 60%, 40%); } :where(.c-tbl tr th:first-of-type) { border-inline-start-color: hsl(200, 60%, 40%); } /* Set `border-radius` on first and last rows, on first and last cell */ :where(.c-tbl thead th:first-of-type) { border-start-start-radius: 0.5rem; } :where(.c-tbl thead th:last-of-type) { border-start-end-radius: 0.5rem; } :where(.c-tbl tbody tr:last-of-type td:first-of-type) { border-end-start-radius: 0.5rem; } :where(.c-tbl tr:last-of-type td:last-of-type) { border-end-end-radius: 0.5rem; } /* ===== HOVER ===== */ @media (hover: hover) { :where(.c-tbl) tr:hover td { background-color: hsl(200, 60%, 95%); } } /* For demo */ body { font-family: ui-sans-serif, sans-serif; margin-block: 2ch; margin-inline: auto; max-inline-size: 64rem; padding-inline: 2ch; } button { padding: 1ch 2ch; }
54
Basic Table with rounded corners
By:
pixeldev
Example 1: Two-Table Structure
foo
foo
foo
foo
1
foo
foo
foo
2
foo
foo
foo
3
foo
foo
foo
4
foo
foo
foo
5
foo
foo
foo
6
foo
foo
foo
7
foo
foo
foo
8
foo
foo
foo
9
foo
foo
foo
10
foo
foo
foo
11
foo
foo
foo
12
foo
foo
foo
13
foo
foo
foo
14
foo
foo
foo
15
foo
foo
foo
16
foo
foo
foo
17
foo
foo
foo
18
foo
foo
foo
19
foo
foo
foo
20
foo
foo
foo
21
foo
foo
foo
22
foo
foo
foo
23
foo
foo
foo
24
foo
foo
foo
25
foo
foo
foo
26
foo
foo
foo
27
foo
foo
foo
28
foo
foo
foo
28
foo
foo
foo
29
foo
foo
foo
30
foo
foo
foo
Example 2: Single-Table Structure
foo
foo
foo
foo
1
foo
foo
foo
2
foo
foo
foo
3
foo
foo
foo
4
foo
foo
foo
5
foo
foo
foo
6
foo
foo
foo
7
foo
foo
foo
8
foo
foo
foo
9
foo
foo
foo
10
foo
foo
foo
11
foo
foo
foo
12
foo
foo
foo
13
foo
foo
foo
14
foo
foo
foo
15
foo
foo
foo
16
foo
foo
foo
17
foo
foo
foo
18
foo
foo
foo
19
foo
foo
foo
20
foo
foo
foo
21
foo
foo
foo
22
foo
foo
foo
23
foo
foo
foo
24
foo
foo
foo
25
foo
foo
foo
26
foo
foo
foo
27
foo
foo
foo
28
foo
foo
foo
28
foo
foo
foo
29
foo
foo
foo
30
foo
foo
foo
* { box-sizing: border-box; } body { font: 14px/1 Arial, sans-serif; } .scrolltable { overflow-x: scroll; height: 100%; display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column; } .scrolltable > .body { /*noinspection CssInvalidPropertyValue*/ width: -webkit-fit-content; overflow-y: scroll; flex: 1; -webkit-flex: 1; } /* an outside constraint to react against */ #constrainer { width: 400px; height: 200px; } #constrainer2 { width: 400px; overflow-x: scroll; } #constrainer2 tbody { overflow-y: scroll; display: block; height: 200px; } #constrainer2 thead { display: table-row; } /* only styling below here */ #constrainer, #constrainer2 { border: 1px solid lightgrey; } table { border-collapse: collapse; } th, td { border: 1px solid #bbb; min-width: 150px; padding: 8px 16px; } th { background-color: lightgrey; border-width: 1px; } td { border-width: 1px; } tr:first-child td { border-top-width: 0; } tr:nth-child(even) { background-color: #eee; }
4
Pure CSS Scrolling Tables with Fixed Headers Examples
By:
rald_dev
Free
$0/mo
Some feature
Some feature
Some feature
Some feature
Some feature
Buy Now
Premium
$0/mo
Some feature
Some feature
Some feature
Some feature
Some feature
Buy Now
Free
$0/mo
Some feature
Some feature
Some feature
Some feature
Some feature
Buy Now
.pricing-table { width: 700px; margin: 30px auto 30px auto; font-family:"Arial"; } .pricing-table ul { width: 33%; text-align: center; background: #fff; float: left; margin: 0px; padding: 0px; list-style: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 99; position: relative; } .pricing-table ul.highlight-low { margin-right: -5px; } .pricing-table ul.highlight-low .heading { font-size: 22px; padding: 15px 0; border: 5px solid #cfcfcf; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; background-color: #e3e3e3; background-image: -moz-linear-gradient(top, #f0f0f0, #cfcfcf); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f0f0f0), to(#cfcfcf)); background-image: -webkit-linear-gradient(top, #f0f0f0, #cfcfcf); background-image: -o-linear-gradient(top, #f0f0f0, #cfcfcf); background-image: linear-gradient(to bottom, #f0f0f0, #cfcfcf); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0f0f0', endColorstr='#ffcfcfcf', GradientType=0); } .pricing-table ul.highlight-low .price { background: #dfe9f0; border-left: 5px solid #cfcfcf; border-right: 5px solid #cfcfcf; font-size: 20px; padding: 15px 0; } .pricing-table ul.highlight-low .feature { border-left: 5px solid #cfcfcf; border-right: 5px solid #cfcfcf; } .pricing-table ul.highlight-low .feature span { padding: 10px 0; border-bottom: 1px dashed rgba(0, 0, 0, 0.2); margin: 0 10px; display: block; font-size: 90%; } .pricing-table ul.highlight-low .feature:nth-last-child(2) span { border-bottom: 0px !important; } .pricing-table ul.highlight-low .call-to-action { background: #f0f0f0; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; border: 5px solid #cfcfcf; border-top: 0px; padding: 15px 0; font-size: 22px; } .pricing-table ul.highlight-high { z-index: 100; -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); -o-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); margin-top: -12px; } .pricing-table ul.highlight-high .heading { font-size: 22px; padding: 24px 0; border: 5px solid #21507d; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; background-color: #2c5d8e; background-image: -moz-linear-gradient(top, #336699, #21507d); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#336699), to(#21507d)); background-image: -webkit-linear-gradient(top, #336699, #21507d); background-image: -o-linear-gradient(top, #336699, #21507d); background-image: linear-gradient(to bottom, #336699, #21507d); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff336699', endColorstr='#ff21507d', GradientType=0); color: #fff; } .pricing-table ul.highlight-high .price { background: #dfe9f0; border-left: 5px solid #21507d; border-right: 5px solid #21507d; font-size: 20px; padding: 15px 0; } .pricing-table ul.highlight-high .feature { border-left: 5px solid #21507d; border-right: 5px solid #21507d; } .pricing-table ul.highlight-high .feature span { padding: 10px 0; border-bottom: 1px dashed rgba(0, 0, 0, 0.2); margin: 0 10px; display: block; font-size: 90%; } .pricing-table ul.highlight-high .feature:nth-last-child(2) span { border-bottom: 0px !important; } .pricing-table ul.highlight-high .call-to-action { background: #f0f0f0; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; border: 5px solid #21507d; border-top: 0px; padding: 24px 0; font-size: 22px; } .pricing-table ul.highlight-medium { margin-left: -5px; } .pricing-table ul.highlight-medium .heading { font-size: 22px; padding: 15px 0; border: 5px solid #589f0c; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; background-color: #6abc12; background-image: -moz-linear-gradient(top, #76cf16, #589f0c); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#76cf16), to(#589f0c)); background-image: -webkit-linear-gradient(top, #76cf16, #589f0c); background-image: -o-linear-gradient(top, #76cf16, #589f0c); background-image: linear-gradient(to bottom, #76cf16, #589f0c); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff76cf16', endColorstr='#ff589f0c', GradientType=0); color: #fff; } .pricing-table ul.highlight-medium .price { background: #dfe9f0; border-left: 5px solid #589f0c; border-right: 5px solid #589f0c; font-size: 20px; padding: 15px 0; } .pricing-table ul.highlight-medium .feature { border-left: 5px solid #589f0c; border-right: 5px solid #589f0c; } .pricing-table ul.highlight-medium .feature span { padding: 10px 0; border-bottom: 1px dashed rgba(0, 0, 0, 0.2); margin: 0 10px; display: block; font-size: 90%; } .pricing-table ul.highlight-medium .feature:nth-last-child(2) span { border-bottom: 0px !important; } .pricing-table ul.highlight-medium .call-to-action { background: #f0f0f0; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; border: 5px solid #589f0c; border-top: 0px; padding: 15px 0; font-size: 22px; }
4
Pure CSS Pricing Table
By:
rald_dev
Items
Status
Month
Sales
Iphone X
Pending
January
$50,000.00
Samsung J10
Arrived
February
$120,000.00
Realme 5i
Arrived
March
$25,000.00
Samsung Galaxy A20
On Way
April
$90,000.00
Xiaomi Redmi Note 8 Pro
Arrived
November
$25,000.00
Oppo A1k
Return
December
$35,000.00
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap'); body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #ccd7e8; } table { border-collapse: collapse; background-color: white; overflow: hidden; width: 500px; border-radius: 10px; } th, td { font-family:'Motnserrat',sans-serif; text-align: left; font-size: 12px; padding: 10px; } th { background-color: #7691ab; color: white; }
4
Pure CSS table gadgets
By:
rald_dev
Column 1
Column 2
Column 3
Column 4
Column 5
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
html, body { height: 100%; } body { margin: 0; background: linear-gradient(45deg, #49a09d, #5f2c82); font-family: sans-serif; font-weight: 100; } .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } table { width: 800px; border-collapse: collapse; overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,0.1); } th, td { padding: 15px; background-color: rgba(255,255,255,0.2); color: #fff; } th { text-align: left; } thead { th { background-color: #55608f; } } tbody { tr { &:hover { background-color: rgba(255,255,255,0.3); } } td { position: relative; &:hover { &:before { content: ""; position: absolute; left: 0; right: 0; top: -9999px; bottom: -9999px; background-color: rgba(255,255,255,0.2); z-index: -1; } } } }
3
Pure CSS Table Highlight (vertical & horizontal)
By:
rald_dev
First Name
Last Name
Job Title
Twitter
James
Matman
Chief Sandwich Eater
@james
Andor
Nagy
Designer
@andornagy
Tamas
Biro
Game Tester
@tamas
Zoli
Mastah
Developer
@zoli
Szabi
Nagy
Chief Sandwich Eater
@szabi
table { width: 750px; border-collapse: collapse; margin:50px auto; } /* Zebra striping */ tr:nth-of-type(odd) { background: #eee; } th { background: #3498db; color: white; font-weight: bold; } td, th { padding: 10px; border: 1px solid #ccc; text-align: left; font-size: 18px; } /* Max width before this PARTICULAR table gets nasty This query will take effect for any screen smaller than 760px and also iPads specifically. */ @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { table { width: 100%; } /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; } td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; } td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; /* Label the data */ content: attr(data-column); color: #000; font-weight: bold; } }
2
Pure CSS Responsive Table.
By:
rald_dev
HTML Version of
Design a Clean and Modern Pricing Table in Photoshop
Business Hosting
$
24.99
per month (billed annually)
500GB Space
50GB Bandwidth
100 Subdomains
25 Emails
100 MySQL
100$ Google Account
24 Hour Support
Free Facebook Access
Sign Up
Shared Hosting
$
14.99
per month (billed annually)
200GB Space
20GB Bandwidth
50 Subdomains
10 Emails
50 MySQL
50$ Google Account
Sign Up
Total Hosting
$
34.99
per month (billed annually)
1000GB Space
100GB Bandwidth
150 Subdomains
50 Emails
150 MySQL
150$ Google Account
Sign Up
body { background: #ddd; font: 12px Helvetica, Arial, sans-serif; color: #000; } .noborder { border: none !important; } body > h1 { text-align: center; padding: 25px 0 10px 0; margin: 0; } body > h4 { text-align: center; padding: 0 0 25px 0; margin: 0; } /* Basic Table Layout \* *********************************************************** */ .priceTable { width: 960px; margin: 0 auto; } .priceTable .table { width: 320px; margin: 58px 0; -webkit-border-radius: 8px; border-radius: 8px; background: #fff; -webkit-box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.25); box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.25); } .priceTable .table h1 { background: #9ddfc4; font-size: 21px; font-weight: bold; text-align: center; padding: 18px 0; margin: 0; border: 1px solid #97ceb7; text-shadow: 1px 2px 4px rgba(255,255,255,0.5); filter: dropshadow(color=rgba(255,255,255,0.5), offx=1, offy=2); -webkit-box-shadow: inset 1px 1px 3px 1px rgba(186,240,217, 100); box-shadow: inset 1px 1px 3px 1px rgba(186,240,217, 100); } .priceTable .table h2, .priceTable .table h3 { margin: 0; text-align: center; text-shadow: 1px 2px 4px rgba(255,255,255,0.9); filter: dropshadow(color=rgba(255,255,255,0.9), offx=1, offy=2); background: #e2faed; border: 1px solid #97ceb7; border-top: none; } .priceTable .table h2 { padding: 10px 0 0 0; font-size: 52px; border-bottom: none; } .priceTable .table h3 { color: #6b6b6b; padding: 2px 0 12px 0; font-size: 12px; font-weight: normal; } .priceTable .table sup { font-weight: normal; font-size: 21px } .priceTable .circle { margin: -8px 140px; height: 20px; width: 40px; position: absolute; -webkit-border-radius: 0 0 40px 40px; border-radius: 0 0 40px 40px; background: #e2faed; background: -webkit-gradient(linear, left top, left bottom, color-stop(52%,#e2faed), color-stop(100%,#b7c9bd)); background: -webkit-linear-gradient(top, #e2faed 52%,#b7c9bd 100%); background: -moz-linear-gradient(top, #e2faed 52%, #b7c9bd 100%); background: -ms-linear-gradient(top, #e2faed 52%,#b7c9bd 100%); background: -o-linear-gradient(top, #e2faed 52%,#b7c9bd 100%); background: linear-gradient(to bottom, #e2faed 52%,#b7c9bd 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2faed', endColorstr='#b7c9bd',GradientType=0 ); border-bottom: 1px solid #97ceb7; } .priceTable ul { list-style: none; margin: 0; padding: 0; background: #ffffff; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); text-align: center; font-size: 15px; color: #44494c; border: 1px solid #97ceb7; border-top: none; } .priceTable ul li { padding: 12px; margin: 0 20px; border-bottom: 1px dotted #ccc; } .priceTable ul li:first-child { padding-top: 23px; } .priceTable ul li.action { border: none; padding-bottom: 20px; } .priceTable .action a { display: inline-block; width: 80%; padding: 10px; text-decoration: none; text-transform: uppercase; font-weight: bold; text-align: center; background: #bccddd; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bccddd), color-stop(100%,#7f8f9e)); background: -webkit-linear-gradient(top, #bccddd 0%,#7f8f9e 100%); background: -moz-linear-gradient(top, #bccddd 0%, #7f8f9e 100%); background: -ms-linear-gradient(top, #bccddd 0%,#7f8f9e 100%); background: -o-linear-gradient(top, #bccddd 0%,#7f8f9e 100%); background: linear-gradient(to bottom, #bccddd 0%,#7f8f9e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bccddd', endColorstr='#7f8f9e',GradientType=0 ); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0px 3px 3px 1px rgba(0, 0, 0, 0.1); box-shadow: 0px 3px 3px 1px rgba(0, 0, 0, 0.1); text-shadow: 1px 2px 4px rgba(255,255,255,0.5); filter: dropshadow(color=rgba(255,255,255,0.5), offx=1, offy=2); -webkit-box-shadow: inset 1px 1px 3px 1px rgba(255,255,255,0.2); box-shadow: inset 1px 1px 3px 1px rgba(255,255,255,0.2); color: #000; border: 1px solid #7f8899; } /* 'Large' Table Modifiers \* *********************************************************** */ .priceTable .table.large { position: absolute; width: 340px; margin: 0 310px; border-color: #d77b66; } .priceTable .table.large h1 { -webkit-border-radius: 8px 8px 0px 0px; border-radius: 8px 8px 0px 0px; color: #fff; text-shadow: 1px 2px 4px rgba(215,123,102,0.9); filter: dropshadow(color=rgba(215,123,102,0.9), offx=1, offy=2); background: #fca78a; -webkit-box-shadow: inset 1px 1px 3px 1px rgba(253,200,166,100); box-shadow: inset 1px 1px 3px 1px rgba(253,200,166,100); border-color: #b7b761; border-bottom: 1px solid #d77b66; } .priceTable .table.large h2 { padding-top: 20px; } .priceTable .table.large h3 { padding-bottom: 20px; } .priceTable .table.large h2, .priceTable .table.large h3 { background: #f2f5c0; border-color: #b7b761; } .priceTable .table.large ul { background: #f6e5b1; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e5b1), color-stop(100%,#e8d7a3)); background: -webkit-linear-gradient(top, #f6e5b1 0%,#e8d7a3 100%); background: -moz-linear-gradient(top, #f6e5b1 0%, #e8d7a3 100%); background: -ms-linear-gradient(top, #f6e5b1 0%,#e8d7a3 100%); background: -o-linear-gradient(top, #f6e5b1 0%,#e8d7a3 100%); background: linear-gradient(to bottom, #f6e5b1 0%,#e8d7a3 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e5b1', endColorstr='#e8d7a3',GradientType=0 ); border-color: #b8b669; -webkit-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; } .priceTable .table.large li { border-color: #b7b761; } .priceTable .table.large .action a { background: #eba281; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eba281), color-stop(100%,#aa6343)); background: -webkit-linear-gradient(top, #eba281 0%,#aa6343 100%); background: -moz-linear-gradient(top, #eba281 0%, #aa6343 100%); background: -ms-linear-gradient(top, #eba281 0%,#aa6343 100%); background: -o-linear-gradient(top, #eba281 0%,#aa6343 100%); background: linear-gradient(to bottom, #eba281 0%,#aa6343 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eba281', endColorstr='#aa6343',GradientType=0 ); border-color: #d5714d; color: #fff; text-shadow: 1px 2px 4px rgba(0,0,0,0.2); filter: dropshadow(color=rgba(0,0,0,0.52), offx=1, offy=2); } .priceTable .large .circle { margin-left: 150px; background: #f2f5c0; background: -webkit-gradient(linear, left top, left bottom, color-stop(52%,#f2f5c0), color-stop(100%,#c5c7a2)); background: -webkit-linear-gradient(top, #f2f5c0 52%,#c5c7a2 100%); background: -moz-linear-gradient(top, #f2f5c0 52%, #c5c7a2 100%); background: -ms-linear-gradient(top, #f2f5c0 52%,#c5c7a2 100%); background: -o-linear-gradient(top, #f2f5c0 52%,#c5c7a2 100%); background: linear-gradient(to bottom, #f2f5c0 52%,#c5c7a2 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5c0', endColorstr='#c5c7a2',GradientType=0 ); border-bottom-color: #b7b761; } /* 'Left' and 'Right Table Modifiers \* *********************************************************** */ .priceTable .table.left { float: left; -webkit-border-radius: 8px 0px 0px 8px; border-radius: 8px 0px 0px 8px; } .priceTable .table.left h2, .priceTable .table.left h3 { border-right: none; } .priceTable .table.left h1 { -webkit-border-radius: 8px 0px 0px 0px; border-radius: 8px 0px 0px 0px; border-right: none; } .priceTable .table.left ul { border-color: #b8b669; -webkit-border-radius: 0 0 0 8px; border-radius: 0 0 0 8px; } .priceTable .table.right { float: right; -webkit-border-radius: 0px 8px 8px 0px; border-radius: 0px 8px 8px 0px; } .priceTable .table.right h2, .priceTable .table.right h3 { border-left: none; } .priceTable .table.right h1 { -webkit-border-radius: 0px 8px 0px 0px; border-radius: 0px 8px 0px 0px; border-left: none; } .priceTable .table.right ul { border-color: #b8b669; -webkit-border-radius: 0 0 8px 0; border-radius: 0 0 8px 0; }
2
HTML Version of ‘Design a Clean and Modern Pricing Table in Photoshop’
By:
rald_dev
r1, c1
r1, c2
r1, c3
r2, c1
r1, c2
r2, c3
ul{ list-style:none; } ul li{ float:left; padding:10px; border-bottom:1px solid #000; border-right:1px solid #000; } ul li:nth-child(3n){ background-color:#888; } ul li:nth-child(3n+1){ clear:both; border-left:1px solid #000; background-color:#ccc; } ul li:nth-child(-n+3){ border-top:1px solid #000; }
2
html lists like tables
By:
rald_dev
Pure CSS Scrollable Table with Fixed Header
Using CSS to allow scrolling within a single HTML table
The Big 4 Version
Basic CSS Browser Filtering
Header 1
Header 2
Header 3
Cell Content 1
Cell Content 2
Cell Content 3
More Cell Content 1
More Cell Content 2
More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1
Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2
Even More Cell Content 3
More Cell Content 1
More Cell Content 2
More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1
Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2
Even More Cell Content 3
More Cell Content 1
More Cell Content 2
More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1
Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2
Even More Cell Content 3
More Cell Content 1
More Cell Content 2
More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1
Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2
Even More Cell Content 3
More Cell Content 1
More Cell Content 2
More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1
Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2
Even More Cell Content 3
More Cell Content 1
More Cell Content 2
More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1
Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2
Even More Cell Content 3
More Cell Content 1
More Cell Content 2
More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1
Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2
Even More Cell Content 3
More Cell Content 1
More Cell Content 2
More Cell Content 3
Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1
Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2
Even More Cell Content 3
put a bunch of breaks to test scrolling within the HTML document itself.
put a bunch of breaks to test scrolling within the HTML document itself.
put a bunch of breaks to test scrolling within the HTML document itself.
done.
body { background: #FFF; color: #000; font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif; margin: 10px; padding: 0 } table, td, a { color: #000; font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif } h1 { font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif; margin: 0 0 5px 0 } h2 { font: normal normal 16px Verdana, Geneva, Arial, Helvetica, sans-serif; margin: 0 0 5px 0 } h3 { font: normal normal 13px Verdana, Geneva, Arial, Helvetica, sans-serif; color: #008000; margin: 0 0 15px 0 } /* end basic styling */ /* define height and width of scrollable area. Add 16px to width for scrollbar */ div.tableContainer { clear: both; border: 1px solid #963; height: 285px; overflow: auto; width: 900px } /* Reset overflow value to hidden for all non-IE browsers. */ html>body div.tableContainer { overflow: hidden; width: 900px } /* define width of table. IE browsers only */ div.tableContainer table { float: left; /* width: 740px */ } /* define width of table. Add 16px to width for scrollbar. */ /* All other non-IE browsers. */ html>body div.tableContainer table { /* width: 756px */ } /* set table header to a fixed position. WinIE 6.x only */ /* In WinIE 6.x, any element with a position property set to relative and is a child of */ /* an element that has an overflow property set, the relative value translates into fixed. */ /* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */ thead.fixedHeader tr { position: relative; } /* set THEAD element to have block level attributes. All other non-IE browsers */ /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */ /* make the TH elements pretty */ thead.fixedHeader th { background: #C96; border-left: 1px solid #EB8; border-right: 1px solid #B74; border-top: 1px solid #EB8; font-weight: normal; padding: 4px 3px; text-align: left } html>body tbody.scrollContent { display: block; height: 262px; overflow: auto; width: 100% } html>body thead.fixedHeader { display: table; overflow: auto; width: 100% } /* make TD elements pretty. Provide alternating classes for striping the table */ /* http://www.alistapart.com/articles/zebratables/ */ tbody.scrollContent td, tbody.scrollContent tr.normalRow td { background: #FFF; border-bottom: none; border-left: none; border-right: 1px solid #CCC; border-top: 1px solid #DDD; padding: 2px 3px 3px 4px } tbody.scrollContent tr.alternateRow td { background: #EEE; border-bottom: none; border-left: none; border-right: 1px solid #CCC; border-top: 1px solid #DDD; padding: 2px 3px 3px 4px }
1
Pure CSS Scrollable Table with Fixed Header
By:
rald_dev
x
Q1
Q2
Q3
Q4
Q5
d
d
d
d
d
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
.table-draws__wrapper { display: inline-flex; } .table-draws__questions { border-top: 1px solid gray; width: 200px; display: inline-block; } .table-draws__questions div { display: flex; align-items: center; height: 63px; border-right: 1px solid red; border-bottom: 1px solid red; border-left: 1px solid red; } .table-draws__answers { margin: 0; border-top: 1px solid red; width: 360px; display: inline-block; overflow-x: scroll; overflow-y: hidden; } .table-draws__answers table { border-collapse: collapse; } .table-draws__answers table tr th, .table-draws__answers table tr td { border-bottom: 1px solid gray; border-right: 1px solid gray; padding: 10px 20px; min-width: 50px; line-height: 2.7; vertical-align: middle; text-align: center; }
1
Table fixed first column, pure css
By:
rald_dev