0

我的示例代码：

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

3 回答 3

3

修改生成标记的程序代码，使其没有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在包含表格的每个单元格上设置。

于 2012-10-15T14:44:58.577 回答
1

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

您需要从（至少）包含表格的单元格中删除默认单元格间距。（内表和外表的边框间距来自单元格间距。）这要求每个td包含 a的属性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; }
于 2012-10-15T14:26:58.707 回答
0

如果这是您要查找的内容，请尝试<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" 添加到该循环，那么它应该可以工作。

于 2012-10-15T14:11:24.713 回答