Html 是否有任何可能的方法来删除底部、顶部、左侧和右侧的线条？

我的代码： 我将代码放置在以下位置：

图片：i.imgur.com/3tqGKf6.png

我想知道，是否有任何可能的方法来删除底部、顶部、左侧和右侧的线条

    <table align='center' height='100%'>
      <tr>
        <td valign='middle'>
          <table>
            <tr>
              <td class="one">
    Radio 1
                <br/>
                <span class="two">
                </span>
              </td>
              <td class="one">
    Radio 2
                <br/>
                <span class="two">
                </span>
              </td>
              <td class="one">
    Radio 3
                <br/>
                <span class="two">
                </span>
              </td>
            </tr>
            <tr>
              <td class="one">
    Radio 4
                <br/>
                <span class="two">
                </span>
              </td>
              <td class="one">
    Radio 5
                <br/>
                <span class="two">
                </span>
              </td>
              <td class="one">
    Radio 6
                <br/>
                <span class="two">
                </span>
              </td>
            </tr>
            <tr>
              <td class="two">
    Radio 7
                <br/>
                <span class="two">
                </span>
              </td>
              <td class="two">
    Radio 8
                <br/>
                <span class="two">
                </span>
              </td>
              <td class="two">
    Radio 9
                <br/>
                <span class="two">
                </span>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

    ------------------------------

td {outline:1px solid blue;}

td.one{
    color: #EB7225;
    line-height:1;
    font-size:30px;
    font-weight:bold;
    padding-top: 0px; 
    padding-right: 50px; 
    padding-bottom: 100px; 
    padding-left: 50px;
  }
  span.two{
    color:#000000; 
    display:inline-block; 
    width: 300px; 
    height: 24px;
    background-color:#E2AB58;
  }

  td.two{
   color: #F984E4;
   line-height:1;
   font-size:30px;
   font-weight:bold;
   padding-top: 0px; 
   padding-right: 50px; 
   padding-bottom: 0px; 
   padding-left: 50px;
 }

第一台


第二台


第三台


第四台


第五台


第六台


第七台


第八台


第九台


------------------------------
td{轮廓：1px纯蓝色；}
td.1{
颜色：#EB7225；
线高：1；
字体大小：30px；
字体大小：粗体；
填充顶部：0px；
右边填充：50px；
填充底部：100px；
左侧填充：50px；
}
跨度2{
颜色：#000000；
显示：内联块；
宽度：300px；
高度：24px；
背景色：#E2AB58；
}
td.2{
颜色：#F984E4；
线高：1；
字体大小：30px；
字体大小：粗体；
填充顶部：0px；
右边填充：50px；
垫底：0px；
左侧填充：50px；
}

您已将大纲应用于td元素。 中间的元素也有一个边框。把它拿走

Html:

---

您已将轮廓应用于td元素。 中间的元素也有一个边框。把它拿走

Html:

---

你自己加的！所以不要这样

考虑这个修改后的示例：

CSS:

td table tr td{outline:1px纯蓝色；}

---

在原始示例中，您为每个表单元格添加了一个大纲，同时也为包含所有内部表的外部表单元格添加了大纲。那是你看到的外线。因此，如果修改定义大纲的css规则，使其仅适用于内部表的单元格，则会得到所需的结果

这是你自己加的！所以不要这样

考虑这个修改后的示例：

CSS:

td table tr td{outline:1px纯蓝色；}

---

在原始示例中，您为每个表单元格添加了一个大纲，同时也为包含所有内部表的外部表单元格添加了大纲。那是你看到的外线。因此，如果修改定义大纲的css规则，使其仅适用于内部表的单元格，则会得到所需的结果

你是这个意思吗。向表中添加

边框折叠：折叠将删除多余的行


表格{
边界塌陷：塌陷；
}
运输署{
轮廓：1px纯蓝色；
}
td.one{
颜色：#EB7225；
线高：1；
字体大小：30px；
字体大小：粗体；
填充顶部：0px；
右边填充：50px；
填充底部：100px；
左侧填充：50px；
}
跨度2{
颜色：#000000；
显示：内联块；
宽度：300px；
高度：24px；
背景色：#E2AB58；
}
td.2{
颜色：#F984E4；
线高：1；
字体大小：30px；
字体大小：粗体；
填充顶部：0px；
右边填充：50px；
垫底：0px；
左侧填充：50px；
}

第一台


第二台


第三台


第四台


第五台


第六台


第七台


第八台


第九台


你是这个意思吗。向表中添加
边框折叠：折叠将删除多余的行


表格{
边界塌陷：塌陷；
}
运输署{
轮廓：1px纯蓝色；
}
td.1{
颜色：#EB7225；
线高：1；
字体大小：30px；
字体大小：粗体；
填充顶部：0px；
右边填充：50px；
填充底部：100px；
左侧填充：50px；
}
跨度2{
颜色：#000000；
显示：内联块；
宽度：300px；
高度：24px；
背景色：#E2AB58；
}
td.2{
颜色：#F984E4；
线高：1；
字体大小：30px；
字体大小：粗体；
填充顶部：0px；
右边填充：50px；
垫底：0px；
左侧填充：50px；
}

第一台


第二台


第三台


第四台


第五台


第六台


第七台


第八台
<td valign="middle" id="noborder">

#noborder{outline:none;}

td td {
    outline: 1px solid blue;
}

td {border: none;}

td > table td {outline:1px solid blue;}