table 布局 刨坑 3 无法超出父元素的原因(其实只要增加td数量就依然可以超出，只是看起来没超出)

最新推荐文章于 2023-10-09 09:31:46 发布
最新推荐文章于 2023-10-09 09:31:46 发布
阅读量378 收藏
点赞数
分类专栏： table布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26239917/article/details/102860807
版权

word-break: break-word;
font-size 太小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			html {
				font-size: calc(100vw/14.2);
			}

			.scrollView {
				    margin: 1rem 5%;
				    background: #008000;
				    overflow: auto;
				    width: 12rem;
					font-size: 10px;
					word-break: break-word;
			}

			.td {
				/* width: 200px; */
				/* font-size: 20px; */
			}

			table {
				width: 100%;
				border-collapse: collapse;
				border-spacing: 0;
				padding: 0;
				margin: 0;
			}

			table tr td {
				height: .5rem;
				border: 1px solid red;
				text-align: center;
				box-sizing: border-box;
			}

			.item {
				background: green;
				/* height: 300px; */
			}

			.scrollView::-webkit-scrollbar {
				height: .1rem;

				/* width: 10px; */
				background-color: #eee;
			}

			.scrollView::-webkit-scrollbar-track {
				background-color: #eee;
			}

			.scrollView::-webkit-scrollbar-thumb {
				border-radius: .04rem;
				background: #ABAB00;
				background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
			}

			.scrollView::-webkit-scrollbar-button {
				display: none;
			}
			.outer{
				font-size: 1vw;
			}
		</style>
	</head>
	<body>
		<div class="outer">
			<div class="scrollView">
					<table>
						<tr>
							<td>
								<p class="td">M-0</p>
							</td>
							<td>
								<p class="td">M-1</p>
							</td>
							<td>
								<p class="td">M-2</p>
							</td>
							<td>
								<p class="td">M-3</p>
							</td>
							<td>
								<p class="td">M-4</p>
							</td>
							<td>
								<p class="td">M-5</p>
							</td>
							<td>
								<p class="td">M-6</p>
							</td>
							<td>
								<p class="td">M-7</p>
							</td>
							<td>
								<p class="td">M-8</p>
							</td>
							<td>
								<p class="td">M-9</p>
							</td>
							<td>
								<p class="td">M-10</p>
							</td>
							<td>
								<p class="td">M-11</p>
							</td>
							<td>
								<p class="td">M-12</p>
							</td>
							<td>
								<p class="td">M-13</p>
							</td>
							<td>
								<p class="td">M-14</p>
							</td>
							<td>
								<p class="td">M-15</p>
							</td>
							<td>
								<p class="td">M-16</p>
							</td>
							<td>
								<p class="td">M-17</p>
							</td>
							<td>
								<p class="td">M-18</p>
							</td>
							<td>
								<p class="td">M-19</p>
							</td>
							<td>
								<p class="td">M-20</p>
							</td>
							<td>
								<p class="td">M-21</p>
							</td>
							<td>
								<p class="td">M-22</p>
							</td>
							<td>
								<p class="td">M-23</p>
							</td>
							<td>
								<p class="td">M-24</p>
							</td>
							<td>
								<p class="td">M-25</p>
							</td>
							<td>
								<p class="td">M-26</p>
							</td>
							<td>
								<p class="td">M-27</p>
							</td>
							<td>
								<p class="td">M-28</p>
							</td>
							<td>
								<p class="td">M-29</p>
							</td>
						</tr>
						<tr>
							<td>
								<p class="td">stage-A</p>
							</td>
							<td>
								<p class="td">stage-A</p>
							</td>
							<td>
								<p class="td">stage-A</p>
							</td>
							<td>
								<p class="td">stage-A</p>
							</td>
							<td>
								<p class="td">stage-A</p>
							</td>
							<td>
								<p class="td">stage-A</p>
							</td>
							<td>
								<p class="td">stage-A</p>
							</td>
							<td>
								<p class="td">stage-A</p>
							</td>
							<td>
								<p class="td">stage-A</p>
							</td>
							<td>
								<p class="td">stage-A</p>
							</td>
							<td>
								<p class="td">stage-A</p>
							</td>
							<td>
								<p class="td">stage-A</p>
							</td>
							<td>
								<p class="td">stage-A</p>
							</td>
							<td>
								<p class="td">stage-A</p>
							</td>
							<td>
								<p class="td">stage-A</p>
							</td>
							<td>
								<p class="td">stage-A</p>
							</td>
							<td>
								<p class="td">stage-A</p>
							</td>
							<td>
								<p class="td">stage-A</p>
							</td>
							<td>
								<p class="td">stage-A</p>
							</td>
							<td>
								<p class="td">stage-A</p>
							</td>
							<td>
								<p class="td">stage-A</p>
							</td>
							<td>
								<p class="td">stage-A</p>
							</td>
							<td>
								<p class="td">stage-A</p>
							</td>
							<td>
								<p class="td">stage-A</p>
							</td>
							<td>
								<p class="td">stage-A</p>
							</td>
							<td>
								<p class="td">stage-A</p>
							</td>
							<td>
								<p class="td">stage-A</p>
							</td>
							<td>
								<p class="td">stage-A</p>
							</td>
							<td>
								<p class="td">stage-A</p>
							</td>
							<td>
								<p class="td">stage-A</p>
							</td>
						</tr>
						<tr>
							<td>
								<p class="td">0</p>
							</td>
							<td>
								<p class="td">1</p>
							</td>
							<td>
								<p class="td">2</p>
							</td>
							<td>
								<p class="td">3</p>
							</td>
							<td>
								<p class="td">4</p>
							</td>
							<td>
								<p class="td">5</p>
							</td>
							<td>
								<p class="td">6</p>
							</td>
							<td>
								<p class="td">7</p>
							</td>
							<td>
								<p class="td">8</p>
							</td>
							<td>
								<p class="td">9</p>
							</td>
							<td>
								<p class="td">10</p>
							</td>
							<td>
								<p class="td">11</p>
							</td>
							<td>
								<p class="td">12</p>
							</td>
							<td>
								<p class="td">13</p>
							</td>
							<td>
								<p class="td">14</p>
							</td>
							<td>
								<p class="td">15</p>
							</td>
							<td>
								<p class="td">16</p>
							</td>
							<td>
								<p class="td">17</p>
							</td>
							<td>
								<p class="td">18</p>
							</td>
							<td>
								<p class="td">19</p>
							</td>
							<td>
								<p class="td">20</p>
							</td>
							<td>
								<p class="td">21</p>
							</td>
							<td>
								<p class="td">22</p>
							</td>
							<td>
								<p class="td">23</p>
							</td>
							<td>
								<p class="td">24</p>
							</td>
							<td>
								<p class="td">25</p>
							</td>
							<td>
								<p class="td">26</p>
							</td>
							<td>
								<p class="td">27</p>
							</td>
							<td>
								<p class="td">28</p>
							</td>
							<td>
								<p class="td">29</p>
							</td>
						</tr>
					</table>
				</div>
			
		</div>
		</body>
</html>
Fade Away
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
table中绝对定位元素相对td定位失效解决方案
weixin_34109408的博客
04-29 533
开门见山！ 问题：在一个table中，我需要在td里面绝对定位一个div， 写法：td{position:relative;} div{position:absolute;} OK,就这么简单，思路也没什么问题，并且在chrome中结果完美。 BUT!!! IE(此处只测了一下IE，或许别的浏览器也不行，自行测试)，坑比的IE来了， 失效了，定位失败，没有预期的效果。 那么在我的项...
html 表格比父页面大,关于html：为什么表格布局是固定的，但会影响父元素的宽度？...
weixin_30941657的博客
06-03 184
有人可以解释为什么我的div和table-layout:fixed改变了其父元素(在这种情况下为body)的宽度，使其在不应该是100％的情况下变为100％的宽度吗？body {border: 2px solid red;height: 100vh;margin:0;padding: 0;position: absolute;}.c{display: table;width: 80%; /* An...
解决表格Table宽度设置无效的问题
weixin_43565079的博客
12-10 1万+
Table表格单元格宽度无效
随便记一下el-table奇怪宽度问题
lx233
04-07 2671
背景 接入子应用的页面，忽然宽度就1900，其他页面没设置什么，却都在1300左右 原因 el-table太长，某些封装问题，影响到了 之前某次看到el-table 无限期增长，反正删掉table就ok 解决 方法1 解决方案： 在table外层包一层div元素，设置css宽度继承自父级宽度，添加代码：position:absolute; width:100%;一般上级元素就设置这flex布局flex:1;加入一行代码：position:relative; 示例截图： 注意： 如果遇到flex布局中使用
解决宽屏下el-table表头错位无法占满宽度100%的问题
随风丶逆风的博客
11-11 4467
问题 在宽屏情况下el-table出现表头错位且无法占满宽度100%的问题： 解决方案 在通用样式文件下，添加如下样式： .el-table th.gutter { display: table-cell !important; } .el-table colgroup.gutter { display: table-cell !important; } 原理 使用display: table-cell可以让标签元素以表格单元格的形式呈现，类似于td标签，此时元素对宽度高度敏感，对margin
CSS超出文本指定宽度用省略号代替和文本不换行
09-24
CSS提供了多种方法来处理这种情况，尤其是当文本超出指定宽度时。本文将深入探讨如何使用CSS实现超出文本指定宽度用省略号代替以及禁止文本换行。 1. **一般文字截断** 当我们希望文本在特定宽度后被截断并用省略...
iview table 表格实现 单列超出隐藏 鼠标悬浮出现详情
01-07
直接复制粘贴下面代码 就可以 { title: '交易订单号', align: 'center', key: 'id', minWidth: 120, render: (h, params) => { let texts=params.row.id; //这里的params.row.id 是 key值 if(params.row.id !...
基于display:table的CSS布局让HTML元素和像table一样
12-13
比如，它可能无法提供像`<table>`元素那样的交互性，如排序、筛选等。此外，在某些旧版本的浏览器中可能不支持这些CSS属性，这需要开发者考虑兼容性问题。 总结来说，基于`display:table`的CSS布局提供了一种灵活的...
JS组件Bootstrap Table布局详解
12-28
Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素： 表格类 下表样式可用于表格中： , <th> 和 <td> 类 下表的类可用于表格的行或者单元格： 基本的表格 如果您想要一个只带...
CSS display属性的table表格布局
01-19
项目改造中遇到DIV+CSS实现的table，新需求需要在表格使用单元格合并，网上调查返现CSS display:table实现的table表格，没有单元格的属性和样式，经过一番思考，曲折现实了单元格的合并，即采用正行嵌套一个单独的...
element ui 表格el-table宽度不能自适应
honeymoon_的博客
06-30 1万+
问题描述 用了flex布局，左侧固定宽度，右侧flex：1；表格在右侧区域，将屏幕变大，表格随着变宽，当屏幕变小时，表格不会随着屏幕变小，宽度无法自适应 解决 在右侧区域，及flex：1；区域overflow：hidden即可解决。 .body { display: flex; width: 100%; height: 100%; //左侧 .left-menu { width: 150px; height: 100%; } /
el-table 设置最大高度且能刚好撑满
最新发布
weixin_45049852的博客
10-09 1038
90vh视口高度的90%自行调整即可。
table在火狐浏览器下内容过多时超出父元素的宽度
weixin_41557825的博客
04-24 498
解决方法： 查看父元素是否display:flex;布局，且table父元素添加了flex:1;。所以解决时将flex: 1;去掉。 去掉后当屏幕宽度过小，table自动显示滚动条。
table 超出 父元素 div
qq_41536505的博客
08-12 2652
table 超出 父元素 div 实际是把表格写在了 redio 里面 问题： table 在 div 里面，想要的效果是如果 table 的内容超出了父元素就显示省略号，再把 table 的宽度设置为100%，但是，最后数据比较长还是超出了父元素 原因： table 是有不一样的默认样式 table-layout 值 描述 auto 默认，列宽由单元格设定 fixed 列宽由表格宽度或列宽自己设定 inherit 继承，从父元素继承table-layout的值 解决方案：
vue-drag-resize 可拖动缩放元素的Vue组件
热门推荐
weixin_55534306的博客
04-07 1万+
vue-drag-resize 属性及事件
表格(table)不被撑开的解决办法
HELLO WORLD
09-28 7018
今天在做一个用户留言列表的时候，用到了表格。用户名为英文字符时，就会把固定宽度的单元格撑开。之前也有遇到过。 解决办法：先用nowrap强行令文字不换行，再用style="table-layout: fixed; word-break: break-all; border-collapse: collapse"强制表格不撑开，即达到效果。 需要注意的是： 用了nowrap的单元格设置的宽度要用百...
Layui Table 鼠标悬浮弹层显示超出内容、Table基本操作
qq_37336110的博客
10-17 3635
Layui Table 鼠标悬浮弹层显示超出内容、Table基本操作 鼠标悬浮事件之 mouseover()和 mouseout()事件鼠标在这块区域时候会触发相应事件，将鼠标挪开则恢复原先事件。
Html5 table 表格内容超出撑大单元格 解决方法
一起来讨论学习前端技术吧
08-21 3209
Html5 table 表格内容超出撑大单元格 解决方法
display：table的几个用法
weixin_30387663的博客
06-12 475
DIV+CSS的布局已经让表格布局几乎很少用到，除非表格语义性很强的情况。 display：table解决了一部分需要使用表格特性但又不需要表格语义的情况， 尤其是DIV+CSS很不方便解决的问题，比如以下两种情况： 一、父元素宽度固定，想让若干个子元素平分宽度 通常的做法是手动设置子元素的宽度，如果设置百分数不一定能整除，设置具体的数值又限制了父元素的宽度固定，很烦。 可以使...
el-table里的行元素文本超出为省略号
06-03
您可以通过设置 el-table-column 组件的属性 scoped-slot 进行自定义，具体操作如下： 1. 在 el-table-column 组件上添加 scoped-slot 属性 ...这样就可以实现 el-table 中行元素文本超出为省略号的效果了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值