Question

我正在尝试在表格的每一行之间添加一个空格，但这不起作用。

为此，我已经阅读了Bootstrap文档的空白部分，但是如果我在tbody或tr中添加p-x或m-x，则不会改变任何内容。唯一起作用的是当我在每个td中添加一个div时，但结果却不是我想要的那个。

我实际上使用了默认的Bootstrap4 CDN，没有被覆盖。

代码如下：

<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 

}

行之间的Bootstrap4间距

3 个答案: