Question

我需要你的帮助，

如何使用CSS摆脱最后一个表格行的底部边框？我在HTML页面上使用了颜色编码来识别属于哪个边框。我可以看到底部边框需要被删除，因为它与我的容器边框发生冲突：

<!DOCTYPE html>
<html>
<head>

<style>

/* ----- Scrolling Table ----- */
.dataGridHeader {
position:relative;
padding-top:24px;
_padding-top:23px;

width:895px;

border-left: 1px solid red;
border-bottom: 1px solid orange;
}

.dataGridContent {
overflow:auto;
width:915px;
height:144px;
}

.dataGridHeader thead tr {
width:915px;
position:absolute;
top:0;
left:0;
}

.dataGridHeader table thead tr th, .dataGridHeader table tbody tr td { 
text-align:left;
height:0;
}

table.scrolltablestyle {
border-top: 1px solid #D9D9D9;
}

table.scrolltablestyle tbody tr td{
    background: #fff;
    text-align:left;
    padding: 4px 9px;
    border-bottom: 1px solid #999;
    border-right: 1px solid blue;
}
table.scrolltablestyle thead tr th{
background-color: #FFFFD9;
font-weight: normal;
text-align:left;
padding: 4px 9px 4px 9px;
border-bottom: 1px solid #999999;
}

table.scrolltablestyle thead tr th {
    border-right: 1px solid blue;
    border-top: 1px solid blue;
}

table.scrolltablestyle tbody tr td{
    border-right: 1px solid green;
}




</style>



</head>
<body>

<div class="dataGridHeader">
  <div class="dataGridContent">
    <table cellpadding="0" cellspacing="0" class="scrolltablestyle style-even">
      <thead>
        <tr>
          <th width="160">Shopper Name</th>
          <th width="160">First Name</th>
          <th width="160">Last Name</th>
          <th width="160">User ID</th>
          <th width="160">Status</th>
        </tr>
      </thead>
      <tbody>
  <tr>
    <td width="160">C2C Fishing</td>
    <td width="160">John</td>
    <td width="160">Doe</td>
    <td width="160">C2C Fishing</td>
    <td width="160">Enabled</td>
  </tr>
  <tr>
    <td width="160">C2C Fishing</td>
    <td width="160">John</td>
    <td width="160">Doe</td>
    <td width="160">C2C Fishing</td>
    <td width="160">Enabled</td>
  </tr>
    <tr>
    <td width="160">C2C Fishing</td>
    <td width="160">John</td>
    <td width="160">Doe</td>
    <td width="160">C2C Fishing</td>
    <td width="160">Enabled</td>
  </tr>
    <tr>
    <td width="160">C2C Fishing</td>
    <td width="160">John</td>
    <td width="160">Doe</td>
    <td width="160">C2C Fishing</td>
    <td width="160">Enabled</td>
  </tr>
    <tr>
    <td width="160">C2C Fishing</td>
    <td width="160">John</td>
    <td width="160">Doe</td>
    <td width="160">C2C Fishing</td>
    <td width="160">Enabled</td>
  </tr>
    <tr>
    <td width="160">C2C Fishing</td>
    <td width="160">John</td>
    <td width="160">Doe</td>
    <td width="160">C2C Fishing</td>
    <td width="160">Enabled</td>
  </tr>
    <tr>
    <td width="160">C2C Fishing</td>
    <td width="160">John</td>
    <td width="160">Doe</td>
    <td width="160">C2C Fishing</td>
    <td width="160">Enabled</td>
  </tr>
    <tr>
    <td width="160">C2C Fishing</td>
    <td width="160">John</td>
    <td width="160">Doe</td>
    <td width="160">C2C Fishing</td>
    <td width="160">Enabled</td>
  </tr>

      </tbody>
    </table>
  </div>
</div>
</body>
</html>

Answer 1

请使用此

table.scrolltablestyle tr:last-child td
{
border-bottom:none;
}

或者您可以像这样设置

table.scrolltablestyle tr:last-child td
{
border-bottom:0;
}

Answer 2

删除此行 - ：

 border-bottom: 1px solid orange;

如何使用css摆脱最后的tr td底部边框？

2 个答案: