Question

我的代码：https://jsfiddle.net/eqhdzz73/25/ 我在哪里放置了代码：http://testblogty678.blogspot.com/

图片：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;
 }

Answer 1

你真的自己添加了！所以就是不要！

考虑这个修改过的示例：https://jsfiddle.net/ok3gzxzh/

CSS：td table tr td {outline: 1px solid blue;}

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

Answer 2

使用这样的大纲

td td {
    outline: 1px solid blue;
}

大纲将仅应用内部内部表格列。

Answer 3

您将轮廓应用于td元素。中间元素也有边框。只需删除它。

HTML：

<td valign="middle" id="noborder">

的CSS：

#noborder{outline:none;}

Answer 4

你是说这个意思吗？向表中添加border-collapse: collapse将删除额外的行。 Updated fiddle

＆＃13;

table {
  border-collapse: collapse;
}
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;
}

＆＃13;

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

＆＃13;

Answer 5

只需要更新css中的td角色，如下所示

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

并在上述

之后添加此新角色

get('/myErrorRoute', function(req, res, next) {
  var errJson = {message: 'Something'};
  res.myCustomField = errJson;
  res.status(400).json(errJson);
});

有没有办法删除底部，顶部，左侧和右侧的底线？

5 个答案: