table表格table/tr/td宽度和高度的设置

关于html中table表格tr,td的⾼度和宽度


做⽹页的时候经常会遇到各种各样的问题,经常遇到的⼀个就是会碰到表格被内容撑开的问题。

设置table样式为 table-layout: fixed; 宽度可以了,但是高度会被撑高。怎么设置都不行,只能给这个td标签单独设置width 和 height 了。所以记录下。


1、table中的width和height设置及其作⽤:
table中设置的height其实是设置⼀个最⼩值,也就是当表格中的内容或者⾏⾼总值超过这个设置值时,会⾃动延长表格的height值,当表格
中的内容或者⾏⾼没有达到这个值时,会⾃动扩⼤到这个值。
table中设置的width值⼀般为表格宽度的最⼤值,不能改变,即使内部的内容宽度超过也不能改变。(这个内部内容如果是图⽚的话是可以
改变表格宽度的。)


2、tr标签中width和height设置及其作⽤:
tr标签⾥⾯的width设置不起任何作⽤,因为从第⼀点可以看出,表格的width是不能改变的,tr标签当然就不起作⽤了。
所以在tr中只有讨论height设置的可能了,tr中的height设置和⼏个tr之间的设置有关。
当⼏个tr都设置了height的具体数值时,各个tr的height按照设置的值的⽐例来分配总的height值,注意这⾥说的是总的height值。
当⼏个tr都没有设置height具体值时,平均分配总的height值。
当有的tr设置了具体的数值,有的没有设置具体的数值为默认时,先保证各个tr的基本需要,剩下的再满⾜设置了具体值的tr,之后再全部给
没有设置具体值的tr。
最后⼀种情况还要考虑总的宽度不够tr总的设置值的情况,不够的话要满⾜tr的基本需要,这⾥会⾃动延长表格的height的。然后再考虑设
置了height的tr,最后考虑没有设置height的tr。


3、td标签中width和height设置及其作⽤:
td标签⾥⾯的width和height都是起作⽤的。先看td的width吧,某⼀个td的width是和所处的⼀列每个td的width都相关的,取其中最⼤
的width作为这⼀列中每个td的width,⼀定要从全局把握某个td的width,不能从这⼀个的width设置就断⾔它的宽度就是多少,这样是不准
确的。
当我们把每⼀列的宽度都弄清楚之后,事情就好办了。这时候各个td之间的宽度分配按照第⼆条中各tr的height分配规律,
有⼀点不同的是全部是默认的情况下,各td的width不是平均分配,⽽是根据各⾃的实际内容按⽐例分配。
再看看td的height设置吧,各个td的height要看这个td所在的⾏的最⼤⾼度来确定这⼀⾏的每个td的height,然后各个⾏的⾼度情况和tr中
的height分配原则是⼀样的。


还有⼀点要注意,就是td的height和tr的height之间的关系。⾸先肯定是根据内容的需要,在这个基础上,再根据设置的值来确定,哪个设
置的值⼤就按照哪个,如果⼀个设置了值⼀个没有设置值,那么按照设置值的算。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/214131.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Linux】 线程池

线程池 什么是线程池? 一次预先申请一批线程,让这批线程有任务,就处理任务;没任务,就处于等待状态。 为什么要有线程池? 以空间换时间,预先申请一批线程,当有任务到来,可…

将rtsp视频流发送到AWS Kinesis Video Streams的方案——使用Gstreamer(C++) Command Line

大纲 1 创建Kinesis Video Streams1.1 创建视频流1.2 记录Creation Time 2 创建策略2.1 赋予权限2.2 限制资源2.3 Json格式描述(或上面手工设置)2.4 注意事项 3 创建IAM用户3.1 生成密钥对3.2 附加策略3.3 记录访问密钥对 4 编译C 创建者库5 发送6 检查参…

JavaScript <关于逆向RSA非对称加密算法的案例(代码剖析篇)>--案例(五点一)

引用上文: CSDNhttps://mp.csdn.net/mp_blog/creation/editor/134857857 剖析: var bitsPerDigit16; // 每个数组元素可以表示的二进制位数// 数组复制函数,将源数组部分复制到目标数组的指定位置 function arrayCopy(src, srcStart, dest, destStart, n) {var m…

国内地址地区智能解析,无需完整地址也能正确匹配

页面直接引入使用 已打包成单文件dist/bundle.js 可以直接通过标签引用 <script src="./bundle.js"></script> <script>var results = AddressParse.parse(福建省福州市福清市石竹街道义明综合楼3F,15000000000,asseek);console.log(results);…

OD机考真题搜集:服务失效判断

题目 某系统中有众多服务,每个服务用字符串(只包含字母和数字,长度<=10)唯一标识,服务间可能有依赖关系,如A依赖B,则当B故障时导致A也故障。 依赖具有传递性,如A依赖B,B依赖C,当C故障时导致B故障,也导致A故障。 给出所有依赖关系,以及当前已知故障服务,要求输…

git提交代码报错Git: husky > pre-commit

目录 git提交代码报错原因解决方法&#xff08;三种&#xff09;1、第一种2、第二种3、第三种 git提交代码报错原因 这个问题是因为当你在终端输入git commit -m “XXX”,提交代码的时候,pre-commit(客户端)钩子&#xff0c;它会在Git键入提交信息前运行做代码风格检查。如果代…

Kotlin 中密封类、枚举类与密封接口的对比分析

在 Kotlin 编程语言中&#xff0c;密封类&#xff08;Sealed Classes&#xff09;、枚举类&#xff08;Enum Classes&#xff09;和密封接口&#xff08;Sealed Interfaces&#xff09;是处理一组固定类型的强大工具。它们在 Kotlin 中扮演着特殊的角色&#xff0c;特别是在创建…

【小白专用】MySQL创建数据库和创建数据表

1.在Windows开始搜索输入Mysql,并选择第一个打开。 2.输入安装时的密码 3.说明安装成功。 二、创建数据库 1. 连接 MySQL 输入 mysql -u root -p 命令&#xff0c;回车&#xff0c;然后输入 MySQL 的密码(不要忘记了密码)&#xff0c;再回车&#xff0c;就连接上 MySQL 了。 …

数据库常用锁

数据库锁是一种用于管理并发访问的机制&#xff0c;以确保数据的一致性和完整性。在并发访问的情况下&#xff0c;多个事务可能同时尝试访问相同的数据&#xff0c;而数据库锁能够协调这些访问&#xff0c;防止数据不一致的问题。以下是一些常见的数据库锁及其详细解释&#xf…

C语言-统计素数并求和

本题要求统计给定整数M和N区间内素数的个数并对它们求和。 输入格式: 输入在一行中给出两个正整数M和N&#xff08;1≤M≤N≤500&#xff09;。 输出格式: 在一行中顺序输出M和N区间内素数的个数以及它们的和&#xff0c;数字间以空格分隔。 输入样例: 10 31输出样例: 7…

深入Redis过程-持久化

目录 redis实现持久化 RDB 触发机制-定期方法 定期-手动触发 save bgsave 定期-自动触发 AOF 开启AOF功能 刷新缓冲区策略 重写机制 混合持久化 Redis事务 事务相关的命令 MULTI EXEC DISCARD WATCH redis实现持久化 RDB RDB叫做Redis数据备份文件&#xf…

强大的公式编辑器 —— MathType最新版本安装与使用

强大的公式编辑器 —— MathType最新版本安装与使用 由于使用了很长时间的机械硬盘出现坏道&#xff0c;安装在其中的MathType6.9&#xff08;精简版&#xff09;也没办法使用了&#xff0c;本来想安装个高版本的MathType&#xff0c;比如MathType7.4&#xff0c;但在网上苦苦…

如何更改Jupyter Notebook中的环境?

1.首先&#xff0c;打开终端 2.接着&#xff0c;分别输入以下命令 conda env list 把EXPose替换为自己的环境变量 conda activate EXPose 3.接下来安装‘ ipykernel ’软件包 conda install ipykernel 4. 将该环境添加到Jupyter Notebook中&#xff1b;在Jupyter Notebook…

HTB Surveillance

Surveillance 2023年12月10日 12:13:35User nmap Starting Nmap 7.80 ( https://nmap.org ) at 2023-12-10 12:15 CST Stats: 0:00:37 elapsed; 0 hosts completed (1 up), 1 undergoing Connect Scan Connect Scan Timing: About 59.83% done

小白第一次开私服怎么吸引玩家

大家好&#xff0c;我是咕噜-凯撒&#xff0c;在现在这个网络社会很多人为了放松一下会选择打打游戏&#xff0c;私服也就成为了许多玩家为了寻找新鲜体验的热门选择&#xff0c;很多小白就发现了这个契机但是吸引玩家加入自己的服务器也就成了一个比较头疼的问题&#xff0c;下…

Wrong number of values of control parameter 2(Halcon 错误代码:1402)

threshold (ImageReduced1, Region, 0,min2(75,Min)) 程序运行到这一句&#xff0c;出现错误 原因是其中的参数Min为空数组 解决方案&#xff1a;判断了下可以输出Min的区域是否存在&#xff0c;不存在跳过这一步。

八叉树bt文件转为grid文件的代码及编译流程

目的 点云文件转为八叉树文件 代码 在一个文件夹中新建两个文件&#xff0c;pcd2bt.cpp和CMakeLists.txt&#xff0c;分别写入&#xff1a; grid3d_node.cpp #include <ros/ros.h> #include <string> #include "grid3d.hpp"int main(int argc, char…

【Maven技术专题】「实战开发系列」盘点Maven项目中打包需要注意到的那点事儿

Maven项目打包需要注意到的那点事儿 Maven是什么Maven打包插件的作用Maven打包后经常出现的问题maven构建可运行Jar包 Maven打包的三种方式Maven打包的最简单的方法maven-jar-pluginMANIFEST.MF文件部分MANIFEST.MF的文件内容jar包的拷贝机制在pom.xml中配置 maven-jar-plugin的…

mybatis多表映射-分步查询

1、建库建表 create database mybatis-example; use mybatis-example; create table t_book (bid varchar(20) primary key,bname varchar(20),stuid varchar(20) ); insert into t_book values(b001,Java,s001); insert into t_book values(b002,Python,s002); insert into …

C++大型项目经验

1 附加包含目录 在Visual Studio中&#xff0c;“附加包含目录”&#xff08;Additional Include Directories&#xff09;是一个编译器设置&#xff0c;它指示编译器在查找包含文件&#xff08;通常是头文件&#xff0c;扩展名为.h或.hpp&#xff09;时去哪些额外的文件夹路径…