CSS中的表格三之表格中嵌套表格

最新推荐文章于 2023-07-17 19:35:40 发布
最新推荐文章于 2023-07-17 19:35:40 发布
阅读量2.3k 收藏 5
点赞数
分类专栏： 前端 HTML与CSS css 文章标签： CSS 表格嵌套表格 
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xvzhengyang/article/details/88208991
版权
前端 同时被 3 个专栏收录
80 篇文章 0 订阅
订阅专栏
css
47 篇文章 0 订阅
订阅专栏
HTML与CSS
14 篇文章 0 订阅
订阅专栏

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格中嵌套表格</title>
		<!-- 继续学习表格中嵌套表格
		1.只需要在td中在放入一个table即可
	
	 -->

		<style type="text/css">
			
			
			table {
				margin-left: 20px;
				margin-right: 20px;
				border: thin solid black;
				/* 表格标题在表格的下方 */
				caption-side: bottom;
				/* border-spacing: 10px 30px; */
				border-collapse: collapse;
			}
			
			th,
			td {
				border: thin dotted gray;
			}

			th {
				background-color: #00FFFF;
			}

			caption {
				font-style: italic;
				padding-top: 8px;
			}

			.text-center {
				text-align: center;
			}

			.text-right {
				text-align: right;
			}

			.cell-color {
				background-color: #fcba7a;
			}
			/* td th{
				background-color: #FCBA7A;
			} */
			/* 使用子孙选择器 */
			table table th{
				background-color: #FCBA7A;
			}
		</style>
	</head>
	<body>
		<!-- 分析;一共是7行6列 -->
		<div>
			<table style="margin-top: 100px;">
				<tr>
					<th>Header</th>
					<th>Header</th>
					<th>Header</th>
					<th>Header</th>

				</tr>
				<tr>
					<td>june16</td>
					<td>75</td>
					<td>1204ft</td>
					<td>29686</td>

				</tr>
				<tr>
					<td>75</td>
					<td>4/5</td>
					<td>4/5</td>
					<td>4/5</td>
				</tr>
				<tr>
					<td>75</td>
					<td>4/5</td>
					<td>4/5</td>
					<td>
						<table >
							<!-- 添加了一个一行两列的表格 -->
							<tr>
								<th>Tess</td>
								<td>5/5</td>
							</tr>
							<tr>
								<th>Tong</td>
								<td>4/5</td>
							</tr>
						</table>
					</td>
				</tr>

			</table>

		</div>
	</body>
</html>

 

xvzhengyang
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
HTML怎么CSS表格嵌套,CSS＃/ HTML5 Chrome中的嵌套表格和子填充
weixin_32789783的博客
06-21 380
我正在尝试为我的UI库SlateJS设置一个多面板小部件。基本上，多面板小部件通过多个水平或垂直对齐的面板填充所有可用的空间。每个面板都可以有一个与之关联的工具栏。CSS＃/ HTML5 Chrome中的嵌套表格和子填充我正在使用一系列CSS表来划分可用空间，这很好。问题是布局是水平的，因为某些原因，内部表拒绝和任何有填充的元素一起玩。我无法找到填充问题的来源。我在Chrome中诊断了大约17个小...
el-table表格嵌套子表格，对当前展开行内容修改，当前行默认展开
最新发布
m0_50873766的博客
06-07 972
在设置type="expand"的el-table-column标签里插入<template slot-scope="props">来创建自定义模版，里面可以直接嵌入el-table表格，作为子表。如果数据是接口获取，完成操作后要刷新接口，获取最新数据，这样会发现，当前操作的子表默认不展开，如何刷新接口默认展开当前操作行；遇到子节点嵌套父节点，并带有表头，使用el-table树状结构，通常是不支持的。需要使用expand-row-keys属性，添加在父表，嵌套子表的位置。
HTML怎么CSS表格嵌套,CSS+ jquery实现表格嵌套功能
weixin_29737443的博客
06-21 405
CSS实现表格嵌套功能，因为IE6不支持CSS伪类,因此使用jQuery来配合处理一下效果更好，在有些时候，我们需要表格的嵌套功能，以显示更细分化的数据内容，来看一下我这个用CSS和jquery共同实现的表格嵌套吧，相信会很实用的。 jquery+CSS控制表格嵌套.form-table{border-collapse: collapse;border-spacing: 0px;border-st...
CSS控制表格嵌套
weixin_30520015的博客
08-21 112
1.[图片]table.jpg ​2. [代码]用CSS处理表格嵌套完整代码 <style type="text/css">.form-table{ border-collapse:collapse; border-spacing:0px; border-style:solid solid solid solid; border-width...
HTML——表格、表格嵌套、表格布局
热门推荐
ShyuDai的博客
10-14 5万+
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&am
Element实现表格嵌套、多个表格共用一个表头的方法
10-15
在本文中，我们将深入探讨如何使用Element UI库在Vue.js应用中实现表格嵌套和多个表格共用一个表头的功能。Element UI是一个流行的前端组件库，提供了丰富的UI组件，包括表格（Table）组件，用于创建复杂的表格布局...
用CSS控制表格或单元格强制换行,防止表格被英文单词或中文撑大
10-30
在网页设计中，表格和单元格的布局经常遇到一个问题，那就是连续的英文单词或中文字符会将容器撑大，导致表格的样式不符合预期。为了解决这一问题，我们可以利用CSS来实现强制换行，确保内容不会溢出容器。本文将...
面试题：三行三列布局、表格有合并且不准嵌套使用表格
09-28
总结起来，解决此面试题的关键在于理解和灵活运用HTML表格的`rowspan`和`colspan`属性，同时结合CSS进行样式定制，以达到预期的三行三列布局，并避免使用嵌套表格。这种能力对于前端开发者来说是非常重要的，因为...
CSS.table.rar_Table_css table_table css_表格css
09-20
以下是一些关于"CSS.table.rar_Table_css table_table css_表格css"中涉及的关键知识点： 1. **表格元素基础**： - `<table>`：这是HTML中创建表格的基本标签，用于定义表格的结构。 - `<tr>`：表示表格行（Table...
表格嵌套表格数据
m0_57768704的博客
06-08 594
表格嵌套表格数据通常我们做联表查询，为了接收返回的数据我们往往需要书写一个类，这个类包含着接收两张表的数据字段，如下图： 这是一种写法，但是如果面对一张表里的字段太多，那就得一个个去将这些字段写进类里，这种写法还可能让你的代码看上去比较繁杂，辨识度也会打一个折扣；那我们就来讲一下如何取代这种写法：在类里嵌套一个表数据，然后在读取数据时这样写： 这样就能在一张表数据里嵌套另一张表的数据了。...
html 表格的嵌套
yangshuolll的专栏
10-03 6224
忙了一下午 完成了老师给我的html 作业   表格的嵌套 做的好搓~~ 表格的嵌套
表格(el-table)里面嵌套表格(el-table)
song_song0927的博客
01-03 8882
表格内嵌套表格
css+html 嵌套表格做简单网页
SUZEHUI9636的博客
04-19 551
效果： 在这里插入图片描述 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
php插入表格的设置,css中怎么插入表格
weixin_29526313的博客
03-25 135
css中插入表格的方法：使用【】标签在文档头部定义内部样式表，代码为【 hr{color:sienna;}】。本教程操作环境：windows7系统、css3版，DELL G3电脑。css中插入表格的方法：当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在(文档的)头部：浏览器会从文件mys...
html+css实现多层表格嵌套
bigwifi的博客
08-07 4089
html+css实现多层表格嵌套   https://blog.csdn.net/cb2474600377/article/details/45533555 &lt;div class="result-preview-box clearfix fr"&gt; &lt;table class="table-outer"&gt; &lt;tbody *ngFor="let top...
word中怎么嵌套表格_如何在Word中的表格内嵌套表格
culiyuan8310的博客
09-20 4359
word中怎么嵌套表格If you create documents in Word with complex layouts, tables are a useful method of arranging your content. You can use the cells in a table to structure your text, images, and even other t...
表单嵌套表格实例
LIYICHENG00的博客
07-17 505
【代码】表单嵌套表格实例。
CSS如何插入样式表
KANGCHUNHUANG的博客
07-03 224
CSS如何插入样式表外部样式表内部样式表内联样式表样式表的优先级 外部样式表 内部样式表 内联样式表 这是一个段落。 样式表的优先级 内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式 ...
Dreamweaver页面布局：表格与CSS详解
2. **布局模式布局**：在Dreamweaver中，布局模式允许设计师创建嵌套表格以实现更复杂的布局。例如，一个大的1行1列的表格内可以嵌套多个1行4列或2行2列的小表格，以此来划分页面区域。这种方法便于管理内容，但同样...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xvzhengyang

感谢，励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值