logo标签列表

去除表格边框

htmlcsshtml-table
4
我想要移除下面这个边框，但我不知道如何做。 请问我该如何使用CSS实现去除效果？希望得到您的帮助，非常感谢！
以下是我的HTML和CSS： 

table {
    width:100%;
 font-size:14px;
}
table, th, td {
    border: 1px solid #00b0f0;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;
}
table tr:nth-child(even) {
    background-color: rgba(0, 176, 240, 0.1);
}
table tr:nth-child(odd) {
   background-color:#fff;
}
table th {
    background-color:#00b0f0;
    color: white;
}
<table>
  <tr>
    <th>IP</th>
    <th>Datum</th>
  </tr>
  <tr>
    <td>::1</td>
    <td>8-5-2016
    </td>
    <td>
      <a href="index.php?page=bruteforce&action=verwijderitem&id=1">
        <img src="assets/images/icons/2.gif" class="iconbtn" alt="Verwijder" title="Verwijder" />
      </a>
    </td>
  </tr>
</table>

3个回答
2
您需要从最后一个“div”的左侧和前一个“div”的右侧移除边框。
因此，我添加了两个类“.no-left-border”和“.no-right-border”，并将它们应用于适用的“td”标签。 

table {
  width: 100%;
  font-size: 14px;
}
table,
th,
td {
  border: 1px solid #00b0f0;
  border-collapse: collapse;
}
th,
td {
  padding: 5px;
  text-align: left;
}
table tr:nth-child(even) {
  background-color: rgba(0, 176, 240, 0.1);
}
table tr:nth-child(odd) {
  background-color: #fff;
}
table th {
  background-color: #00b0f0;
  color: white;
}
.no-border-right {
  border-right: none;
}
.no-border-left {
  border-left: none;
}
<table>
  <tr>
    <th>IP</th>
    <th>Datum</th>
  </tr>
  <tr>
    <td>::1</td>
    <td class="no-border-right">8-5-2016</td>
    <td class="no-border-left">
      <a href="index.php?page=bruteforce&action=verwijderitem&id=1">
        <img src="assets/images/icons/2.gif" class="iconbtn" alt="Verwijder" title="Verwijder" />
      </a>
    </td>
  </tr>
</table>

0

移除最后一个 TD 的 左边框：:nth-last-child(1){
移除倒数第二个 TD 的 右边框：:nth-last-child(2){

table {
    width:100%;
 font-size:14px;
}
table, th, td {
    border: 1px solid #00b0f0;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;
}
table tr:nth-child(even) {
    background-color: rgba(0, 176, 240, 0.1);
}
table tr:nth-child(odd) {
   background-color:#fff;
}
table th {
    background-color:#00b0f0;
    color: white;
}
table tr td:nth-last-child(1){   /* LAST TD */
   border-left: none;
}
table tr td:nth-last-child(2){   /* PENULTIMATE TD */
   border-right: none;
}
<table>
  <tr>
    <th>IP</th>
    <th>Datum</th>
  </tr>
  <tr>
    <td>::1</td>
    <td>8-5-2016
    </td>
    <td>
      <a href="index.php?page=bruteforce&action=verwijderitem&id=1">
        <img src="assets/images/icons/2.gif" class="iconbtn" alt="Verwijder" title="Verwijder" />
      </a>
    </td>
  </tr>
</table>

由于边框合并，即使您看到1px边框，实际上有两个重叠的边框，因此您必须相应地删除两个边框才能达到所需的结果（无边框）。
0

可运行的代码和预览

<html>
    <head>
        <style>
            body,th,td
            {
                font-family:Arial,Helvitica,Sans;
                font-size:13px;
            }
        
            table
            { border-spacing:0; }

            th
            {
                background:#00b0f0;
                color:#FFF;
                border: 1px solid #00b0f0;
                padding:0.4em;
                text-align:left;
            }

            td
            {
                min-width:70px;
                background:#e6f7fe;
                border: 1px solid #00b0f0;
                padding:0.8em;
            }

            .blank
            {
                background:none;
                border:none;
            }

            .no-line-l
            { border-left:none; }

            .no-line-r
            { border-right:none; }

            .the-x
            {
                font-weight:bold;
                text-align:right;
                color:#A00;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>IP</th>
                <th>Datum</th>
                <th class="blank"></th>
            </tr>
            <tr>
                <td class="no-line-r">::1</td>
                <td class="no-line-r">8-5-2016</td>       
                <td class="no-line-l the-x">X</td>
            </tr>
        </table>
    </body>
</html>

预览

enter image description here

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接