Question

HTML

<table border="1">
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
</tr>
</table>

这将输出这样的边框

+---+---+
|   |   |
+---+---+
|   |   |
+---+---+

但我想在表格中显示边框，而不是像这样

+--------+
|        |
|        |
|        |
+--------+

如何使用html标记。 （没有CSS /无内联风格）

在某些情况下，我只需删除一些td边框和一些td边框来显示如下内容：

+---+---+
|   |   |
+---+   |
|   |   |
+---+---+

Answer 1

我最终的简单解决方案是保留另一个带边框的表，并将表插入外表。

<table border="1">
<tr>
    <td>
        <table border="0">
            <tr>
                <td>one</td>
                <td>two</td>
            </tr>
            <tr>
                <td>one</td>
                <td>two</td>
            </tr>
        </table>
    </td>
</tr>

</table>

Answer 2

用div围绕它并给它一个边框并从表中删除边框

<div style="border: 1px solid black">
    <table border="0">
        <tr>
            <td>one</td>
            <td>two</td>
        </tr>
        <tr>
            <td>one</td>
            <td>two</td>
        </tr>
    </table>
</div>

您可以查看working fiddle here

根据您更新的问题....您要添加或删除边框的位置。您应首先从html表中删除边框，然后执行以下操作

<td style="border-top: 1px solid black">

假设您只想要顶部边框。同样，你必须为他人做。更好的方法是创建四个css类...

.topBorderOnly {
    border-top: 1px solid black;
}

.bottomBorderOnly {
    border-bottom: 1px solid black;
}

然后根据要求将css添加到您的代码中。

<td class="topBorderOnly bottomBorderOnly">

这将添加顶部和底部边框，其余部分也是如此。

Answer 3

要删除单元格之间的边框，同时保留表格周围的边框，请将属性rules=none添加到table标记。

HTML中无法实现问题的上一个图中指定的渲染。有许多基于使用其他标记结构的棘手的解决方法。

Answer 4

第一

<table border="1">
      <tr>
        <td style='border-right:none;border-left:none;border-bottom:none;border-top:none'>one</td>
        <td style='border-right:none;border-left:none;border-bottom:none;border-top:none'>two</td>
      </tr>
      <tr>
        <td style='border-right:none;border-left:none;border-bottom:none;border-top:none'>one</td>
        <td style='border-right:none;border-left:none;border-bottom:none;border-top:none'>two</td>
    </tr>
    </table>

第二个例子

<table border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td style='border-left:none;border-top:none'>one</td>
    <td style='border-right:none;border-left:none;border-bottom:none;border-top:none'>two</td>
  </tr>
  <tr>
    <td style='border-left:none;border-bottom:none;border-top:none'>one</td>
    <td style='border-right:none;border-left:none;border-bottom:none;border-top:none'>two</td>
</tr>
</table>

Answer 5

  <table border="1">
  <tr>
    <td>one</td>
    <td style="border-bottom-style: hidden;">two</td>
  </tr>
  <tr>
    <td>one</td>
    <td style="border-top-style: hidden;">two</td>
</tr>
</table>

Answer 6

尝试：

<table border="1">
  <tr>
    <td>
      <table border="">
      ...
      </table>
    </td>
  </tr>
</table>

Answer 7

<table border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <table border="0">
                <tr>
                    <td>one</td>
                    <td>two</td>
                </tr>
                <tr>
                    <td>one</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

如何用html删除td边框？

7 个答案: