表格table的td中嵌套表格样式

最新推荐文章于 2024-02-20 16:38:55 发布
最新推荐文章于 2024-02-20 16:38:55 发布
阅读量3.1k 收藏 3
点赞数
分类专栏： 前端 文章标签： table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43643638/article/details/86654562
版权

<!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>
     * {
         margin: 0;
         padding: 0;
    }
    body {
        padding: 20px;
    }
    table {
        width: 100%;
        border-collapse: collapse;
        text-align: center;
    }
    table th,td {
        border: 1px solid #999;
    }
    .rowWidth {
        width: 300px;
    }
    #table1 {
      min-width: 1200px;
     } 
    .table2 tr td:nth-child(1) {
        border-left: 0;
    }
    .table2 tr:nth-child(1) td {
        border-top: 0;
    }
    .table2 tr:nth-child(1) td {
        border-right: 0;
    }
    .table3 tr:nth-last-child(1) td{
        border-bottom: 0;
    }
    .table2 tr:nth-last-child(1)>td{
        border-bottom: 0;
    }
    

</style>
</head>
<table id="table1">
    <tr>
        <th>ID</th>
        <th>主订单</th>
        <th class="rowWidth">子订单</th>
        <th class="rowWidth">名称</th>
        <th class="rowWidth">价格</th>
         <th class="rowWidth">价格</th>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td colspan="4">
            <table class="table2">
                <tr >
                    <td class="rowWidth">2</td>
                    <td>
                        <table class="table3">
                            <tr >
                                <td class="rowWidth">3</td>
                                <td class="rowWidth">3</td>
                                 <td class="rowWidth">3</td>
                            </tr>
                             <tr >
                                <td class="rowWidth">4</td>
                                <td class="rowWidth">4</td>
                                <td class="rowWidth">4</td>
                            </tr>
                              <tr >
                                <td class="rowWidth">5</td>
                                <td class="rowWidth">5</td>
                                <td class="rowWidth">5</td>
                            </tr>
                        </table>
                    </td>
                </tr>
                   <tr >
                    <td class="rowWidth">2</td>
                    <td>
                        <table class="table3">
                            <tr >
                                <td class="rowWidth">6</td>
                                <td class="rowWidth">6</td>
                                <td class="rowWidth">6</td>
                            </tr>
                             <tr >
                                <td class="rowWidth">7</td>
                                <td class="rowWidth">7</td>
                                <td class="rowWidth">7</td>
                            </tr>
                              <tr >
                                <td class="rowWidth">8</td>
                                <td class="rowWidth">8</td>
                                <td class="rowWidth">8</td>
                            </tr>
                        </table>
                    </td>
                </tr>
                 <tr >
                    <td class="rowWidth">2</td>
                    <td>
                        <table class="table3">
                            <tr >
                                <td class="rowWidth">9</td>
                                <td class="rowWidth">9</td>
                                <td class="rowWidth">9</td>
                            </tr>
                             <tr >
                                <td class="rowWidth">0</td>
                                <td class="rowWidth">0</td>
                                <td class="rowWidth">0</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
     <tr>
        <td>1</td>
        <td>1</td>
        <td colspan="4">
            <table class="table2">
                <tr >
                    <td class="rowWidth">2</td>
                    <td>
                        <table class="table3">
                            <tr >
                                <td class="rowWidth">1</td>
                                <td class="rowWidth">1</td>
                                 <td class="rowWidth">1</td>
                            </tr>
                             <tr >
                                <td class="rowWidth">2</td>
                                <td class="rowWidth">2</td>
                                 <td class="rowWidth">2</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

</html>

 

weixin_43643638
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
任意改变table表格td的宽度 支持表格TD拖拽
09-01
任意改变table表格td的宽度 动态td的宽度 任意改变table表格td的宽度 动态td的宽度 任意改变table表格td的宽度 动态td的宽度
table嵌套table边框样式
02-21
table嵌套table的边框样式代码例子（包含div嵌套table的外边框）。
el-table实现嵌套表格的展示
小阮的笔记本
02-20 1819
el-table嵌套表格展示。表单存在子表，列表展示子表
html表格标签使用与注意事项
qq_50526087的博客
03-16 514
表格的基本标签 场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表。 基本标签： 标签名 作用 table 表格的整体，用于包含多个tr tr 表格的每行，用于包含多个td td 表格单元格，用于包含内容 注意事项：嵌套关系为：table > tr > td 例如： 代码如下： <body> <!-- 表格标签嵌套关系：table（表格整体，用于包裹多个tr） > tr.
Mobile-DataTables:一个 jquery 插件，使 jQuery DataTables 为移动和手持设备正确呈现。 在以下链接中查看示例
06-22
移动数据表 一个 jquery 插件，使 jQuery DataTables 为移动和手持设备正确呈现 *首先，dataTable_mobify 可以应用于任何具有指定 id 的表和使用 带标题； 它不仅适用于数据表。 *此功能是为响应式设计而构建的； 因此，如果您的表格嵌套在固定值元素（即 - 宽度为 960 像素的 div）中，则在较小屏幕尺寸的设备上查看时，该元素必须进入百分比。 /css/styles.css 文件中的第 12 行将包含 table 元素的 div#container 的宽度更改为 100%。 * /js/dataTable.mobify.js 的第 29 行为每个单元格内容之前的元素添加了独特的样式。 您可以修改这条线以调整跨度的位置。 这个插件是基于这篇网络文章设计的 *与那篇文章不同，跨度被用来代替 td:before{'content':''} css，
网页中多个table嵌套的一些小技巧
weixin_30412013的博客
07-02 290
1、以前经常用到的一个表格边框样式技巧（把表格的背景色设为黑色或其它颜色，然后又把单元格设为白色或其它的网页背景色），如下图： 图一 1px的表格（颜色可自己选） 代码如下： 1 <table width="600" border="0" cellpadding="0" cellspacing="1" bgcolor="#FF0000"> 2 <tr&gt...
html里table表格里嵌套table表格
wyj1122的博客
05-08 1万+
<table class="layui-table" lay-size="sm"> <thead> <tr> <th>订单编号</th> <th>订单创建时间</th> <th>机器名</t...
table中嵌套多层table
赵树祥的博客
05-15 1万+
因工作业务需求，需要展示一个多层嵌套的数据结构，现整理如下，分享给需要的朋友，应用框架vue2。 初始的数据结构如下： new Vue({ el:"#table1", data:{ table1:[{ order: "ex-20171006", table2: [{ kind: '...
table表格嵌套，边框重叠变粗的解决
u011830181的博客
11-06 1万+
在外层table与内层table嵌套，内外表格都需边框时，设置“border=1”，但边框会重复，造成某些地方边框粗，有些地方边框细，如图     解决方法   1、外表格样式 2、内表格样式
elementUi——table组件与table的嵌套——技能提升
yehaocheng520的博客
12-22 4235
今天写前台页面时，遇到一个需求，效果图如下： 使用的是elementUi中的el-table表格组件，需要在特定的行下面添加一行查看替代产品，点击查看替代产品后，可以通过调接口的方式获取替代产品，然后渲染到页面上。此时可以点击收起替代产品,进行替代产品的隐藏。 1.elementUi官网上关于el-table的部分有个展开行的功能 此时可以通过这个展开行的功能来渲染查看替代产品的部分： <el-table-column type="expand" width="1"> <temp
element-ui实现table表格的嵌套（table表格嵌套）功能实现
热门推荐
yehaocheng520的博客
05-19 3万+
最近在做电商类型的官网，希望实现的布局如下：有表头和表身，所以我首先想到的就是table表格组件。 表格组件中常见的就是：标题和内容一一对应： 像效果图中的效果，只用基础的表格布局是不行的，因此我想到了table表格中的展开功能： 然后通过：默认展开所有行 然后在里面的表格table中默认隐藏表头： 其他的则需要通过样式进行实现了 element-ui中table表格的嵌套（代码部分） <el-table v-bind:data="tableData" :default-expand-al
CSS display属性的table表格布局
01-19
项目改造中遇到DIV+CSS实现的table，新需求需要在表格使用单元格合并，网上调查返现CSS display:table实现的table表格，没有单元格的属性和样式，经过一番思考，曲折现实了单元格的合并，即采用正行嵌套一个单独的...
解决Antd Table组件表头不对齐的问题
01-18
背景： 在使用Antd的table组件时，由于表头参数过多，于是设置了scroll属性，在其超出一定宽度后进行滚动 但是在添加了该属性之后，...3、对table的每一个td 添加 className=“word-wrap”，并设置对应样式 （因为t
ASP.NET程序中常用的三十三种代码.txt
03-16
　TableCell myTableCell; 　myTableCell = e.Item.Cells[14]; 　LinkButton myDeleteButton ; 　myDeleteButton = (LinkButton)myTableCell.Controls[0]; 　myDeleteButton.Attributes.Add("onclick","return ...
css-layout-positioning-08:CSS 定位
07-20
CSS 定位 目标 在课程结束时，学生应该能够： 使用边距和填充在元素内部和外部建立间距。 解释网页中不同类型的距离测量之间的... 在表格中嵌套表格很快就变成了一场噩梦； 你如何区分一个级别的和另一个级别的<td>
C#，数值计算，解微分方程的龙格-库塔二阶方法与源代码
04-25
C#，数值计算，解微分方程的龙格-库塔二阶方法与源代码 微分方程 含有导数或微分的方程称为微分方程，未知函数为一元函数的微分方程称为常微分方程。 微分方程的阶数 微分方程中导数或微分的最高阶数称为微分方程的阶数。 微分方程的解 使得微分方程成立的函数称为微分方程的解。 微分方程的特解 微分方程的不含任意常数的解称为微分方程的特解。 微分方程的通解 所含相互独立的任意常数的个数与微分方程的阶数相等的微分方程的解称为微分方程的通解。
桌面聊天室
04-25
该毕业设计采用了c/s架构，通过javase中的知识编写完成，系统功能包括：用户注册，用户登录，聊天功能。 对于刚学完java基础的同学来说可以通过该毕业设计加深对所学知识的理解。该系统使用socket进行数据的发送，用户注册登录之后，可以进行多人聊天，功能类似qq群聊。
【前端素材】大数据-交通大屏.zip
最新发布
04-25
大数据技术指的是用于处理和分析大规模数据集的技术和工具。以下是一些常见的大数据技术和工具： Hadoop：Apache Hadoop是一个用于分布式存储和处理大规模数据的开源框架。它包括Hadoop Distributed File System（HDFS）用于数据存储和MapReduce用于数据处理。 Spark：Apache Spark是一个快速、通用的集群计算系统，提供了比MapReduce更快的数据处理能力。它支持内存计算和更多复杂的数据处理流程。 NoSQL数据库：NoSQL数据库（如MongoDB、Cassandra等）则更适用于处理这类数据。 数据仓库：数据仓库是一个用于集成和分析大规模数据的存储系统，一些知名的数据仓库包括Snowflake、Amazon Redshift等。 数据湖：数据湖是一个存储结构化和非结构化数据的存储池，用于支持数据分析和机器学习应用。 机器学习：大数据技术也广泛应用于机器学习领域，支持大规模数据的模型训练和预测分析。 流式处理：针对实时数据处理需求，流式处理技术（如Apache Kafka、Apache Flink）可以实时。
inspect：windows系统下的控件识别工具
04-25
windows系统下的控件识别工具，可用于桌面应用的UI自动化测试
html中table表格文字居中
10-06
在HTML中，要将表格文字居中对齐，可以使用CSS样式来实现。通过设置表格的单元格（td）或者表头单元格（th）的样式，可以实现文字的水平居中和垂直居中。 要实现文字水平居中，可以使用text-align属性，并将其设置为center。例如： ```html <td style="text-align: center;">文字居中</td> ``` 要实现文字垂直居中，可以使用vertical-align属性，并将其设置为middle。注意，该属性只对table元素中的行内元素（如td、th）有效。例如： ```html <td style="vertical-align: middle;">文字居中</td> ``` 如果表格中的文字是多行的，上述方法可能无效。这时候可以将文字放置在一个div元素中，并在div元素内再嵌套一个table元素。然后使用vertical-align属性将table元素垂直居中。例如： ```html <td> <div style="display: table; height: 100%; width: 100%;"> <div style="display: table-cell; vertical-align: middle;"> 多行文字居中 </div> </div> </td> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值