HTML怎么CSS表格嵌套,CSS#/ HTML5 Chrome中的嵌套表格和子填充
我正在尝试为我的UI库SlateJS设置一个多面板小部件。基本上,多面板小部件通过多个水平或垂直对齐的面板填充所有可用的空间。每个面板都可以有一个与之关联的工具栏。CSS#/ HTML5 Chrome中的嵌套表格和子填充
我正在使用一系列CSS表来划分可用空间,这很好。问题是布局是水平的,因为某些原因,内部表拒绝和任何有填充的元素一起玩。我无法找到填充问题的来源。我在Chrome中诊断了大约17个小时,而且我仍然无法找到此填充的来源。
如果我将一个元素添加到嵌套在多面板内部的面板的内容窗格中,会发生什么情况,外部表格单元的行为就好像它具有与内容的填充值相等的页边距值项目。这真的很奇怪,因为内表格单元格不应该影响外单元格的流动。
下面是采取行动的问题进行现场演示的链接:
注:该网站仅适用于Chrome目前的工作。另外请注意,这个网站使用的阴影很重,所以你必须挖掘阴影的内脏才能看到结构。
这里有一个基本的表示我在做什么:
SlateJS.css:
slate-app {
display: block;
}
/* LIGHTBOX */
/* -------------------------------------------------------------------------------- */
slate-app::shadow > .appContainer {
position: relative;
height: 100%;
}
slate-app::shadow > .appContainer > slate-lightbox {
position: absolute;
display: none;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
slate-app::shadow > .appContainer > slate-lightbox[visible="true"] {
display: block;
}
/* MULTIPANEL */
/* -------------------------------------------------------------------------------- */
slate-multipanel {
display: block;
width: 100%;
height: 100%;
}
slate-multipanel > * {
display: none;
}
slate-multipanel::shadow > .panelTable {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
}
slate-multipanel::shadow .panelRow0, slate-multipanel::shadow .panelRow1 {
display: table-row;
width: 100%;
}
slate-multipanel::shadow .panelRow1 {
width: 100%;
height: 1px;
cursor: ns-resize;
}
slate-multipanel::shadow .panelCell0, slate-multipanel::shadow .panelCell1 {
position: relative;
display: table-cell;
width: 100%;
}
slate-multipanel::shadow .panelCell1 {
width: 1px;
height: 100%;
cursor: ew-resize;
}
slate-multipanel::shadow slate-expander {
position: absolute;
cursor: crosshair;
display: block;
}
/* PANEL */
/* -------------------------------------------------------------------------------- */
slate-panel {
position: relative;
display: table;
width: 100%;
height: 100%;
}
slate-panel > slate-pane:first-of-type {
display: table-row;
width: 100%;
word-wrap: break-word;
background-color: #FF0000;
}
slate-panel > slate-toolbar:first-of-type {
display: table-row;
width: 100%;
height: 0;
}
/* PANE */
/* -------------------------------------------------------------------------------- */
slate-pane::shadow > .paneCell {
display: table-cell;
width: 100%;
}
/* TOOLBAR */
/* -------------------------------------------------------------------------------- */
slate-toolbar::shadow > .toolbarCell {
display: table-cell;
}
标记由Slate.js和她相关的扩展产生:
#shadow-root
#shadow-root
HERP
#shadow-root
DERP
#shadow-root
TEST
#shadow-root
DERP
#shadow-root
HERP
#shadow-root
DERP
从上图中可以看到,邻居表格单元由于某种原因偏移量与其邻居的子元素中的填充量相同。有谁知道为什么会发生这种情况,以及如何预防这种情况?
HTML怎么CSS表格嵌套,CSS#/ HTML5 Chrome中的嵌套表格和子填充相关推荐
- java 操作 word 表格和样式,java读取word表格中的表格 java如何读取word中的excel表格数据...
Java 利用poi 可以直接读取word中的表格保持样式生1.读取word 2003及word 2007需要的jar包 读取 2003 版本(.doc)的word文件相对来说比较简单,只需要 poi ...
- HTML5 原生混合模式,html5 – Chrome中的Chrome css3混合混合模式错误
我有两个重叠的叠加层,叠加的部分使用混合混合模式混合. 在chrome中应用了效果但是使用此属性的div有奇怪的闪烁. 这是闪烁的原因以及如何解决. 我已经在firefox上测试了它的良好运行但不是在 ...
- php中表格的美化,美化网页中的Table表格样式 - 文章教程
Table表格曾经是网页布局的霸主,可惜现在用的少了,主要还是用在表现表格结构化数据的布局,虽说用得少,但是表格用起来还是很方便的,至少有时候比DIV+CSS更方便,关于如何美化网页中的Table表格 ...
- python嵌套列表操作方法_python中多层嵌套列表的拆分方法
场景:有一个多层嵌套的列表如:[[23],[3,3],[22,22],1,123,[[123,a],2]] 拆分成: def splitlist(list): ''' 现有一个列表,里面元素包括 数字 ...
- sql 触发器嵌套条件_SQL Server中的嵌套触发器
sql 触发器嵌套条件 Nested Triggers in SQL Server are actions that automatically execute when a certain data ...
- pythonif嵌套语句题目_python中if嵌套的练习题有哪些?
if嵌套语句在if的基础上加深了难度,因为需要判断多个条件.相对来说,if嵌套语句的练习题会比if语句难得多.之前做过if语句练习题的小伙伴,这回要好好琢磨一番啦.下面我们一起研究一下吧~ 1.当百米 ...
- html word 编辑表格,在Word文档中运用编辑表格的7个技巧
来自:脚本之家 链接:http://www.jb51.net/office/word/466465.html 工作中经常用Word来写各类总结.方案.通告等文件,多数情况下都会文本表格并用.如何在Wo ...
- matlab 显示表格化,[转载]matlab窗口中显示excel表格的问题
刚刚在恒润论坛看到的,感觉还不错,跟踪中-- http://www.hirain.com/forum/dispbbs.asp?boardID=1&ID=301 % -------------- ...
- CAD表格制作之CAD软件中如何新建表格?
在使用正版CAD软件绘制给排水图纸的过程中,经常需要进行CAD表格制作,那么浩辰CAD给排水软件中如何新建表格呢?接下来的CAD教程就和小编一起来看看正版CAD软件--浩辰CAD给排水软件中CAD表格 ...
最新文章
- java写事物提交_fabric-sdk-java 提交事务
- 第十五届全国大学生智能汽车竞赛ROS组车模线上比赛
- 优化SQl的30中常用方法
- matlab二维矩阵可视化几种方法
- 神抓拍!2020搞笑野生动物摄影大赛,哈哈哈哈哈笑到头掉
- Linux安装CUDA的正确姿势
- 嵌入式 Linux 的分类
- nuxt打包路劲问题_简述Nuxt.js
- Install SQL Server 2008 Setup failure
- 32bit还是64bit
- 一个按照行来截取显示文章摘要的函数
- 基于ssm实验室管理系统mysql
- 新库上线 | CnOpenDataA股上市公司裁判文书数据
- PTA每日一题-Python-人民币与美元汇率兑换程序
- OpenCV+Python 彩色图片的 BGR、灰度图、HSV分量图显示的程序
- 电脑计算机找不到指定的程序,光驱双击显示找不到应用程序。怎么办?
- linux中的lsof命令简介
- 目标检测/图像分割 评价标准IOU/准确率及精确率
- python借助jieba包对单独test和txt文档进行中文分词
- 认识和选用常用的几种 GPRS 模块
热门文章
- 51单片机汇编语言基本程序
- 图形学中的贴图采样、走样与反走样等
- 抖音淘客项目,抖音淘客推广什么产品好,抖音淘客如何选商品抖音淘客项目,抖音淘客推广什么产品好,抖音淘客如何选商品
- MapReduce操作实例
- 技术干货:如何高效实现地图自动拼接功能
- “十一黄金周” 绵山笑迎五湖四海宾客
- 打开安装文件提示错误,错误内容全是问号,见图
- 2021云南省高考省统测成绩查询,2021云南高三省统测成绩,教你算自己的全省排名和能上的大学...
- 【uni-app从入门到实战】组件学习
- 机器视觉工业相机与智能相机的区别