<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">
<title>关于表格嵌套表格 表格边重复问题</title>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".main_table table tr:first-child td").css("border-top-style", "none");
$(".main_table table tr td:first-child").css("border-left-style", "none");
});
</script>
<style type="text/css">
.main_table{ /* */
border-collapse:collapse;
border:1px solid #000000;
}
.main_table table{ border-collapse:collapse; }
.main_table td {
padding:0px;
height:25px;
text-align:center;
border-style:solid none none solid;
border-width:1px;
border-color:#000000;
}
.main_table table tr:first-child td{ border-top-style:none;}
.main_table table tr td:first-child{ border-left-style:none;}
/*伪类 CSS*/
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style=" width:500px;background:#CFF;" class="main_table" >
<tr>
<td>
<table width="100%" style="background:#FFC;">
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>2</td><td>2</td>
</tr>
</table>
</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>
<table width="100%" style="background:#CF9;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>
<table width="100%" style="background:#FFC;">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
</table>
</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<p> "This is text"¥
<a href="#">资料来源</a><a href="#">test</a></p>
</div>
</form>
</body>
</html>
border-collapse
设置表格的边框是否被合并为一个单一的边框。
border-collapse:collapse; 默认值：separate //分隔
版本：CSS2 JavaScript 语法：object.style.borderCollapse="collapse"
浏览器支持 所有主流浏览器都支持 border-collapse 属性。
可能的值 1.separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
2.collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 3.inherit 规定应该从父元素继承 border-collapse 属性的值。
常用的是：border-collapse:collapse;
注释： 1.任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。//继承
2.如果没有规定 !DOCTYPE，则 border-collapse 可能产生意想不到的结果。
CSS 伪类用于向某些选择器添加特殊的效果。
:first-child（首个子对象）
锚伪类 在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示， 这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
本文来自博客园，作者：董锡振，转载请注明原文链接：https://www.cnblogs.com/dongxizhen/archive/2012/09/04/2671072.html
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· winform 绘制太阳，地球，月球 运作规律
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人