html表格宽度设置失效
问题描述:
我在写一个网页table时,table宽度超过了我预想的宽度,我想把它设置小一点,但总是没效果。改到怀疑人生!代码如下:

经过多次调试后发现一个问题,table可以改变大小,但是会有一个最小值,低于最小值时,数值修改会无效,table大小始终是最小值。后灵机一动,把问题锁定在input标签上。思考时认为,表格大小有最小值是因为里面有东西把它撑大了,所以不能更小了。想到后,代码改动如下,效果就让我很满意了。

总结,该问题的出现是因为input标签有默认的宽度和高度,而在对表格的宽高度进行设置时是没办法对内部的标签做出改变的,你可以比它大,但不能比它小。因此在做表格的样式布局时,也同样需要考虑内部标签的大小位置。
同时,以后遇到bug时要提醒自己,遇到问题总是自己的代码有问题,按照逻辑一点点去尝试去修改,去深入理解,去思考内部一点的东西,不要放过任何可能。
html表格宽度设置失效的更多相关文章
- bootstrap中给表格设置display之后表格宽度变小问题解决
问题描述:bootstrap中给表格设置display之后表格宽度变小了 解决方案:给表格加上 display:table样式就可以了.
- 表格Table宽度设置无效的解决方法
表格Table宽度设置无效的解决方法 bootstrap中使用table时发现不管用width赋值方式都无法改变table>td的宽度 解决方法: 设置table:table-layout:fi ...
- DataTables固定表格宽度(设置横向滚动条)
当表格的列比较多的时候,可能就需要固定表格的宽度了,默认的100%宽已经不适应了.默认的100%宽要实现改变窗口大小也100%的话,在table元素上添加width="100%", ...
- Word批量设置表格宽度自动适应页面宽度
怎么批量修改Word表格的宽度呢.Word表格可根据窗口自动调整表格宽度,使得所有的表格宽度和页面宽度一样. 当页面设置了新的页边距后,所有的表格都需要调整新的宽度.或者文档中有许多大大小小的表格,希 ...
- table表格宽度固定,同时td内容过长也不会被撑开
table表格宽度固定,同时td内容过长也不会被撑开,设置如下css: table{table-layout:fixed;word-break:break-all;}
- 一步步实现 easyui datagrid表格宽度自适应,效果非常好
一步步实现 easyui datagrid表格宽度自适应,效果非常好: 一.设置公共方法,使得datagrid的属性 fitColumns:true $(function(){ //初始加载,表格宽 ...
- 如何固定table表格宽度,样式不受容器影响
之前有篇关于LODOP打印超文本表格,两个样式相同的表格,出现错位的情况.该博文地址:LODOP打印表格错位的几种情况该文试验了两种现象,第一种浏览器页面显示错位,打印预览也错位,第二种浏览器页面表格 ...
- LODOP打印table表格宽度固定-超宽隐藏
之前有博文介绍关于超出div隐藏内容的:LODOP打印超过后隐藏内容样式里面提到了overflow:hidden;控制超出后隐藏,但是前面那篇用的是div,如果是在table中,由于table默认的t ...
- div宽度设置无效问题解决
问题描述: 要设置两个div在同一行显示,都加入了display:inline样式,但是其中一个div的宽度设置无效,在浏览器显示它的宽度始终是1003px. 解决办法: 方法1/给div加入样式:f ...
随机推荐
- ASP.NET Core MVC I/O编程模型
1. ASP.NET Core MVC I/O编程模型 1.1. I/O编程模型浅析 1.2. 同步阻塞I/O 1.3. 同步非阻塞I/O 1.4. 异步I/O 1.5. 总结 1.1. I/O编程模 ...
- 初识php soap 学习过程中的摘抄,便于后期翻阅
SOAP 简单对象访问协议, webService三要素 , SOAP.WSDL(WebServicesDescriptionLanguage).UDDI(UniversalDescriptionDi ...
- Java基础学习 —— io
/** 解决数据与数据之间的传输问题. 字节流: 输入字节流: -------| InputStream 所有输入字节流的基类.抽象类. -----------| FileInputStream 读取 ...
- UCOSii项目在NIOSii上的移植
概览 本次使用Altera公司的NIOS II软核. 使用Quatus工具生成BSP并利用BSP打包工具生成UCOSII嵌入环境. 手动书写LCD驱动与显示函数,对UCOS II加入简单图像显示接口. ...
- 《Java程序设计》终极不改版【下】
package 大学生信息管理系统; import java.awt.event.*; import javax.swing.*; import java.awt.*; import java.uti ...
- 201521123084 《Java程序设计》第11周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1. 互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...
- html5 javascript 小型计算器
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Web编程:JSP环境安装与配置
Web服务器:Tomcat 数据库服务器:暂时未使用 集成开发环境:eclipse 要运行JSP程序,首先要安装JDK(Java Developer Kit),并且还要配置运行Java程序的环境变量. ...
- JAVA课程设计——单机版五子棋
JAVA课程设计--单机版五子棋 1.团队名称.团队成员介绍 团队名称:Gomoku小分队 团队成员: 网络1512 201521123038 游舒婷(组长) 网络1512 201521123043 ...
- 201521123070 《JAVA程序设计》第13周学习总结
1. 本章学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 Q1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jm ...