21

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 边框以显示如下内容：

+---+---+
|   |   |
+---+   |
|   |   |
+---+---+
4

8 回答 8

17

我的简单解决方案是保留另一个带边框的表格并将您的表格插入到外部表格中。

<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>
于 2013-09-04T09:51:49.560 回答
14

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

HTML 中没有办法实现问题最后一个图中指定的呈现。有各种基于使用其他标记结构的棘手解决方法。

于 2013-09-04T10:48:57.053 回答
11

第一的

<table border="1">
      <tr>
        <td style='border:none;'>one</td>
        <td style='border:none;'>two</td>
      </tr>
      <tr>
        <td style='border:none;'>one</td>
        <td style='border: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:none;'>two</td>
  </tr>
  <tr>
    <td style='border-left:none;border-bottom:none;border-top:none'>one</td>
    <td style='border:none;'>two</td>
</tr>
</table>
于 2016-08-31T09:26:35.580 回答
8

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

你可以在这里检查工作小提琴

根据您更新的问题....您要在哪里添加或删除边框。您应该首先从 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">

这将添加顶部和底部边框，其余部分类似。

于 2013-09-04T09:48:10.807 回答
7 

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

于 2021-01-11T16:29:36.730 回答
1

尝试：

<table border="1">
  <tr>
    <td>
      <table border="">
      ...
      </table>
    </td>
  </tr>
</table>
于 2013-09-04T09:53:28.070 回答
0 
<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>
于 2013-09-04T09:56:36.807 回答
-1

rules="none" 刚才对我来说非常有效。无论我尝试什么，我似乎都无法在特定单元格周围恢复边界。不过我是新手，一直在自学证书课程和 YouTube 教程。我正在编写我的第一个 HTML CSS 网页。我计划将图像放在单元格中，这样我就可以在那些没有问题的地方添加边框。只是想分享一下，以防其他人因为试图在特定单元格上恢复边界而感到难过。

于 2022-01-21T03:06:57.633 回答