I've been attempting to create some space between each row in my table, but so far I haven't had any luck with it.
I checked out the spacing guidelines in Bootstrap's documentation, and even tried adding p-x or m-x classes to my tbody and tr elements, but nothing seems to be working as expected. The only solution that somewhat works is adding a div within every td element, although it doesn't give me the desired outcome.
Just to clarify, I'm currently using the default Bootstrap4 CDN without any overrides.
Below is the code snippet:
<div class="table-responsive">
<table id="example" class="table table-hover" style="width:100%; margin-top:4%">
<thead class="thead" style="background-color:#5AC5F1;color:white;">
<tr>
<th scope="row">Event Name</th>
<th scope="row">Start Date</th>
<th scope="row">End Date</th>
<th scope="row">Role</th>
<th scope="row">Status</th>
</tr>
</thead>
<tbody class="shadow-sm p-3 m-3 rounded">
@foreach (var item in Model._EventsLines)
{
<tr>
<td><a href="#myModal" class="myModal" data-toggle="modal" id="@item.EVL_id" onclick="GetEventsDetails(@item.EVL_id)">@item.EVL_nameEVT</a></td>
<td>@item.EVL_dateStart.ToShortDateString()</td>
<td>@item.EVL_dateEnd.ToShortDateString()</td>
<td>@item.EVL_role</td>
<td>@item.EVL_status</td>
</tr>
}
</tbody>
</table>
</div>
This is the type of layout I am aiming for:
https://i.sstatic.net/F54Fi.png
For further reference, here is a fiddle containing the code: jsfiddle.net/7Lzdhe9m