问题描述:

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

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

总结,该问题的出现是因为input标签有默认的宽度和高度,而在对表格的宽高度进行设置时是没办法对内部的标签做出改变的,你可以比它大,但不能比它小。因此在做表格的样式布局时,也同样需要考虑内部标签的大小位置。

同时,以后遇到bug时要提醒自己,遇到问题总是自己的代码有问题,按照逻辑一点点去尝试去修改,去深入理解,去思考内部一点的东西,不要放过任何可能。

html表格宽度设置失效的更多相关文章

  1. bootstrap中给表格设置display之后表格宽度变小问题解决

    问题描述:bootstrap中给表格设置display之后表格宽度变小了 解决方案:给表格加上 display:table样式就可以了.

  2. 表格Table宽度设置无效的解决方法

    表格Table宽度设置无效的解决方法 bootstrap中使用table时发现不管用width赋值方式都无法改变table>td的宽度 解决方法: 设置table:table-layout:fi ...

  3. DataTables固定表格宽度(设置横向滚动条)

    当表格的列比较多的时候,可能就需要固定表格的宽度了,默认的100%宽已经不适应了.默认的100%宽要实现改变窗口大小也100%的话,在table元素上添加width="100%", ...

  4. Word批量设置表格宽度自动适应页面宽度

    怎么批量修改Word表格的宽度呢.Word表格可根据窗口自动调整表格宽度,使得所有的表格宽度和页面宽度一样. 当页面设置了新的页边距后,所有的表格都需要调整新的宽度.或者文档中有许多大大小小的表格,希 ...

  5. table表格宽度固定,同时td内容过长也不会被撑开

    table表格宽度固定,同时td内容过长也不会被撑开,设置如下css: table{table-layout:fixed;word-break:break-all;}

  6. 一步步实现 easyui datagrid表格宽度自适应,效果非常好

    一步步实现 easyui datagrid表格宽度自适应,效果非常好: 一.设置公共方法,使得datagrid的属性  fitColumns:true $(function(){ //初始加载,表格宽 ...

  7. 如何固定table表格宽度,样式不受容器影响

    之前有篇关于LODOP打印超文本表格,两个样式相同的表格,出现错位的情况.该博文地址:LODOP打印表格错位的几种情况该文试验了两种现象,第一种浏览器页面显示错位,打印预览也错位,第二种浏览器页面表格 ...

  8. LODOP打印table表格宽度固定-超宽隐藏

    之前有博文介绍关于超出div隐藏内容的:LODOP打印超过后隐藏内容样式里面提到了overflow:hidden;控制超出后隐藏,但是前面那篇用的是div,如果是在table中,由于table默认的t ...

  9. div宽度设置无效问题解决

    问题描述: 要设置两个div在同一行显示,都加入了display:inline样式,但是其中一个div的宽度设置无效,在浏览器显示它的宽度始终是1003px. 解决办法: 方法1/给div加入样式:f ...

随机推荐

  1. 为table元素添加操作日志

    1.为所有的元素添加函数onchange() <input id="status" value="${status}" onchange="ch ...

  2. 最新Windows下Redis集群

    实现简单的Windows下Redis集群配置,以下是配置过程中出现的几个问题: [1]逐个启动7001 7002 7003 7004 7005 7006节点时,出现createing server T ...

  3. Angular 新手容易碰到的坑

    Q1.<div ng-include="views/user/show.html"></div> 错在哪里? 如果你这么写过,会发现这个位置啥也没有加载出来 ...

  4. chrome开发工具指南(二)

    Application 面板 使用 App Manifest 窗格检查您的网络应用清单和触发 Add to Homescreen 事件. 使用 Service Worker 窗格执行与服务工作线程相关 ...

  5. 团队作业8——第七天(beta阶段)

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 学号 成员 贡献比 201421123001 廖婷婷 16% 201421123002 翁珊 17% 201421123004 ...

  6. 201521123049 《JAVA程序设计》 第4周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. ###1.类型转换(cast):是将两种不同类型的变量进行转换,但不能随意强制转换,随意强制 ...

  7. 201521145048 《Java程序设计》第7周学习总结

    1. 本周学习总结 2. 书面作业 Q1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 1.2 解释E remove(int index)源代码 1.3 结合1. ...

  8. 201521123097《Java程序设计》第十周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 1.finally 题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中fin ...

  9. 201521123030 《Java程序设计》 第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 常用异常 1.题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己 ...

  10. Spring - BeanPostProcessor接口(后处理器)讲解

    概述: BeanPostProcessor接口是众多Spring提供给开发者的bean生命周期内自定义逻辑拓展接口中的一个,其他还有类似InitializingBean,DisposableBean, ...