工作代码＆amp;预览

Question

我想删除以下边框，但我不知道该怎么做。

如何使用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>

Answer 1

您需要从上一个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>

Answer 2

从最后道明:nth-last-child(1){中删除左边框 从倒数第二个道明:nth-last-child(2){

中删除右边框

＆＃13;

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;
}

＆＃13;

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

＆＃13;

由于边框折叠，即使您看到1px边框，实际上还有两个重叠的边框，因此您必须相应地删除两个边框以获得所需的结果（无边框）。

Answer 3

工作代码＆amp;预览

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

删除表格边框

3 个答案:

工作代码＆amp;预览

预览