表格嵌套表格样式,用于打印

最新推荐文章于 2025-07-22 00:16:16 发布
最新推荐文章于 2025-07-22 00:16:16 发布
阅读量97 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： xhtml
原文链接：http://www.cnblogs.com/cnaspnet/archive/2009/10/14/1583020.html
本文介绍了一种使用HTML和CSS创建带有复杂边框样式的表格的方法。通过定义不同的表格单元格类来实现各种边框效果，如顶部、底部、左侧、右侧边框的独立设置。这些技巧有助于开发者更灵活地定制表格外观。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

ContractedBlock.gifExpandedBlockStart.gifCode
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
.table_bordertd{border-top:1px #000000 solid;border-right:1px #000000 solid;}
.table_border{border-bottom:1px #000000 solid;border-left:1px #000000 solid;}
.tbmain { border-style: none;}
.noline {border-left-style: none; border-top-style: none;  border-right-style: none;  border-bottom-style: none; }
.noleftrightop {
    border-left-style: none; 
    border-top-style: none;  
    border-right-style: none;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000000;
}
.noleftop{
    border-left-style: none;
    border-top-style: none;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-right-color: #000000;
    border-bottom-color: #000000;
}
-->
</style>
</head>

<body>
<table width="300" border="1" cellpadding="0" cellspacing="0" bgcolor="#000000" class="tbmain">
  <tr>
    <td bgcolor="#FFFFFF" class="noleftrightop">1</td>
    <td bgcolor="#FFFFFF" class="noleftrightop">2</td>
    <td bgcolor="#FFFFFF" class="noleftrightop">3</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF" class="noleftop">5</td>
    <td bgcolor="#FFFFFF" class="noleftop">5</td>
    <td bgcolor="#FFFFFF" class="noleftrightop">5</td>
  </tr>
    <tr>
    <td bgcolor="#FFFFFF" class="noleftop">5</td>
    <td bgcolor="#FFFFFF" class="noleftop">5</td>
    <td bgcolor="#FFFFFF" class="noleftrightop">5</td>
  </tr>
      <tr>
    <td bgcolor="#FFFFFF" class="noleftop">5</td>
    <td bgcolor="#FFFFFF" class="noleftop">5</td>
    <td bgcolor="#FFFFFF" class="noleftrightop">5</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF" class="noline">6</td>
    <td bgcolor="#FFFFFF" class="noline">7</td>
    <td bgcolor="#FFFFFF" class="noline">8</td>
  </tr>
</table>
<p>&nbsp;</p>
<table width="300" border="0" cellpadding="0" cellspacing="0" class="table_border">
  <tr>
    <td class="table_bordertd">&nbsp;</td>
    <td class="table_bordertd">&nbsp;</td>
    <td class="table_bordertd">&nbsp;</td>
    <td class="table_bordertd"><table width="100%" border="1" cellpadding="0" cellspacing="0" bgcolor="#000000" class="tbmain">
      <tr>
        <td bgcolor="#FFFFFF" class="noleftrightop">1</td>
        <td bgcolor="#FFFFFF" class="noleftrightop">2</td>
        <td bgcolor="#FFFFFF" class="noleftrightop">3</td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftrightop">5</td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftrightop">5</td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftrightop">5</td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF" class="noline">6</td>
        <td bgcolor="#FFFFFF" class="noline">7</td>
        <td bgcolor="#FFFFFF" class="noline">8</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td class="table_bordertd">&nbsp;</td>
    <td class="table_bordertd"><table width="100%" border="1" cellpadding="0" cellspacing="0" bgcolor="#000000" class="tbmain">
      <tr>
        <td bgcolor="#FFFFFF" class="noleftrightop">1</td>
        <td bgcolor="#FFFFFF" class="noleftrightop">2</td>
        <td bgcolor="#FFFFFF" class="noleftrightop">3</td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftrightop">5</td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftrightop">5</td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftrightop">5</td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF" class="noline">6</td>
        <td bgcolor="#FFFFFF" class="noline">7</td>
        <td bgcolor="#FFFFFF" class="noline">8</td>
      </tr>
    </table></td>
    <td class="table_bordertd">&nbsp;</td>
    <td class="table_bordertd">&nbsp;</td>
  </tr>
  <tr>
    <td class="table_bordertd">&nbsp;</td>
    <td class="table_bordertd">&nbsp;</td>
    <td class="table_bordertd">&nbsp;</td>
    <td class="table_bordertd">&nbsp;</td>
  </tr>
  <tr>
    <td class="table_bordertd">&nbsp;</td>
    <td class="table_bordertd"><table width="100%" border="1" cellpadding="0" cellspacing="0" bgcolor="#000000" class="tbmain">
      <tr>
        <td bgcolor="#FFFFFF" class="noleftrightop">1</td>
        <td bgcolor="#FFFFFF" class="noleftrightop">2</td>
        <td bgcolor="#FFFFFF" class="noleftrightop">3</td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftrightop">5</td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftrightop">5</td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftrightop">5</td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF" class="noline">6</td>
        <td bgcolor="#FFFFFF" class="noline">7</td>
        <td bgcolor="#FFFFFF" class="noline">8</td>
      </tr>
    </table></td>
    <td class="table_bordertd">&nbsp;</td>
    <td class="table_bordertd">&nbsp;</td>
  </tr>
  <tr>
    <td class="table_bordertd">&nbsp;</td>
    <td class="table_bordertd"><table width="100%" border="1" cellpadding="0" cellspacing="0" bgcolor="#000000" class="tbmain">
      <tr>
        <td bgcolor="#FFFFFF" class="noleftrightop">1</td>
        <td bgcolor="#FFFFFF" class="noleftrightop">2</td>
        <td bgcolor="#FFFFFF" class="noleftrightop">3</td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftrightop">5</td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftrightop">5</td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftrightop">5</td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF" class="noline">6</td>
        <td bgcolor="#FFFFFF" class="noline">7</td>
        <td bgcolor="#FFFFFF" class="noline">8</td>
      </tr>
    </table></td>
    <td class="table_bordertd">&nbsp;</td>
    <td class="table_bordertd"><table width="100%" border="1" cellpadding="0" cellspacing="0" bgcolor="#000000" class="tbmain">
      <tr>
        <td bgcolor="#FFFFFF" class="noleftrightop">1</td>
        <td bgcolor="#FFFFFF" class="noleftrightop">2</td>
        <td bgcolor="#FFFFFF" class="noleftrightop">3</td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftrightop">5</td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftrightop">5</td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftop">5</td>
        <td bgcolor="#FFFFFF" class="noleftrightop">5</td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF" class="noline">6</td>
        <td bgcolor="#FFFFFF" class="noline">7</td>
        <td bgcolor="#FFFFFF" class="noline">8</td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

转载于:https://www.cnblogs.com/cnaspnet/archive/2009/10/14/1583020.html

html样式表控制表格,HTMLtable表格边框的控制详细说明表
weixin_35182419的博客
06-03 809
详解HTML中table表格边框如何控制html中table表格边框的熟练掌握可以作出很好的效果，本文我们就来详细讲解一下table的边框控制方法。 表格边框的显示与隐藏，是可以用frame参数来控制的。请注意它只控制表格的边框图，而不影晌单元格。 只显示上边框 只显示下边框 只显示左、右HTML代码中关于table的边框控制以及单元格艰巨1.若有一个1行1列的表格，设置table属性，使得他的左...
纯前端导出Excel详细过程（包含按列导出+表格带样式+表格合并+表格嵌套表格+中英文两个sheet）
weixin_43259189的博客
11-10 8674
vue项目纯前端导出Excel，数据结构数组中包含数组，实现按所需的列导出Excel，运用到xlsx-populate插件，导出的Excel文件：带边框、首列合并、表格嵌套表格、分别生成chinese和english两个工作表。
表格样式设置小记[关于嵌套表格]
zhengfengjuan的博客
10-10 423
[color=blue][size=large]嵌套表格宽度自适应问题：[/size][/color] 设置外层单元格 内外间距为0：margin: 0; padding: 0;设置内层嵌套表格width为100%，高度见下节，padding: 0, 0, 0, 0; [color=green]示例：[/color] [color=blue][size=larg...
表格与嵌套表格 样式控制
weixin_34242509的博客
01-28 416
2019独角兽企业重金招聘Python工程师标准>>> ...
HTML打印每一页都有固定的头部
sakura的博客
09-29 1497
HTML打印每一页都有固定的头部 ​ 业务需求是这样的，在对这个表格进行打印的时候，考虑到这个表格会有很多行，万一超过了这一页希望保留左上角的公司logo和右上角的公司名称等信息，但是表格上面的“客户名称”等相关信息就不需要了。 ​ 解决这个问题有从这几个角度出发，这有点类似页眉和页脚的设置。给整个页面设置页边距。但是这个实际上会把整个的边距减小以至于挤掉本来左上角和右上角的logo位置。 @page{ //这个margin根据实际去调整。 margin: 20
6.7将嵌套列表按表格打印
11-01 915
''' 编写一个名为 printTable()的函数， 它接受字符串的列表的列表，将它显示在组 织良好的表格中， 每列右对齐。假定所有内层列表都包含同样数目的字符串。例如， 该值可能看起来像这样： tableData = [['apples', 'oranges', 'cherries', 'banana'], ['Alice', 'Bob', 'Carol', 'David'], ['dogs'
表格table的td中嵌套表格样式
weixin_43643638的博客
01-26 3334
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;met
Vue中使用Element表格嵌套实现复杂逻辑报表
weixin_44368408的博客
05-11 4250
Vue中使用Element表格嵌套实现复杂逻辑报表 某天，接到一个逻辑比较复杂的报表开发任务，如下： 这里是这个报表的左半部分，可以看到，左边的四列属性，功能属性，物料编码，产品名称，规格为固定属性，右边的所有前三列数据相同的子数据（数量，单价，类别）按照月份分类以后再按照客户进行分类，再在此基础上计算小计（数量*单价）。 当然，这还是不是全部内容，我们再来看表格的右半部分： 在表格的最后，需要计算整行的小计数量总和，小计总和并按汇率相应的转化为人民币和美元。 还有年度，月份，客户的查询条件选择。。。
C# 操作现有Word表格详细教程
热门推荐
Eiceblue的专栏
10-31 1万+
在Word中，我们可以给一个表格设置格式（如设置样式，设置边框，设置单元格背景色），添加或删除行、列，设置行高和列宽，合并和拆分单元格，插入图片等，也可以删除该表格。在这篇文章中我将介绍如何使用C#来实现这些操作。
html表格在网页底部,用表格制作网页
weixin_28908857的博客
06-15 1074
你知道表格能做成网页吗?如果你知道，那你又知不知道怎么做呢?下面是小编为你整理的，希望对你有用!利实验目标该网页将利用设计页面的布局，制楚雄师院的页面简介。通过该种制作，我们可以体会到表格在布局设计中的实际运用，体会如何使用表格来控制页面中的元素对象，已达到自然，生动的配置构成元素的目的。实验过程《1》在dreamweaver中执行《文件》中的《新建》命令，创建一个HTML文档。然后在《文件》中保...
js实现简单的打印表格
10-15
此外，虽然此示例实现了基本的表格打印功能，但在实际应用中可能需要进一步优化，例如添加表头、处理数据分页、增加样式等。同时，为了实现打印功能，通常会用到`window.print()`方法，但这部分在提供的代码中并未...
表格高级使用技巧_把表格进行到底(必看)
10-30
5. 立体表格的制作方法：通过多层嵌套表格，使用不同的边框颜色和宽度，以及透明度等CSS属性，可以制作出具有立体感的表格，给用户以视觉上的层次感和深度感。 6. 利用表格制作表中表效果：将一个表格嵌套在另一个...
HTML基础：表格嵌套与网页构成解析
嵌套表格的结构就是在父表格的某个单元格(`<td>`)或行(`<tr>`)内插入一个新的`<table>`标签。 网页的基本构成元素包括文本、图像、超链接、表格、表单、动画、框架等。文本是网页的主要内容，图像可以增强视觉效果...
11. HTML 中 DOCTYPE 的作用
weixin_64684095的博客
07-22 581
H5 的声明HTML5 的 DOCTYPE 声明HTML5 中的声明用于告诉浏览器当前文档使用的是 HTML5 的文档类型。它必须是文档中的第一行内容（在任何 HTML 标签之前），以确保浏览器能够正确地解析和渲染页面。DOCTYPE 的作用触发标准模式DOCTYPE声明的主要作用是让浏览器以标准模式（Standards Mode）来解析和渲染页面，而不是以兼容模式（Quirks Mode）。兼容性：在没有DOCTYPE声明的情况下，浏览器可能会进入兼容模式，这会导致页面的布局和样式表现不一致。
setools-console-4.3.0-2.el8.tar.gz
08-19
# 适用操作系统：Centos8 #Step1、解压 tar -zxvf xxx.el8.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm
十万级人物关系图谱数据集：算法抽取加人工整理，支持多场景人物关系应用
08-19
资源下载链接为： https://pan.quark.cn/s/c0808ead71da 十万级人物关系图谱数据集：算法抽取加人工整理，支持多场景人物关系应用（最新、最全版本！打开链接下载即可用！）
使用php采集淘宝产品数据，并上传到opencart 商城中
最新发布
08-19
资源下载链接为： https://pan.quark.cn/s/4a147e44499f 使用php采集淘宝产品数据，并上传到opencart 商城中（最新、最全版本！打开链接下载即可用！）
soci-sqlite3-4.0.0-2.el8.tar.gz
08-19
# 适用操作系统：Centos8 #Step1、解压 tar -zxvf xxx.el8.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm
达梦数据库 exporter 采集器对接 prometheus+grafana 提供表盘
08-19
资源下载链接为： https://pan.quark.cn/s/284a49499f51 达梦数据库 exporter 采集器对接 prometheus+grafana 提供表盘（最新、最全版本！打开链接下载即可用！）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值