Responsive table in html and css

Total Views : 692
Zoom In Zoom Out Read Later Print

Code for creating responsive table design, with 4 layouts example.

table.css

@charset "UTF-8";

/* Table */
.pd-table {
width: 100%;
max-width: 100%;
}

.pd-table>thead>tr>th {
padding: 15px;
text-align: center;
background: #252525;
color: #bbb;
border-bottom: 0;
font-weight: 600;
letter-spacing: 0.5px;
}

.pd-table>tbody>tr>td {
padding: 25px 15px;
text-align: center;
}

.table-responsive {
border-color: #252525;
}

.pd-table-border>tbody>tr>td {
border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.pd-table-border.pd-table-transparent>tbody>tr>td {
border-color: rgba(255, 255, 255, 0.07);
}

.pd-table-striped tbody tr:nth-of-type(even) {
background: rgba(0, 0, 0, 0.05);
}

.pd-table-striped.pd-table-transparent tbody tr:nth-of-type(even) {
background: rgba(255, 255, 255, 0.05);
}

table.html

<!DOCTYPE html>
<html lang="zxx">
<head>
<!-- meta character set -->
<meta charset="utf-8">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Fontawesome Icon font -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- bootstrap.min -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- demo stylesheet -->
<link rel="stylesheet" href="css/demo.css"> <!-- This file only use demostration -->
<!-- table stylesheet -->
<link rel="stylesheet" href="css/table.css">

</head>
<body id="body">
<!-- Main Start -->
<main class="site-content">
<!-- Default Table Start -->
<section class="sec-spacer">
<div class="container container-center">
<h3 class="title text-center">Default Table</h3>
<div class="table-responsive">
<table class="pd-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>Manjeet Verma</td>
<td>manjeet@gmail.com</td>
<td>+000 0000 0000</td>
<td>Haryana</td>
<td>India</td>
</tr>
<tr>
<td>02</td>
<td>Neetish Kumar</td>
<td>neetish@gmail.com</td>
<td>+011 1111 1111</td>
<td>Haryana</td>
<td>India</td>
</tr>
<tr>
<td>03</td>
<td>Rohit</td>
<td>rohit@gmail.com</td>
<td>+022 2222 2222</td>
<td>Delhi</td>
<td>India</td>
</tr>
<tr>
<td>04</td>
<td>V K</td>
<td>vk@gmail.com</td>
<td>+033 3333 3333</td>
<td>New York</td>
<td>United States</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Default Table End -->

<!-- Border Table Start -->
<section class="sec-spacer sec-color">
<div class="container container-center">
<h3 class="title text-center">Border Table</h3>
<div class="table-responsive">
<table class="pd-table pd-table-border">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>Manjeet Verma</td>
<td>manjeet@gmail.com</td>
<td>+000 0000 0000</td>
<td>Haryana</td>
<td>India</td>
</tr>
<tr>
<td>02</td>
<td>Neetish Kumar</td>
<td>neetish@gmail.com</td>
<td>+011 1111 1111</td>
<td>Haryana</td>
<td>India</td>
</tr>
<tr>
<td>03</td>
<td>Rohit</td>
<td>rohit@gmail.com</td>
<td>+022 2222 2222</td>
<td>Delhi</td>
<td>India</td>
</tr>
<tr>
<td>04</td>
<td>V K</td>
<td>vk@gmail.com</td>
<td>+033 3333 3333</td>
<td>New York</td>
<td>United States</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Border Table End -->

<!-- Striped Table Start -->
<section class="sec-spacer">
<div class="container container-center">
<h3 class="title text-center">Striped Table</h3>
<div class="table-responsive">
<table class="pd-table pd-table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>Manjeet Verma</td>
<td>manjeet@gmail.com</td>
<td>+000 0000 0000</td>
<td>Haryana</td>
<td>India</td>
</tr>
<tr>
<td>02</td>
<td>Neetish Kumar</td>
<td>neetish@gmail.com</td>
<td>+011 1111 1111</td>
<td>Haryana</td>
<td>India</td>
</tr>
<tr>
<td>03</td>
<td>Rohit</td>
<td>rohit@gmail.com</td>
<td>+022 2222 2222</td>
<td>Delhi</td>
<td>India</td>
</tr>
<tr>
<td>04</td>
<td>V K</td>
<td>vk@gmail.com</td>
<td>+033 3333 3333</td>
<td>New York</td>
<td>United States</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Striped Table End -->

<!-- Transparent Table Start -->
<section class="sec-spacer bg-img2">
<div class="container container-center">
<h3 class="title text-center white">Transparent Table</h3>
<div class="table-responsive">
<table class="pd-table pd-table-border pd-table-transparent">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>Manjeet Verma</td>
<td>manjeet@gmail.com</td>
<td>+000 0000 0000</td>
<td>Haryana</td>
<td>India</td>
</tr>
<tr>
<td>02</td>
<td>Neetish Kumar</td>
<td>neetish@gmail.com</td>
<td>+011 1111 1111</td>
<td>Haryana</td>
<td>India</td>
</tr>
<tr>
<td>03</td>
<td>Rohit</td>
<td>rohit@gmail.com</td>
<td>+022 2222 2222</td>
<td>Delhi</td>
<td>India</td>
</tr>
<tr>
<td>04</td>
<td>V K</td>
<td>vk@gmail.com</td>
<td>+033 3333 3333</td>
<td>New York</td>
<td>United States</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Transparent Table End -->
</main>
<!-- Main End -->
</body>
</html>

See More

Latest Photos