向表格行添加水平线[重复]
Posted
技术标签:
【中文标题】向表格行添加水平线[重复]【英文标题】：Adding horizontal line to table row [duplicate] 【发布时间】：2020-12-26 15:38:25 【问题描述】：我有一个表格，我为每一行添加了水平线，边框底部：1px 纯黑色；但是这条规则没有被应用。
我正在尝试找出问题，但无法找到，请帮助我确定确切的问题。
我已经使用了 divison 类名和 tr 标签类名来应用border-bottom 属性，但仍然没有应用该规则
body
overflow: hidden;
.container-table100
width: 100%;
min-height: 100vh;
background-color: #f4f5f7;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding: 33px 30px;
.wrap-table100
width: 60%;
.table100
background-color: #fff;
table
width: 100%;
th, td
font-weight: unset;
padding-right: 10px;
text-align: left;
.column1
width: 25%;
padding-left: 40px;
.column2
width: 20%;
.column3
width: 20%;
.column4
width: 20%;
.table100-head th
padding-top: 10px;
padding-bottom: 12px;
.table100-body td
padding-top: 16px;
padding-bottom: 16px;
/*==================================================================
[ Fix header ]*/
.table100
position: relative;
padding-top: 60px;
.table100-head
position: absolute;
width: 100%;
top: 0;
left: 0;
.table100-body
max-height: 400px;
overflow: auto;
.table100.ver2 .table100-head
box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1);
.table100.ver2 th
font-family: Lato-Bold;
font-size: 18px;
color: #fa4251;
line-height: 1.4;
background-color: transparent;
.table100.ver2 td
font-family: Lato-Regular;
font-size: 15px;
color: #808080;
line-height: 1.4;
.table100.ver2 .table100-body tr
border-bottom: 1px solid black;
/*---------------------------------------------*/
.table100.ver2
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
-o-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
-ms-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
/* scrollbar body */
.js-pscroll
position: relative;
overflow: scroll;
<div class="container-table100">
<div class="wrap-table100">
<div class="table100 ver2 m-b-110">
<div class="table100-head">
<table>
<thead>
<tr class="row100 head">
<th class="cell100 column1">Name</th>
<th class="cell100 column2">Date</th>
<th class="cell100 column3">Type</th>
<th class="cell100 column4">Status</th>
</tr>
</thead>
</table>
</div>
<div class="table100-body js-pscroll" >
<table>
<tbody >
<tr class="row100 body"style="border-bottom:1px solid black" >
<tr class="row100 body">
<td class="cell100 column1">Kavya</td>
<td class="cell100 column2">01-01-2000</td>
<td class="cell100 column3">Datamodel</td>
<td class="cell100 column4">completed</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Kavya</td>
<td class="cell100 column2">01-01-2000</td>
<td class="cell100 column3">Datamodel</td>
<td class="cell100 column4">completed</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Kavya</td>
<td class="cell100 column2">01-01-2000</td>
<td class="cell100 column3">Datamodel</td>
<td class="cell100 column4">completed</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Kavya</td>
<td class="cell100 column2">01-01-2000</td>
<td class="cell100 column3">Datamodel</td>
<td class="cell100 column4">completed</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Kavya</td>
<td class="cell100 column2">01-01-2000</td>
<td class="cell100 column3">Datamodel</td>
<td class="cell100 column4">completed</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Kavya</td>
<td class="cell100 column2">01-01-2000</td>
<td class="cell100 column3">Datamodel</td>
<td class="cell100 column4">completed</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Kavya</td>
<td class="cell100 column2">01-01-2000</td>
<td class="cell100 column3">Datamodel</td>
<td class="cell100 column4">completed</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Kavya</td>
<td class="cell100 column2">01-01-2000</td>
<td class="cell100 column3">Datamodel</td>
<td class="cell100 column4">completed</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Kavya</td>
<td class="cell100 column2">01-01-2000</td>
<td class="cell100 column3">Datamodel</td>
<td class="cell100 column4">completed</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Kavya</td>
<td class="cell100 column2">01-01-2000</td>
<td class="cell100 column3">Datamodel</td>
<td class="cell100 column4">completed</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Kavya</td>
<td class="cell100 column2">01-01-2000</td>
<td class="cell100 column3">Datamodel</td>
<td class="cell100 column4">completed</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Kavya</td>
<td class="cell100 column2">01-01-2000</td>
<td class="cell100 column3">Datamodel</td>
<td class="cell100 column4">completed</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Kavya</td>
<td class="cell100 column2">01-01-2000</td>
<td class="cell100 column3">Datamodel</td>
<td class="cell100 column4">completed</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>【问题讨论】：
【参考方案1】：试试这个border-collapse属性
table
border-collapse: collapse;
【讨论】：
这个答案也回答了here。以上是关于向表格行添加水平线[重复]的主要内容，如果未能解决你的问题，请参考以下文章