dipflexondem
Indexation Expert
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
200 XP
Hello guys we will teach you how to create this simple Bootstrap Responsive Desktop Table. In this tutorial you will learn how to create this simple project. I will tell you what is bootstrap, "Bootstrapping" is also used as a term for building a system using itself or more correctly, a predecessor version. We create this application uses a bootstrap script and CSS script. This projects relays to a table of data given. The table composed of Columns and Values, each columns has a data or value that responds if what column that the value specified. See the example code below.
Sample Code
Html Form
For the CSS Script
Don't forget to Like and Share. Enjoy Coding.
Download
Sample Code
Html Form
- <!DOCTYPE html>
- <html
>
- <head
>
- <meta
charset
=
"UTF-8"
>
- <title
>
Bootstrap Responsive Desktop Table</
title
>
- <link
rel
=
"stylesheet"
href
=
"css/normalize.css"
>
- <link
rel
=
'css/bootstrap.min.css'
>
- <link
rel
=
'stylesheet prefetch'
href
=
'css/font-awesome.min.css'
>
- <link
rel
=
"stylesheet"
href
=
"css/style.css"
>
- </
head
>
- <body
class
=
"large-screen"
>
- <div
class
=
"container"
>
- <div
class
=
"wrap"
>
- <h1
>
Bootstrap Responsive Desktop Table</
h1
><ul
>
- <div
class
=
"table-wrapper"
>
- <table
class
=
"table-responsive card-list-table"
>
- <thead
>
- <tr
>
- <th
>
Column A</
th
>
- <th
>
Column B</
th
>
- <th
>
Column C</
th
>
- <th
>
Column D</
th
>
- <th
>
Column E</
th
>
- <th
>
Column F</
th
>
- </
tr
>
- </
thead
>
- <tbody
>
- <tr
>
- <td
data-title
=
"Column A"
>
Value 1</
td
>
- <td
data-title
=
"Column B"
>
Value 2</
td
>
- <td
data-title
=
"Column C"
>
Value 3</
td
>
- <td
data-title
=
"Column D"
>
Value 4</
td
>
- <td
data-title
=
"Column E"
>
Value 5</
td
>
- <td
data-title
=
"Column F"
>
Value 6</
td
>
- </
tr
>
- <tr
>
- <td
data-title
=
"Column A"
>
Value 1</
td
>
- <td
data-title
=
"Column B"
>
Value 2</
td
>
- <td
data-title
=
"Column C"
>
Value 3</
td
>
- <td
data-title
=
"Column D"
>
Value 4</
td
>
- <td
data-title
=
"Column E"
>
Value 5</
td
>
- <td
data-title
=
"Column F"
>
Value 6</
td
>
- </
tr
>
- <tr
>
- <td
data-title
=
"Column A"
>
Value 1</
td
>
- <td
data-title
=
"Column B"
>
Value 2</
td
>
- <td
data-title
=
"Column C"
>
Value 3</
td
>
- <td
data-title
=
"Column D"
>
Value 4</
td
>
- <td
data-title
=
"Column E"
>
Value 5</
td
>
- <td
data-title
=
"Column F"
>
Value 6</
td
>
- </
tr
>
- <tr
>
- <td
data-title
=
"Column A"
>
Value 1</
td
>
- <td
data-title
=
"Column B"
>
Value 2</
td
>
- <td
data-title
=
"Column C"
>
Value 3</
td
>
- <td
data-title
=
"Column D"
>
Value 4</
td
>
- <td
data-title
=
"Column E"
>
Value 5</
td
>
- <td
data-title
=
"Column F"
>
Value 6</
td
>
- </
tr
>
- <tr
>
- <td
data-title
=
"Column A"
>
Value 1</
td
>
- <td
data-title
=
"Column B"
>
Value 2</
td
>
- <td
data-title
=
"Column C"
>
Value 3</
td
>
- <td
data-title
=
"Column D"
>
Value 4</
td
>
- <td
data-title
=
"Column E"
>
Value 5</
td
>
- <td
data-title
=
"Column F"
>
Value 6</
td
>
- </
tr
>
- <tr
>
- <td
data-title
=
"Column A"
>
Value 1</
td
>
- <td
data-title
=
"Column B"
>
Value 2</
td
>
- <td
data-title
=
"Column C"
>
Value 3</
td
>
- <td
data-title
=
"Column D"
>
Value 4</
td
>
- <td
data-title
=
"Column E"
>
Value 5</
td
>
- <td
data-title
=
"Column F"
>
Value 6</
td
>
- </
tr
>
- <tr
>
- <td
data-title
=
"Column A"
>
Value 1</
td
>
- <td
data-title
=
"Column B"
>
Value 2</
td
>
- <td
data-title
=
"Column C"
>
Value 3</
td
>
- <td
data-title
=
"Column D"
>
Value 4</
td
>
- <td
data-title
=
"Column E"
>
Value 5</
td
>
- <td
data-title
=
"Column F"
>
Value 6</
td
>
- </
tr
>
- <tr
>
- <td
data-title
=
"Column A"
>
Value 1</
td
>
- <td
data-title
=
"Column B"
>
Value 2</
td
>
- <td
data-title
=
"Column C"
>
Value 3</
td
>
- <td
data-title
=
"Column D"
>
Value 4</
td
>
- <td
data-title
=
"Column E"
>
Value 5</
td
>
- <td
data-title
=
"Column F"
>
Value 6</
td
>
- </
tr
>
- <tr
>
- <td
data-title
=
"Column A"
>
Value 1</
td
>
- <td
data-title
=
"Column B"
>
Value 2</
td
>
- <td
data-title
=
"Column C"
>
Value 3</
td
>
- <td
data-title
=
"Column D"
>
Value 4</
td
>
- <td
data-title
=
"Column E"
>
Value 5</
td
>
- <td
data-title
=
"Column F"
>
Value 6</
td
>
- </
tr
>
- <tr
>
- <td
data-title
=
"Column A"
>
Value 1</
td
>
- <td
data-title
=
"Column B"
>
Value 2</
td
>
- <td
data-title
=
"Column C"
>
Value 3</
td
>
- <td
data-title
=
"Column D"
>
Value 4</
td
>
- <td
data-title
=
"Column E"
>
Value 5</
td
>
- <td
data-title
=
"Column F"
>
Value 6</
td
>
- </
tr
>
- <tr
>
- <td
data-title
=
"Column A"
>
Value 1</
td
>
- <td
data-title
=
"Column B"
>
Value 2</
td
>
- <td
data-title
=
"Column C"
>
Value 3</
td
>
- <td
data-title
=
"Column D"
>
Value 4</
td
>
- <td
data-title
=
"Column E"
>
Value 5</
td
>
- <td
data-title
=
"Column F"
>
Value 6</
td
>
- </
tr
>
- <tr
>
- <td
data-title
=
"Column A"
>
Value 1</
td
>
- <td
data-title
=
"Column B"
>
Value 2</
td
>
- <td
data-title
=
"Column C"
>
Value 3</
td
>
- <td
data-title
=
"Column D"
>
Value 4</
td
>
- <td
data-title
=
"Column E"
>
Value 5</
td
>
- <td
data-title
=
"Column F"
>
Value 6</
td
>
- </
tr
>
- </
tbody
>
- </
table
>
- </
div
>
- </
div
>
- </
div
>
- </
body
>
- </
html
>
For the CSS Script
- ::
-webkit-scrollbar {
- width
:
0.15em
;
- height
:
0.15em
;
- }
- ::
-webkit-scrollbar-thumb {
- background
:
slategray
;
- }
- ::
-webkit-scrollbar-track {
- background
:
#b8c0c8
;
- }
- body {
- scrollbar-face-color:
slategray
;
- scrollbar-track-color:
#b8c0c8
;
- }
- body,
- html {
- height
:
100%
;
- width
:
100%
;
- }
- body {
- font-family
:
"Roboto"
;
- }
- .wrap
{
- display
:
-webkit-box;
- display
:
-webkit-flex;
- display
:
-ms-flexbox;
- display
:
flex;
- -webkit-box-align:
center
;
- -webkit-align-items:
center
;
- -ms-flex-align:
center
;
- align-items
:
center
;
- -webkit-box-pack:
center
;
- -webkit-justify-content:
center
;
- -ms-flex-pack:
center
;
- justify-content
:
center
;
- -webkit-box-orient:
vertical
;
- -webkit-box-direction:
normal
;
- -webkit-flex-direction:
column;
- -ms-flex-direction:
column;
- flex-direction
:
column;
- height
:
100%
;
- width
:
100%
;
- }
- body {
- background
:
#f8f8f8
;
- }
- button.btn
{
- box-shadow
:
0
2px
3px
rgba
(
0
,
0
,
0
,
0.2
)
;
- border
:
0
;
- border-radius
:
0px
;
- }
- button.btn
i {
- margin-right
:
3px
;
- }
- body.large-screen
.table-wrapper
{
- max-width
:
800px
;
- }
- body.large-screen
.card-list-table
{
- background
:
white
;
- }
- body.large-screen
.card-list-table
tbody tr {
- background
:
transparent
;
- box-shadow
:
none
;
- margin
:
0
;
- }
- body.large-screen
.card-list-table
tbody tr:
nth-of-type
(
even)
{
- background
:
#dfdfdf
;
- }
- body.large-screen
.card-list-table
thead {
- display
:
table-header-group
;
- }
- body.large-screen
.card-list-table
thead th:
last-child
{
- box-shadow
:
none
;
- }
- body.large-screen
.card-list-table
thead th {
- border-bottom
:
1px
solid
#dfdfdf
;
- padding
:
12px
24px
;
- }
- body.large-screen
.card-list-table
tbody tr {
- display
:
table-row
;
- padding-bottom
:
0
;
- }
- body.large-screen
.card-list-table
tbody tr:
nth-of-type
(
even)
{
- background
:
#fff
;
- }
- body.large-screen
.card-list-table
tbody td {
- border-bottom
:
1px
solid
#dfdfdf
;
- cursor
:
pointer
;
- display
:
table-cell
;
- padding
:
20px
24px
;
- -webkit-transition:
background
.2s
ease-out;
- transition
:
background
.2s
ease-out;
- vertical-align
:
middle
;
- }
- body.large-screen
.card-list-table
tbody td:
after
{
- display
:
none
;
- }
- body.large-screen
.card-list-table
tbody td:
before
{
- content
:
''
;
- }
- body.large-screen
.card-list-table
tbody tr:
hover
td {
- background
:
#fcf3d0
;
- }
- .buttons
{
- margin
:
10px
0
50px
;
- }
- .table-wrapper
{
- max-width
:
300px
;
- width
:
80%
;
- margin
:
0
auto
0
;
- max-height
:
500px
;
- overflow-y
:
scroll
;
- position
:
relative
;
- -webkit-transition:
all .2s
ease-out;
- transition
:
all .2s
ease-out;
- }
- @media
(
min-width
:
768px
)
{
- .table-wrapper
{
- background
:
white
;
- box-shadow
:
0
2px
3px
rgba
(
0
,
0
,
0
,
0.2
)
;
- }
- }
- .card-list-table
{
- table-layout
:
fixed
;
- background
:
transparent
;
- margin-bottom
:
0
;
- width
:
100%
;
- }
- .card-list-table
thead {
- display
:
none
;
- }
- .card-list-table
tbody tr {
- box-shadow
:
0
2px
3px
rgba
(
0
,
0
,
0
,
0.2
)
;
- background
:
#fff
;
- border-bottom
:
1px
solid
#dfdfdf
;
- cursor
:
pointer
;
- display
:
block
;
- padding
:
15px
10px
;
- margin
:
0
0
10px
0
;
- }
- .card-list-table
tbody td {
- border
:
0
;
- display
:
block
;
- padding
:
10px
10px
20px
40%
;
- position
:
relative
;
- }
- .card-list-table
tbody td:
first-of-type
::
after
{
- visibility
:
hidden
;
- }
- .card-list-table
tbody td:
after
{
- content
:
''
;
- width
:
calc
(
100%
- 30px
)
;
- display
:
block
;
- margin
:
0
auto
;
- height
:
1px
;
- background
:
#dfdfdf
;
- position
:
absolute
;
- left
:
0
;
- right
:
0
;
- top
:
-6px
;
- }
- .card-list-table
tbody td:
before
{
- color
:
rgba
(
0
,
0
,
0
,
0.35
)
;
- text-transform
:
uppercase
;
- font-size
:
.85em
;
- content
:
attr
(
data-title)
;
- display
:
table-cell
;
- font-weight
:
500
;
- height
:
100%
;
- left
:
15px
;
- margin
:
auto
;
- position
:
absolute
;
- vertical-align
:
middle
;
- white-space
:
nowrap
;
- width
:
40%
;
- }
- .card-list-table
thead th {
- text-transform
:
uppercase
;
- font-size
:
.85em
;
- color
:
rgba
(
0
,
0
,
0
,
0.35
)
;
- letter-spacing
:
.5pt
;
- }
Don't forget to Like and Share. Enjoy Coding.
Download
You must upgrade your account or reply in the thread to view the hidden content.