How to create table in css?
How to create table in css using div or li?
Table in css Example:-
Css-table.Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table CSS</title>
<link href="css-table.css" rel="stylesheet"/>
</head>
<body>
<!-- Table structure with li -->
<div class="table-css">
<ul class="header-css">
<li>Name</li>
<li>Qulification</li>
<li>Hobbies</li>
<li>Others</li>
<li>DOB</li>
</ul>
<ul>
<li>Sheo</li>
<li>MBA</li>
<li>Surfing net Surfing net Surfing net Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae ipsam quam, architecto soluta officiis, magnam molestias temporibus iure non beatae amet explicabo facilis in consequuntur omnis quia vero, exercitationem ipsa.</li>
<li>blah - blah</li>
<li>09/06/2016</li>
</ul>
<ul>
<li>Raj</li>
<li>MCA</li>
<li>Playing Cricket</li>
<li>Wow</li>
<li>06/09/2050</li>
</ul>
<ul>
<li>Mahesh</li>
<li>Ba</li>
<li>Surfing net</li>
<li>blah - blah</li>
<li>09/06/2020</li>
</ul>
<ul>
<li>Shiv</li>
<li>MCA</li>
<li>Playing Cricket</li>
<li>Wow</li>
<li>06/09/2096</li>
</ul>
</div>
<!-- Table structure with div -->
<div class="table-css-div">
<div class="rowTable header-css">
<div class="columnTable">Name</div>
<div class="columnTable">Qdivification</div>
<div class="columnTable">Hobbies</div>
<div class="columnTable">Others</div>
<div class="columnTable">DOB</div>
</div>
<div class="rowTable">
<div class="columnTable">Sheo</div>
<div class="columnTable">MBA</div>
<div class="columnTable">Surfing net Surfing net Surfing net Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae ipsam quam, architecto soluta officiis, magnam molestias temporibus iure non beatae amet explicabo facilis in consequuntur omnis quia vero, exercitationem ipsa.</div>
<div class="columnTable">blah - blah</div>
<div class="columnTable">09/06/2016</div>
</div>
<div class="rowTable">
<div class="columnTable">Raj</div>
<div class="columnTable">MCA</div>
<div class="columnTable">Playing Cricket</div>
<div class="columnTable">Wow</div>
<div class="columnTable">06/09/2050</div>
</div>
<div class="rowTable">
<div class="columnTable">Mahesh</div>
<div class="columnTable">Ba</div>
<div class="columnTable">Surfing net</div>
<div class="columnTable">blah - blah</div>
<div class="columnTable">09/06/2020</div>
</div>
<div class="rowTable">
<div class="columnTable">Shiv</div>
<div class="columnTable">MCA</div>
<div class="columnTable">Playing Cricket</div>
<div class="columnTable">Wow</div>
<div class="columnTable">06/09/2096</div>
</div>
</div>
</body>
</html>
Css-table.css
body {
margin: 0;
padding: 0;
border: 0;
height: 100vh;
font-family: Arial, Helvetica, sans-serif;
}
.table-css {
display: table;
margin: 50px;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.table-css ul {
margin: 0;
padding: 0;
list-style: none;
display: table-row;
background: #fff;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.table-css ul:nth-child(even) {
background: #eee;
}
.table-css ul:hover {
background: #f5f5f5;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.table-css ul.header-css {
background: #0bf;
color: #fff;
font-weight: 700;
}
.table-css ul li {
display: table-cell;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 5px 10px;
}
/*Through Div*/
.table-css-div {
display: table;
margin: 50px;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.table-css-div .rowTable {
margin: 0;
padding: 0;
list-style: none;
display: table-row;
background: #fff;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.table-css-div .rowTable:nth-child(even) {
background: #eee;
}
.table-css-div .rowTable:hover {
background: #f5f5f5;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.table-css-div .rowTable.header-css {
background: #0bf;
color: #fff;
font-weight: 700;
}
.table-css-div .rowTable .columnTable {
display: table-cell;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 5px 10px;
}
/*# sourceMappingURL=css-table.css.map */
If anyone want to using with sass or scss then use below sass
file.
Css-table.scss
body{
margin: 0;
padding: 0;
border: 0;
height: 100vh;
font-family: Arial, Helvetica, sans-serif;
}
.table-css{
display: table;
margin: 50px;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
ul{
margin: 0;
padding: 0;
list-style: none;
display: table-row;
background: #fff;
transition: all 0.5s;
&:nth-child(even){
background: #eee;
}
&:hover{
background: #f5f5f5;
transition: all 0.5s;
}
&.header-css{
background: #0bf;
color: #fff;
font-weight: 700;
}
li{
display: table-cell;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 5px 10px;
}
}
}
/*Through Div*/
.table-css-div{
display: table;
margin: 50px;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
.rowTable{
margin: 0;
padding: 0;
list-style: none;
display: table-row;
background: #fff;
transition: all 0.5s;
&:nth-child(even){
background: #eee;
}
&:hover{
background: #f5f5f5;
transition: all 0.5s;
}
&.header-css{
background: #0bf;
color: #fff;
font-weight: 700;
}
.columnTable{
display: table-cell;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 5px 10px;
}
}
}
No comments:
Note: Only a member of this blog may post a comment.