连接多个 HTML 表格边框答案

【问题标题】：Joining multiple HTML table borders连接多个 HTML 表格边框
【发布时间】：2012-10-15 14:02:27
【问题描述】：

我的示例代码：

<!DOCTYPE html>
<html>
<body>


<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>

</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>
    <table border="1">
        <tr>
            <td>
                test
            </td>
            <td>
                <table border="1">
                    <tr>
                        <td>
                            test
                        </td>
                        <td>    
                            wuut
                        </td>   
                    </tr>
                    <tr>
                        <td>
                            test1
                        </td>
                        <td>    
                            wuut1
                        </td>   
                    </tr>
                    <tr>
                        <td>
                            test2
                        </td>
                        <td>    
                            wuut2
                        </td>   
                    </tr>
                </table>
            </td>   
        </tr>
    </table>
  </td>
</tr>
</table>

</body>
</html>


<style>
    table {
        border-collapse: collapse;
    }
</style>

你可以把它贴在这里看看它是什么样子的：http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables

我需要的是，当表格在彼此内部时，表格就像连接的边框。只有数据被分隔的表。

目前表格的右下角有3层边框，但看起来很难看。

我尝试使用 CSS：

border-collapse: collapse;

但这只是删除了边框的单元格间距：/

应该是这样的，但是这个是colspan/rowspan，太乱了：

<!DOCTYPE html>
<html>
<body>


<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td colspan="3"> </td>
</tr>
<tr>
  <td rowspan="3">400</td>
  <td rowspan="3">500</td>
  <td rowspan="3">test</td>
  <td>test</td>
  <td>wuut</td>
</tr>
<tr>
  <td>test1</td>
  <td>test2</td>
</tr>
<tr>
  <td>wuut1</td>
  <td>wuut2</td>
</tr>
</table>

</body>
</html>

【问题讨论】：

那些border="1"在那里做什么？
@ANeves ：当我不把它放在那里时，它不会在我的数据之间画出任何线。

标签： html css html-table

【解决方案1】：

修改生成标记的程序代码，使td元素没有border=1属性，而td元素有class属性，控制每个单元格周围的边框。 class 属性对应于在单元格的选定边上设置边框的 CSS 设置，例如<td class="left top"> 带有 CSS 代码：

.left { border-left-style: solid } 
.top { border-top-style: solid }

您可以在一个规则中设置边框的宽度和颜色，例如：

td { border-width: 1px; border-color: #333; }

您仍然应该设置table { border-collapse: collapse }，并且可能在每个包含表格的单元格上设置padding: 0。

【讨论】：

当边框之间没有值时，是否有一个值可以自动使我的表格边框相互折叠？
@Jaanus，这就是 table { border-collapse: collapse } 所做的（它还删除了单元格之间的间距）。

【解决方案2】：

这有点棘手，因为嵌套表格的边框是分开绘制的。但是您可以使用一些 CSS3 调整一些东西，以便它们在现代浏览器上以所需的方式工作。（如果你也想在古代浏览器上实现这个效果，你需要分散很多class属性。）

您需要从（至少）包含表格的单元格中删除默认单元格间距。（内表和外表的边框间距来自单元格间距。）这要求每个包含table 的td 都有一个合适的class 属性，比如class=containsTable，因为在CSS 中你不能引用由其后代（内容）组成的元素。此外，您需要选择性地关闭任何嵌套表格的第一行单元格的顶部边框等：

.tableContainer { padding: 0; }
table table { border: none }
table table tr:first-child td { border-top: none; }
table table tr:last-child td { border-bottom: none; }
table table td:first-child { border-left: none; }
table table td:last-child { border-right: none; }

【讨论】：

嗯，我添加了这个 css，但它只是删除了所有表格边框。此外，我从数组中的服务器获取数据，所以我只是 for 循环数据并将其放置到表中。就像嵌套的for 循环一样，这就是为什么我在表格中放置表格的原因。我无法手动编辑单个 <td> 元素，我编辑了我的问题，以显示我希望它的外观，您的解决方案可以做到吗？我无法以我需要的方式获得它。
对不起，我的代码只适用于简单的嵌套表。（如果它根本不起作用，您可能使用的是非常旧的浏览器或处于 Quirks 模式的 IE。）三重嵌套需要更复杂的代码。我会发布一个新的答案，因为问题已经发生了本质上的变化。
我使用的是最新的 chrome，根本不使用旧浏览器。我只是将我的代码添加到：http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables，所有<table> 元素更改为：<table class="tableContainer">。你确定它对你有用吗？问题没有改变 imo，基本上我希望它刚刚加入边界。就像在初始问题末尾的示例中一样，使用 rowspans/colspans 完成。
@JukkaK.Korpela 我认为您需要明确添加第一行table td { border: solid 1px;，否则他自己不会到达那里。
@Jaanus, class="tableContainer" 将设置在包含table 元素的td 单元格上，而不是table 元素上。

【解决方案3】：

尝试<table style="border:0;"> 不会显示边框，如果这是您要查找的内容，您还可以具体说明要显示的一侧，例如：

 <table style="border-left:1px solid black;">

可以输入样式边框-(left,right,bottom,top):"pixels" "Type of border" "color"。

<td style="border:0px;">
                            test
                        </td>
                        <td style="border:0px;">    
                            wuut
                        </td>   
                    </tr>

它不会显示它们。或者给他们一个 ID 并使用<style type="text/css">

<style type="text/css">
#aa {border:0px;}
</style>

...

<td ID="aa">

... 如果您可以将 ID="aa" 添加到该循环，那么它应该可以工作。

【讨论】：

输入您不希望显示的
我从服务器中的数组中获取数据，所以我只是为了循环数据并将其放置到表中。就像嵌套循环一样，这就是为什么我在表格中放置表格。我无法手动编辑单个元素，我编辑了我的问题，以显示我希望它的外观，您的解决方案可以做到吗？
如果你可以在你的循环中加入一个额外的然后在开始类型那么它应该可以工作
不是去掉所有边框吗？
是的，它会删除您将相同 ID 放入 -s 的位置