如何设置table单元格平分tr

最新推荐文章于 2024-05-29 16:23:27 发布
原创 最新推荐文章于 2024-05-29 16:23:27 发布 · 3.8w 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#单元格平分 #table-layout属性

本文介绍了一种使用CSS属性table-layout:fixed实现固定宽度表格布局的方法。这种方法能够使表格的每一列宽度固定，即使某些单元格内容较长也不会影响整体布局。 
<table width="100%" border="1" cellpadding="0" cellspacing="0" style="table-layout: fixed;">
	<tbody>
		<tr>
			<td>
				第一个单元格11111
			</td>
			<td>
				第二个单元格1111111111
			</td>
			<td>
				第三个单元格111111111111111
			</td>
		</tr>
	</tbody>
</table>

效果


实现上面效果的方法，我们只需要为table指定table-layout: fixed属性即可
w3c上对table-layout: fixed属性的说明

    automatic 默认。列宽度由单元格内容设定。
    fixed 列宽由表格宽度和列宽度设定。
    inherit 规定应该从父元素继承 table-layout 属性的值。


HTML 基础标签——表格标签＜table＞
Allen-
11-01 906
HTML 表格是用于在网页中组织和显示结构化数据的强大工具。通过表格标签，您可以创建复杂的数据布局
设置table单元格平分tr
u013791783的博客
03-25 3245
在table标签上添加 style=“table-layout:fixed;”
table表格列均分、合并单元格、表格自适应等属性
weixin_44283589的博客
03-15 4508
table表格最常用属性 ① 表格列均分: 直接加到table类名上,加了这个属性意味着table下面的td即使设置了宽度,也不会生效. <style> table { table-layout: fixed; } </style> ② 合并单元格(行): 将代码colspan="数字"直接加到td标签上,数字表示当前的这个td合并了同一个tr中的几个单元格 ```html <body> <td colspan="数字"></td> <
前端javascript实现数据列汇总，求平均值等操作
胡杰的专栏
01-22 1989
有时前端以表格形式展示数据，需要在最后求各数据列的均值，和等操作，这些操作可以在后台实现，也可以在前端实现，下面是前端js实现的方式，代码如下： <!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"> &lt
表格table，指定列定宽，其他列均分
weixin_42284117的博客
08-25 1268
给指定列定宽没有问题：在表头找到该列用table的width或style设置width即可实现； 其他列均分也简单，只要给table设置一个属性即可： .table { table-layout: fixed; }
html-table 自动平均分“列宽度”、单元格内容“自动换行”
代码笔记
01-26 1万+
style="table-layout: fixed; word-break: break-all; word-wrap: break-word;" <table id="table1" width="100%" border="1" style="table-layout: fixed; word-break: break-all; word-wrap: break-word;"> </table>
table的td如何设置平分宽度
05-26
`属性来实现table的td平分宽度。 示例代码如下： HTML: ``` <table> <tr> 单元格1 单元格2 单元格3 </tr> </table> ``` CSS: ``` table { table-layout: fixed; width: 100%; } td { width: 33.33%; } ``...
怎么让el-table里的td里面的cell height为100%， 目前设置高度100% 不生效
最新发布
11-11
我们正在讨论的是Element UI的el-table组件中如何让td单元格高度设置为100%生效的问题。 已知问题：在el-table中，如果我们尝试设置td的height:100%往往不生效，因为表格的布局（table-layout）和行高计算方式导致...
<table style=" border: 1px solid black; border-collapse: collapse; width: 90mm; height: 50mm; table-layout: fixed; box-sizing: border-box; font-size: 12px; /＊　减小基础字号　＊/ "> <!-- 第一行标题 --> <tr> <td colspan="3" style="padding: 2px; text-align: center; font-weight: bold;"> 资产管理票 </td> </tr> <!-- 资产编码行 --> <tr style="border: 1px solid black;"> <td style="border: 1px solid black; padding: 1px; width: 10%;"> 资产编码: </td> <td style="padding: 1px; width: 10%; overflow: hidden; text-overflow: ellipsis;"> $zcbm$ </td> <!-- 二维码单元格跨三行 --> <td rowspan="3" style=" border: 1px solid black; vertical-align: middle; text-align: center; width: 60%; padding: 0px; "> <!-- 二维码容器添加尺寸限制 --> <div style=" max-width: 100%; max-height: 30mm; overflow: hidden; margin: 0 auto; "> #QRCodeImg# </div> </td> </tr> <!-- 资产名称行 --> <tr style="border: 1px solid black;"> <td style="border: 1px solid black; padding: 2px;"> 资产名称: </td> <td style="padding: 1px; overflow: hidden; text-overflow: ellipsis;"> $zcmc$ </td> </tr> <!-- 使用部门和日期行 --> <tr style="border: 1px solid black;"> <td style="border: 1px solid black; padding: 2px;"> 使用部门: </td> <td style="padding: 2px; overflow: hidden; text-overflow: ellipsis;"> $sybm$ </td> </tr> <tr style="border: 1px solid black;"> <td style="border: 1px solid black; padding: 2px;"> 启用日期: </td> <td style="padding: 2px; overflow: hidden; text-overflow: ellipsis;"> $date$ </td> <!-- 空白单元格保持结构对齐 --> <td style="visibility: hidden;"></td> </tr> </table>帮我修改让二维码宽度变大5mm，但总的大小不要变
10-10
注意：最后一行中的空白单元格我们没有设置宽度，因为它属于第三列，会自动应用65.56%的宽度（由二维码单元格设置的列宽决定）。 这样修改后，表格总宽度仍然是90mm，二维码单元格宽度为90mm的65.56%≈59mm（即...
JS动态添加tr
12-06
在这个例子中，我们首先通过`getElementById`方法找到id为'myTable'的表格，然后创建一个新的`<tr>`元素，并创建一个包含新数据的`<td>`单元格。最后，我们将新行添加到表格的第一个tbody中。 二、DIV+CSS页面布局 ...
table格子均匀问题
Cream_Cicilian的博客
04-29 1764
在大多时候，我们希望&lt;table&gt; 展示的格子是均匀的，但是在实际情况下，确实状况百出 例子用宽举例，但高是一样的，只是是在tr里设置height 这是一个普通的table &lt;table border="1" cellspacing="0" style="width: 400px;height: 400px"&gt; &lt;tr&gt; ..
设置table的tr高度，第一行固定高度，其余高占满父级高度
m0_68275786的博客
05-29 923
设其他行高度为100%
table的td宽度控制
热门推荐
Eighteen Z
07-19 2万+
前言：td在我们有具体宽度控制的时候显的格外难以驯服，但是知道了它的原理，解决起来就不会再怕了。。 首先table的宽度我们可以设置，具体的px或者百分比，浏览器会自动按比例给td分配宽度。 &lt;table style="width: 600px;border-collapse: collapse;" &gt; &lt;tr&gt; &lt;td style=...
table 单元格平均分配tr
天蓝蓝风轻轻
03-23 1万+
&lt;style&gt; table{ border-collapse: collapse; border-spacing: 0; table-layout: fixed; } &lt;/style&gt;table 单元格平均分配tr实现上面效果的方法，我们只需要为table指定table-layout: fixed属性即可w3c上对table-layout: fixed属性的说明    au...
Table的思索(一):TD宽度与高度的分配
甘焕的博客
08-03 6386
在用table进行布局时，大部分人都会对齐复杂且略显混乱的空间分配方式感到无所适从，尤其是在计量单位像素(px)与百分比(%)进行混合使用时，本文详细讲述了在auto布局下表格的宽度与高度如何进行分配。
css技巧：table-cell的自动平均划分元素
yangyuqingabc的博客
11-09 6807
css技巧：table-cell的自动平均划分元素 在进入正题之前，我们先来热热身。利用你所会的css，实现如下图宽度相等的水平排列元素。 你可能已经想到了最直接的方法，定义5个div,定义相同的width、height,再让他们水平排列。 至于怎么水平排列，方法很多，我是用的flex： &lt;div class="flex-box"&gt; &lt;div&gt;1&lt;...
HTML ＜tr＞ 标签
weixin_50662941的博客
09-23 1351
HTML <tr> 标签 什么是<tr>标签？ <tr> 标签定义 HTML 表格中的行。 tr 元素包含一个或多个 th 或 td 元素。 实例 <table cellspacing=“0”> <thead> <tr> <th>姓名</th> <th>成绩</th> </tr> </thead> <tbody> <tr><tr>
table表格table/tr/td宽度和高度的设置
我真的睡不够
12-11 8905
再看看td的height设置吧，各个td的height要看这个td所在的⾏的最⼤⾼度来确定这⼀⾏的每个td的height，然后各个⾏的⾼度情况和tr中。当⼏个tr都设置了height的具体数值时，各个tr的height按照设置的值的⽐例来分配总的height值，注意这⾥说的是总的height值。当有的tr设置了具体的数值，有的没有设置具体的数值为默认时，先保证各个tr的基本需要，剩下的再满⾜设置了具体值的tr，之后再全部给。置的值⼤就按照哪个，如果⼀个设置了值⼀个没有设置值，那么按照设置值的算。
html设置table单元格无色
12-11
要在HTML中设置table单元格无色，可以使用CSS样式表中的border属性，并将其设置为none。具体步骤如下： ... table, td { ...上述代码将table和td元素的边框属性都设置为none，从而实现了table单元格无色的效果。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值