<style>
.main{
width: 100%;
min-height:40vh;
padding: 0px 20px;
align-content: center;
justify-content: center;
display: flex;
}
.main-table{
width:900px;
background:#001743;
align-content: center;
justify-content: center;
display: flex;
box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}
tr{
margin: 10px;
}
td:nth-btn(1){
width: 100%;
background:#fff;
border-radius:10px;
padding-right: 20px;
height:10px;
color:#000;
}
table {
max-width:800px;
background:#001743;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
border-collapse:separate;
border-spacing:0 15px;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
color: white;
padding: .35em;
margin-top:20px;
box-shadow: rgb(255 255 255 / 25%) 0px 30px 60px -12px inset, rgb(255 255 255 / 30%) 0px 18px 36px -18px inset;
border-radius: 40px;
}
table th,
table td {
padding: .625em;
text-align: center;
}
tr{
margin-top:4px;
}
tr:nth-child(1){
background:transparent;
}
td{
font-size: 14px;
}
td:nth-child(1){
border-radius:20px;
color: black;
padding: 0.5em;
padding-right: 1em;
}
.school-name-field{
padding: 10px 20px;
border-radius:20px;
color: black;
background:#fff;
font-size: 14px;
}
td:nth-child(2){
background:#fff;
color: black;
border-top-left-radius:20px;
border-bottom-left-radius: 20px;
} td:nth-child(3){
background:#fff;
color: black;
}
td:nth-child(4){
background:#fff;
color: black;
}
td:nth-child(5){
background:#fff;
color: black;
}
td:nth-child(6){
background:#fff;
color: black;
border-top-right-radius:20px;
border-bottom-right-radius: 20px;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
@media screen and (max-width:768px) {
table {
border: 0;
}
tr{
background: #fff;
border-radius: 0px;
}
.school-name-field{
padding: 10px 20px;
border-radius:20px;
color: black;
background:transparent;
font-size: 14px;
}
tr:nth-child(1){
background:#fff;
border-radius: 0px;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
display: block;
margin-bottom: .625em;
border-radius: 0px;
}
table td {
background-color: #ffffff;
color: #000;
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
/* general styling */
body {
font-family: "Open Sans", sans-serif;
line-height: 1.25;
}
</style>
--------------------------------------------
<div class="container">
<br/>
<div class="main">
<div class="main-table">
<br>
<div>
<table>
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Bazar</th>
<th scope="col">Session</th>
<th scope="col">Digit</th>
<th scope="col">Point</th>
<th scope="col">Winings</th>
</tr>
</thead>
<tbody>
<?php
$sql="select * from tbl_bid where userid=$db_id";
$result=mysqli_query($con,$sql);
$count=mysqli_num_rows($result);
if($count>0){
$i=1;
while($data=mysqli_fetch_assoc($result)){
// echo $data['bazar'];
?>
<tr>
<td data-label="Date"><span class="school-name-field">
<?php
$source = $data['date'];
$date = new DateTime($source);
// echo $date->format('d.m.Y'); // 31.07.2012
echo $date->format('d-m-Y'); // 31-07-2012
?>
</span></td>
<td data-label="Bazar"><span><?php echo $data['bazar']?></span></td>
<td data-label="Session"><span><?php echo $data['session']?></span></td>
<td data-label="Digit"><span><?php echo $data['digit']?></span></td>
<td data-label="Point"><span><?php echo $data['point']?></span></td>
<td data-label="Point"><span>₹ <?php echo $data['wining']?></span></td>
</tr>
<?php
}
$i++;
}else{
echo "no record";
}
?>
</tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
0 Comments