Question

我的示例代码：

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

但这只是删除了边框的cellspacing：/

它看起来应该是这样的，但这是使用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>

Answer 1

修改生成标记的程序代码，以便没有border=1个属性，class元素有td个属性，控制每个单元格周围的边框。 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。

Answer 2

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

您需要从（至少）包含表格的单元格中删除默认单元格间距。（内表和外表的边界之间的间距来自单元格间距。）这要求包含td的每个table都具有合适的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; }

Answer 3

尝试<table style="border:0;">不会显示边框，如果这是你想要的东西，你也可以具体说明你想要显示哪一面，例如：

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

您可以进入样式边框 - （左，右，下，上）：“像素”“边框类型”“颜色”。

<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”那么它应该可以工作。

连接多个HTML表格边框

3 个答案: