Bootstrap4 Расстояние между рядами

Question

Я пытаюсь добавить пробел между каждой строкой моей таблицы, но это не работает.

Для этого я прочитал раздел пробелов в документации Bootstrap, но если я добавлю px или mx кмое тело или моя жизнь ничего не меняют. Единственное, что работает, это когда я добавляю div в каждый тд, но результат не тот, который я ищу.

Я на самом деле использую CDN Bootstrap4 по умолчанию, не переопределяемый.

Вот код:

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

Вот результат, который я ищу:

Вот скрипка скод в нем: jsfiddle.net / 7Lzdhe9m

Answer 1

Попробуйте это

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

Answer 2

Попробуйте!

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>

Answer 3

Попробуйте это, я надеюсь, это то, что вы ожидаете.

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

}