如何移除HTML表格中指定单元格间的行边框？

问题原因 #

你写的.noBorder td:last-child选择器逻辑错误——.noBorder是直接加在<td>上的，这个选择器会去寻找带.noBorder类元素内部的最后一个<td>，根本不会作用到目标单元格上。另外在表格border-collapse: collapse的模式下，相邻单元格的边框是合并的，要移除ABC（第一行第一个td）和KLM（第二行第一个td）之间的边框，需要同时去掉ABC单元格的下边框和KLM单元格的上边框。

修改方案 #

1. 调整CSS选择器，让.noBorder类直接作用到目标td上，移除其下边框
2. 给KLM所在的td新增一个类，移除其上边框

修改后的代码 #

CSS 代码

.box {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  text-align: center;
}

.table-container {
  width: 50%;
  display: inline-block;
  text-align: center;
}

table {
  font-family: 'Comic Sans MS', cursive;
  text-align: center;
  margin: 0 auto;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid black;
  padding: 8px;
  text-align: center;
}

th {
  background-color: #f2f2f2;
}

/* 修改选择器，直接作用到带noBorder类的td */
.noBorder {
  border-bottom: none;
}
/* 新增类，移除单元格上边框 */
.noBorderTop {
  border-top: none;
}

.fantasy {
  font-family: 'Fantasy';
}

.times {
  font-family: 'Times New Roman';
}

.comics {
  font-family: 'Comic Sans MS', cursive;
}

.lightgreen {
  background-color: lightgreen;
}

HTML 代码

<div class="table-container" style="float: left">
  <div class='box'>
    <table>
      <tr>
        <td class='fantasy noBorder'>
          <font size='5'>ABC </font>
        </td>
        <td class='comics' rowspan="2">
          <font size='15'><b><center>DE</center></font></td>
        <td class='comics lightgreen' rowspan="2"><font size='15'><b><center>FG</center></font></td>
        <td class='fantasy noBorder'><font size='5'>HIJ </font></td>
      </tr>
      <tr>
        <!-- 给KLM的td添加noBorderTop类 -->
        <td class='fantasy noBorderTop'><font size='5'>KLM </font></td>
        <td class='fantasy'><font size='5'>NOP</font></td>
      </tr>
      <tr>
        <td class='fantasy'><font size='5'>QRS</font></td>
        <td class='comics' colspan="2"><font size='4'><b><center>TUV</center></font></td>
        <td class='fantasy'><font size='5'></font></td>
      </tr>
      <tr>
        <td class='comics'><font size='1'><i>WX</font></td>
        <td class='comics'><font size='1'><b><center>YZ</center></font></td>
        <td class='comics'><font size='1'><b><center>AB</center></font></td>
        <td class='comics'><font size='1'><i>CD</font></td>
      </tr>
    </table>
  </div>
</div>

补充说明 #

你代码里的<font>、<center>标签都是HTML4的废弃标签，建议用CSS属性替代：比如用font-size控制字体大小，text-align: center控制文本对齐，这样代码更符合现代Web标准。

内容的提问来源于stack exchange，提问作者ImFabien75