CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Korpin
Korpin

Reputation: 325

Bootstrap4 Spacing between rows

I'm trying to add a space between each row of my table but it does not work.

For that i've read the spacing section of the Bootstrap's documentation but if i add p-x or m-x to my tbody or in my tr it does not change anything. The only thing who work is when i add a div in every td but the result is not the one i'm looking for.

I actually use the default Bootstrap4 CDN, not overrided.

Here's the code:

<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>

Here's the kind of result i'm looking for:

enter image description here

Here's a fiddle with the code in it: jsfiddle.net/7Lzdhe9m

Upvotes: 1

Views: 440

Answers (3)

tunapq
tunapq

Reputation: 362

Try this!

td {
  padding: 10px 0;
  border-bottom: 1px solid #dee2e6;
}
.table { 
  border-collapse: separate;
  border-spacing: 0px 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<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">
            <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>
                        <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>
                        <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>

Upvotes: 1

Raheem Mohamed
Raheem Mohamed

Reputation: 797

Try this this i hope this is what you expecting.

table { 
    border-collapse: collapse; 
} 
th { 
    background-color:green; 
    Color:white; 
} 
th, td { 
    width:150px; 
    text-align:center; 
    border:1px solid black; 
    padding:5px 

}

Upvotes: 0

Par Tha
Par Tha

Reputation: 1531

Try this

td {
  padding: 10px 0;
}
tbody tr{
  background:#d4d4d4;
}
table { 
  border-spacing: 0px 10px; 
}

Upvotes: 2

Related Questions