<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body class="dark-theme">
<div class="container">
<div class="row">
<div class="col-12">
<div class="table-box">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Task</th>
<th scope="col">Project</th>
<th scope="col">Description</th>
<th scope="col">Creation</th>
<th scope="col">Deadline</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<div class="d-flex align-items-center">
<div class="mr-3">
<div class="task strong">
Task Manager
</div>
<div class="users strong">
<span>By:</span> Samreen <span>To:</span> Azhar
</div>
</div>
<i class="status-indicator ml-auto dot-online"></i>
</div>
</th>
<td class="project strong">Free Cars</td>
<td class="project-description">Lorem ipsum is so ubiquitous because it is so versatile.</td>
<td>
<div class="date strong">
21-Feb-2020
</div>
<div class="time">
12:00 AM
</div>
</td>
<td>
<div class="date strong">
23-Feb-2020
</div>
<div class="time">
12:00 AM
</div>
</td>
<td class="assigned strong">Assigned</td>
</tr>
<tr>
<th scope="row">
<div class="d-flex align-items-center">
<div class="mr-3">
<div class="task strong">
Task Manager
</div>
<div class="users strong">
<span>By:</span> Samreen <span>To:</span> Azhar
</div>
</div>
<i class="status-indicator ml-auto dot-offline"></i>
</div>
</th>
<td class="project strong">Free Cars</td>
<td class="project-description">Lorem ipsum is so ubiquitous because it is so versatile.</td>
<td>
<div class="date strong">
21-Feb-2020
</div>
<div class="time">
12:00 AM
</div>
</td>
<td>
<div class="date strong">
23-Feb-2020
</div>
<div class="time">
12:00 AM
</div>
</td>
<td class="rejected strong">Rejected</td>
</tr>
<tr>
<th scope="row">
<div class="d-flex align-items-center">
<div class="mr-3">
<div class="task strong">
Task Manager
</div>
<div class="users strong">
<span>By:</span> Samreen <span>To:</span> Azhar
</div>
</div>
<i class="status-indicator ml-auto dot-offline"></i>
</div>
</th>
<td class="project strong">Free Cars</td>
<td class="project-description">Lorem ipsum is so ubiquitous because it is so versatile, Lorem ipsum is so ubiquitous because it is so versatile.</td>
<td>
<div class="date strong">
21-Feb-2020
</div>
<div class="time">
12:00 AM
</div>
</td>
<td>
<div class="date strong">
23-Feb-2020
</div>
<div class="time">
12:00 AM
</div>
</td>
<td class="outdated strong">Out Dated</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,500,600,700&display=swap');
/*LIGHT THEME*/
@media print {
* {
color-adjust: exact!important;
-webkit-print-color-adjust: exact!important;
print-color-adjust: exact!important;
/*In FireFox it's in Page Setup -> [Format & Options] Tab under Options.*/
}
// If Table Issue with BG
th,tr,td {
color-adjust: exact!important;
-webkit-print-color-adjust: exact!important;
print-color-adjust: exact!important;
}
tr:nth-child(even) td {
background: light !important;
}
}
.light-theme {background: #eee;}
.light-theme .table-box {background: #fafafa;}
.light-theme .table {box-shadow: 0 0 10px 0 rgba(0,0,0,.1);}
.light-theme .table,
.light-theme .table tr>th .users {color: #666;}
.light-theme .table,
.light-theme .table tr {border-color: #ddd;}
.light-theme .table tr {background: white;}
.light-theme .table tbody tr:hover {background: #ddd;}
.light-theme .table tr>th,
.light-theme .table .project,
.light-theme .table .date {color: black;}
/*DARK THEME*/
.dark-theme {background: #1c2335;}
.dark-theme .table-box {background: #21293e;}
.dark-theme .table {box-shadow: 0 0 10px 0 rgba(0,0,0,.1);}
.dark-theme .table,
.dark-theme .table tr>th .users {color: #a9b5cb;}
.dark-theme .table,
.dark-theme .table tr {border-color: #273149;}
.dark-theme .table tr {background: #1a2030;}
.dark-theme .table tbody tr:hover {background: #1f263b;}
.dark-theme .table tr>th,
.dark-theme .table .project,
.dark-theme .table .date {color: white;}
.assigned {color: #8BC34A;}
.rejected {color: #e91e63;}
.outdated {color: #03A9F4;}
.dot-online {background: #8BC34A;}
.dot-offline {background: #e91e63;}
html,body {
font-family: 'Quicksand';
font-size: 13px;
}
.strong,strong {font-weight: 600;}
.table-box {padding: 30px;}
.table thead th {
padding-top: 25px;
padding-bottom: 25px;
}
.table {
border-width: 1px;
border-style: solid;
}
.table tr {
border-width: 1px 0;
border-style: solid;
}
.table th,
.table td {vertical-align: middle;}
.table tr th,
.table td {
padding-left: 20px;
padding-right: 20px;
white-space: nowrap;
}
.table thead th {
font-size: 16px;
font-weight: 600;
}
.table thead th,
.table td, .table th {border: 0;}
.table .time {font-size: 80%;}
.status-indicator {
width: 5px;
height: 5px;
border-radius: 50px;
}
.project-description {
width: 300px;
white-space: initial !important;
}
