0

あなたの助けが必要です、

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

2 に答える 2

5

これを使うだけ

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

または、このように設定することもできます

table.scrolltablestyle tr:last-child td
{
border-bottom:0;
}
于 2013-03-08T20:25:39.417 に答える
1

この行を削除します-:

 border-bottom: 1px solid orange;
于 2013-03-08T20:25:07.840 に答える