html（表格）设置了宽、高，却无效的问题

最新推荐文章于 2024-05-29 15:56:25 发布
最新推荐文章于 2024-05-29 15:56:25 发布
阅读量4k 收藏 1
点赞数
分类专栏： # html
作者：何锦洋
本文链接：https://blog.csdn.net/weixin_44537669/article/details/115583255
版权

1、背景

写html表格，常常容易忘记的一个点：
	只对：行（各个字段）设置了（宽、高） ； 忘记了：给（表格）table标签，设置宽高
    影响：（行、列合并时）， 会出现（宽、高）无效现象。

2、table标签：未设置宽高

当进行：行、列（合并时）出现效果如下：

image-20210410195915413

3、table标签：设置宽高后

当进行：行、列（合并时）出现效果如下：

image-20210410200303839

4、代码

4.1、未设置：table宽高代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        tr{
            height: 30px;
        }

        td{
            width: 60px;
        }

        table{
            text-align: center;
            border-spacing: 0;

        }
    </style>
</head>
<body>
    <!--实现功能：添加表格， 并且逐行换色（奇数行：灰色）（偶数行：白色）-->
    <table border="solid 1px" >
        <caption>CSDN能力认证级别</caption>

       <tr>
           <td colspan="2"></td>
           <td colspan="4"></td>
           <td colspan="3"></td>
       </tr>

        <tr>
            <td colspan="2"></td>
            <td colspan="4"></td>
            <td colspan="3"></td>
        </tr>

        <tr>
            <td colspan="2">C1</td>
            <td colspan="4">见习工程师能力认证</td>
            <td colspan="3">在校生：200元</td>
        </tr>

        <tr>
            <td colspan="2">C4</td>
            <td colspan="4">专项工程师能力认证</td>
            <td colspan="3">在校生：3000元</td>
        </tr>

        <tr>
            <td colspan="2">C5</td>
            <td colspan="4">全栈工程师认证</td>
            <td colspan="3">在校生：8000元</td>
        </tr>

    </table>
</body>
</html>

4.2、设置：table宽高代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        tr{
            height: 30px;
        }

        td{
            width: 60px;
        }

        table{
            height: 150px;
            width: 540px;
            text-align: center;
            border-spacing: 0;

        }
    </style>
</head>
<body>
    <!--实现功能：添加表格， 并且逐行换色（奇数行：灰色）（偶数行：白色）-->
    <table border="solid 1px" >
        <caption>CSDN能力认证级别</caption>

       <tr>
           <td colspan="2"></td>
           <td colspan="4"></td>
           <td colspan="3"></td>
       </tr>

        <tr>
            <td colspan="2"></td>
            <td colspan="4"></td>
            <td colspan="3"></td>
        </tr>

        <tr>
            <td colspan="2">C1</td>
            <td colspan="4">见习工程师能力认证</td>
            <td colspan="3">在校生：200元</td>
        </tr>

        <tr>
            <td colspan="2">C4</td>
            <td colspan="4">专项工程师能力认证</td>
            <td colspan="3">在校生：3000元</td>
        </tr>

        <tr>
            <td colspan="2">C5</td>
            <td colspan="4">全栈工程师认证</td>
            <td colspan="3">在校生：8000元</td>
        </tr>

    </table>
</body>
</html>
漫漫求
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
table布局 height=100%无效分析
超越梦想的专栏
08-02 6060
table布局 height=100%无效分析 在使用table表格进行页面布局时，经常使用将表格高度设置style="height:100%"来实现表格高度满屏效果，但在最新的浏览器中经常遇到无效，根本原因再于浏览器使用用的工作模式的不同造成的；在Firefox与IE8标准模式下，HTML与Body标签默认是没有高度（即高度为0） ，而是根据其中的内容自适应，如果设置表格的style="hei
table的高度设置似乎不管用
hangchen1025的博客
06-23 3803
随便写一个table table{ height: 50px; overflow: hidden; } 但实际上,他的高度就是他内容撑起的高度,上面的css无效,table似乎是特例,俺也不知道 ...
uni-app解决表格uni-table样式问题
最新发布
GLimerence的博客
05-29 1033
在第一列uni-th中加上类名first，随后设置固定位置，个人尝试过使用position: sticky;在App中并没有生效。此外，element-plus导入到uni-app项目运行到真机中也会报错，因为样式冲突和导入方式等问题，无法使用，后续找到解决方案会更新，所以没有使用el-table来实现。通过检查页面效果来找到对应隐藏的内容，在进行样式设置，如果没有生效，考虑使用!important。
html中table的宽度或高度调整后没有反应
sky_xin的专栏
04-02 1849
对于html中table的宽度或高度设置后没有效果，一般原因就是他的子元素中包含有比设定值更大的值，实际上是里面更宽或者更高的原因把外边的table给撑大了，所以就会造成设置之后没有反应的结果。一般对于&lt;img标签中的width和height的设定可以放大或缩小图片的显示效果，但是对于背景图片是不能够设置宽度和高度的，只能通过修改图片本身来进行调整。一般一个有经验的美工都不会把图片做成大图，...
el-table固定表头（设置height）出现内容过多时不能滚动问题
qq_42192641的博客
11-17 2243
解决：加一个div并设置其高度和overflow。主要原因是el-table没有div包裹。
td标签高度属性不起作用
热门推荐
困惑中，解惑时
09-02 1万+
问题描述 table中的td设置高度属性"height"不起作用。 此时还出现一件奇怪的事情： 控制台显示该td元素的height属性生效，如下图所示：实际元素高度105px，但样式栏中的 40px同样生效了。 解决方案 将<td></td>中的内容用<div></div>标签包裹住。 效果如下： ，此时多余的文本我们可以用overflow:h...
表格设置高度失灵
qq_45530512的博客
11-10 956
检查表格或页面高度设置，若设置了具体值则会自动调整高度，那么手动设置就不会胜生效。 将页面高度设置为100%，则页面高度就会自适应，则界面就友好多了。
易语言快速设置高级表格列宽源码.rar
03-23
本资源“易语言快速设置高级表格列宽源码.rar”提供了关于如何在易语言中实现高级表格列宽动态调整的代码示例。 在易语言中，高级表格控件通常用于显示多行多列的数据，并允许用户进行交互操作。设置表格列宽是一项...
易语言快速设置高级表格列宽
07-23
本篇文章将详细探讨如何在易语言中快速设置高级表格的列宽。 易语言（EasyLanguage）以其简单直观的语法设计，使得初学者也能快速上手编程。在处理表格控件时，它提供了一系列的内置命令和函数，允许开发者高效地...
解决Layui数据表格的宽高问题
10-16
今天小编就为大家分享一篇解决Layui数据表格的宽高问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
html 表格单元格的宽度和高度的设置方法
09-22
在使用这些方法时，需要注意的一个常见问题是，如果内容（如图片）的尺寸超过了设置值，表格可能会自动调整其宽度。为了防止这种情况，可以使用CSS的`overflow`属性，例如设置为`overflow: hidden`，以隐藏超出的...
table td高度设置无效_html之table表格
weixin_39688451的博客
12-03 2173
概述html中提供了一个table表格的东西，不过到现在来说，用处基本上不是很大，但有些报表的项目中还是会用到的。此内容可以稍微一带而过，用到的时候，再回来复习也不迟。表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内...
table设置height属性不起作用的解决办法(转:http://chenfengcn.javaeye.com/blog/390508)
fjfdszj的专栏
11-16 2609
table设置height属性不起作用的解决办法<br />文章分类:Web前端 关键字: height table 设置 js 无效 　　最近写JS对table的操作时，发现一个奇怪的现象，对table的width属性进行设置可以改变table的大小，但对table的height属性进行设置时，居然报没有这个属性。代码如下： <br />Js代码 var table = document.getElementById("textTable");   table.width = 90%;　　//这句可以正常
table布局 height=100%无效分析（原创）
weixin_33921089的博客
05-07 372
在使用table表格进行页面布局时，经常使用将表格高度设置style="height:100%"来实现表格高度满屏效果，但在最新的浏览器中经常遇到无效，根本原因再于浏览器使用用的工作模式的不同造成的；在Firefox与IE8标准模式下，HTML与Body标签默认是没有高度（即高度为0） ，而是根据其中的内容自适应，如果设置表格的style="height:100%"，达不到全屏效果。 问题分析：...
el-table设置表格高度无效
qq_45325025的博客
08-19 3250
我的项目表格的列，是请求后台后，拿到数据才进行渲染的，也就是动态的，所以在项目中遇到，即使我设置了表格高度，渲染出来的表格高度依然没有高度，但是只要我屏幕缩放，高度就会生效。el-table__body-wrapper自适应失败，网上说是element的bug，改变思路，在element官方文档中发现了如下方法。明明下方有空白，但是table只能显示一部分，但是屏幕一缩放，高度就恢复了，打开控制台发现。每当调用获取table数据的方法后调用一下。当获取数据后，对table进行重新渲染。
html表格宽度设置没效果,html表格宽度设置失效
weixin_29415667的博客
06-04 3656
问题描述：我在写一个网页table时，table宽度超过了我预想的宽度，我想把它设置小一点，但总是没效果。改到怀疑人生！代码如下：经过多次调试后发现一个问题，table可以改变大小，但是会有一个最小值，低于最小值时，数值修改会无效，table大小始终是最小值。后灵机一动，把问题锁定在input标签上。思考时认为，表格大小有最小值是因为里面有东西把它撑大了，所以不能更小了。想到后，代码改动如下，效果...
table td高度设置无效_你真的完全掌握 HTML 中 Table 实现么？
weixin_39934613的博客
12-01 1255
秒懂 HTML Table 实现任何表格简单表格实例我们可以分析下这个表格：第一行：首部竖跨 2 行，首部横跨 3 列第二行：首部竖跨 2 行，中间横跨 1.5 列，中间横跨 1.5 列第三行：底部横跨 1.5 列，底部横跨 1.5 列始终明白：<tr>：代表一整行单列，你需要把这一行的所有东西都要列出来。如果有多个占行的，只需要写在第一行即可。<td>: 代表单元格，可设...
table 设置高度后td height 失效
miin_ying的博客
08-11 2079
解决 方法： html : 给最后一行<tr>xxxxx</tr>后面再添加一行空的<tr></tr> css: table 中设置高度 table{ height: 100px; } tbody tr td{ height: 20px; }
html设置表格长宽
03-02
在HTML中，可以使用`<table>`标签来创建表格，并设置表格的`width`和`height`属性来控制表格的长宽。 设置表格宽度： 可以使用`width`属性来设置表格的宽度，可以使用像素（px）或百分比（%）作为单位。例如，要将表格的宽度设置为500像素，可以这样写： ```html <table width="500"> <!-- 表格内容 --> </table> ``` 要将表格的宽度设置为父元素的50%，可以这样写： ```html <table width="50%"> <!-- 表格内容 --> </table> ``` 设置表格高度： HTML中的表格默认会根据内容自动调整高度，但也可以使用`height`属性来设置表格的高度。同样，可以使用像素（px）或百分比（%）作为单位。例如，要将表格的高度设置为300像素，可以这样写： ```html <table height="300"> <!-- 表格内容 --> </table> ``` 要将表格的高度设置为父元素的30%，可以这样写： ```html <table height="30%"> <!-- 表格内容 --> </table> ``` 需要注意的是，通过设置表格的长宽来控制表格的大小可能会导致表格内容溢出或无法完全显示。在实际使用中，建议根据实际需求和内容来合理设置表格的长宽。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

漫漫求

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值