Issue
I have a table in HTML. The problem is that I have set space between each cell so I used margin for that. but that causes that I can not have col-12 for a row, so in this case, it became col-11(sum of all cols). but it caused the row header to be in a full row and iterative rows (data row) are not in a full row. how can I make the header row be in data row width?
.event-col {
border-radius: 10px;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
background-color: #fff;
padding: 10px;
margin: 2px;
display: inline-block;
}
.event-col-header {
padding: 10px;
margin: 2px;
display: inline-block;
border: 0px !important;
font-weight: bold;
font-family: IRANSans;
}
.event-row {
border-radius: 10px;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
background-color: #c1d2fe;
margin: 10px;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="row">
<div class="col-12">
<table id="example" class="table dt-responsive nowrap showborder ">
<tr class="event-row mb-1">
<th class="col-1 event-col-header">No</th>
<th class="col-2 event-col-header">Name </th>
<th class="col-1 event-col-header">Date</th>
<th class="col-2 event-col-header">Hour</th>
<th class="col-5 event-col-header">Address</th>
</tr>
<tr>
<td class="col-1 event-col">@counter</td>
<td class="col-2 event-col">@item.Name</td>
<td class="col-1 event-col">@item.EventDate</td>
<td class="col-2 event-col"> @item.StartTime </td>
<td class="col-5 event-col">@item.Address</td>
</tr>
</table>
</div>
</div>Solution
I changed your code as follows:
.event-col {
border-radius: 10px;
box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
background-color: #fff;
/*padding: 10px;*/
/*margin: 2px;*/
display: inline-block;
width: 100%;
}
.event-col-header {
/*padding: 10px;*/
/*margin: 2px;*/
display: inline-block;
/*border: 0 !important;*/
font-weight: bold;
font-family: IRANSans;
}
.event-row {
border-radius: 10px;
box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
background-color: #c1d2fe;
/*margin: 10px;*/
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- bootstrap 4.6 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<!-- my style-sheet -->
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body dir="rtl">
<div class="container-fluid">
<div class="row text-right">
<div class="col-11 mx-auto">
<table id="example" class="table table-borderless table-responsive" >
<tr class="event-row mb-1">
<th class="col-1">
<span class="event-col-header">No</span>
</th>
<th class="col-2">
<span class="event-col-header">Name</span>
</th>
<th class="col-1">
<span class="event-col-header">Date</span>
</th>
<th class="col-2">
<span class="event-col-header">Hour</span>
</th>
<th class="col-5">
<span class="event-col-header">Address</span>
</th>
</tr>
<tr >
<td class="col-1">
<span class="event-col p-3">@counter</span>
</td>
<td class="col-2">
<span class="event-col p-3">@item.Name</span>
</td>
<td class="col-1">
<span class="event-col p-3">@item.EventDate</span>
</td>
<td class="col-2">
<span class="event-col p-3">@item.StartTime</span>
</td>
<td class="col-5">
<span class="event-col p-3">@item.Address</span>
</td>
</tr>
<tr >
<td class="col-1">
<span class="event-col p-3">@counter</span>
</td>
<td class="col-2">
<span class="event-col p-3">@item.Name</span>
</td>
<td class="col-1">
<span class="event-col p-3">@item.EventDate</span>
</td>
<td class="col-2">
<span class="event-col p-3">@item.StartTime</span>
</td>
<td class="col-5">
<span class="event-col p-3">@item.Address</span>
</td>
</tr>
<tr >
<td class="col-1">
<span class="event-col p-3">@counter</span>
</td>
<td class="col-2">
<span class="event-col p-3">@item.Name</span>
</td>
<td class="col-1">
<span class="event-col p-3">@item.EventDate</span>
</td>
<td class="col-2">
<span class="event-col p-3">@item.StartTime</span>
</td>
<td class="col-5">
<span class="event-col p-3">@item.Address</span>
</td>
</tr>
</table>
</div>
</div>
</div>
<!-- bootstrap scripts -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
</body>
</html>Important tips in my opinion about that code:
1- Do not put your text directly inside a col-1 or col-2 or ... . suppose them as container and put contents inside other HTML tags like <span> in this example.
2- Use margin and padding utilities of bootstrap instead of setting margin and padding yourself.
3- When you use row and col-* classes, usually using container-fluid or container classes gives better results. So I put a .container-fluid tag as a whole parent for table.
4- If you want to support responsiveness in your table, bootstrap has a .table-responsive class that you can add to your table.
Answered By - hamid-davodi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.