删除表格内的特定边框

Question

我有一个 HTML 代码，我想在我最喜欢的浏览器上显示，并且我想删除此 HTML 表格的“ABC”单元格和“KLM”单元格之间的行边框，但我无法做到这一点。

这是浏览器显示的屏幕截图

课程

noborder

应该有效。

.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:last-child {
  border-bottom: none;
}

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

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

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

.lightgreen {
  background-color: lightgreen;
}

<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>
                            <td class='fantasy'><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>

Answer 1

包含 ABC 的表格单元格需要删除底部边框，包含 KLM 的单元格需要删除顶部边框。我使用内联样式在下面进行说明，但您可以创建类来执行相同的操作。

.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:last-child {
  border-bottom: none;
}

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

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

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

.lightgreen {
  background-color: lightgreen;
}

<div class="table-container" style="float: left">
  <div class='box'>
    <table>
      <tr>
        <td class='fantasy noBorder' style="border-bottom:0;">
          <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>
                            <td class='fantasy'  style="border-top:0;"><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>