这是一道看似很简单,但是很考察html基础的笔试题。面试回来后,赶紧测了 一下,发现答案是:不会。于是博主的变态好奇心泛滥了,开始排列组合。
下面代码是各种宽度组合,有符合我的逻辑的,有诡异不可控的。感兴趣的同学运行一下看看吧。
看代码:
<HTML>
<HEAD>
<style type="text/css">
table
{text-align: center;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif ;
font-weight: normal;
font-size: 11px;
color: #fff;
background-color: #666;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;}
table td
{background-color: #666;
color: #fff;
padding: 4px;
text-align: left;
border-bottom: 2px #fff solid;
font-size: 12px;
font-weight: bold;}
</style>
</HEAD>
<BODY>
<div id="tableContainer">
<table width=380>
<tr><td colspan=2>table长度380,左td宽度10,右宽度无</td></tr>
<tr>
<td width=10>我长长长长长长长</td><td>我打酱油的</td>
</tr>
</table>
<table>
<tr><td colspan=2>table宽度无,左td宽度50%,右宽度无</td></tr>
<tr>
<td width=50%>我长长长长长长长</td><td>我打酱油的</td>
</tr>
</table>
<table width=280>
<tr><td colspan=2>table宽度280,左td宽度10,右宽度无</td></tr>
<tr>
<td width=10>我长长长长长长长</td><td>我打酱油的</td>
</tr>
</table>
<table width=280>
<tr><td colspan=2>table宽度无,左td宽度50%,右宽度50%</td></tr>
<tr>
<td width=50%>我长长长长长长长</td><td width=50%>我打酱油的</td>
</tr>
</table>
<br>
<span>从这儿往下,就是我困惑和不可控的例子了。。。</span>
<br>
<table width=280>
<tr><td colspan=2>table宽度280,左td宽度50%,右宽度10%</td></tr>
<tr>
<td width=50%>我长长长长长长长</td><td width=10%>我打酱油的</td>
</tr>
</table>
<table width=280>
<tr><td colspan=2>table宽度280,左td宽度50,右宽度150</td></tr>
<tr>
<td width=50>我长长长长长长长</td><td width=150>我打酱油的</td>
</tr>
</table>
</div>
</body>
下面是FF运行结果截图:
这个是IE8测试结果截图,让我更更更困惑了,连可控的都变得不可控,除了table的总宽度。。。。
后来我又尝试了让table宽度固定,左td右td的宽度和等于table宽度,发现这样,FF和IE的效果相同,也是预想的合理效果。因此,为了以后不再纠结于不可控和兼容问题,我决定写table确定一个原则:td宽度不论是绝对的还是相对的,累加和都要等于table的宽度。
- 大小: 37.2 KB
- 大小: 36.7 KB
分享到:
相关推荐
table表格td设置宽度后文字太多导致自动换行,这是一个很常见的问题,或许很多的网友已经有了好的解决方法,如果依然有童鞋们不会的,可以参考下本文,可能会有意外的收获
任意改变table表格td的宽度 动态td的宽度 任意改变table表格td的宽度 动态td的宽度 任意改变table表格td的宽度 动态td的宽度
安卓Android源码——TD2.3.zip
html种table_td 列宽左右可拉伸_搜索条件可展开隐藏demo,一个项目使用的,拿出来分享,代码比较简洁,代码量少。绝对可用,宽度可自适应。用到实际项目上还需要自行调整。
(word完整版)中国移动通信系统第四代技术——TD-LTE.doc
ASP网站CMS程序源码——TD-Love CMS系统实例开发.zip
ASP网站CMS程序源码——TD-Love CMS系统实例开发.rar
《通信局(站)在用防雷系统——TD-SCDMA基站防雷接地检测指导书》
TD-LTE宽带多媒体集群系统基站侧MAC层协议设计与实现——TD-LTE基站侧MAC层协议设计与实现
实现boostrap表格td宽度可以自由拖动。简单易用,内含源代码
本程序主要是用table表格拖动改变td宽度。
XX培训教程——TD 自动变速器对一个HR的帮助是很大的,能够帮助更好的管理公司,让事情变得更加简单,小...该文档为XX培训教程——TD 自动变速器,是一份很不错的参考资料,具有较高参考价值,感兴趣的可以下载看看
用于微机原理与接口技术实验课, TD-PITD+实验系统,教程+源代码。
改变table的列宽度,可以拖拽的td表格,表格内文字只显示一行,超过的部分自动隐藏
以下是中兴公司对新员工的关于3G 之 TD--SCDMA方面的培训:共分为四个部分: a.基本原理 b.关键技术 c.网络分规划 d.网络优化 欢迎交流,希望对您有帮助!
10.3.2 设置自动运行——autostart 214 10.3.3 设置媒体文件的循环播放——loop 215 10.3.4 隐藏面板——hidden 216 10.3.5 添加其他类型的媒体文件 217 10.4 小结 217 10.5 习题 218 第2篇 HTML 5...
如果未设置td宽度,则nowrap属性起作用的,如果设置了td宽度,则nowrap属性不起作用。 通过CSS让TD自动换行 项目中 ajax 应用需要动态创建element 但是在td内 内容过长 firefox 能自动换行,ie6 比较傻瓜的!可以...
在做table页面时,有时对td设置的宽度是无效的,td的宽度始终有内部的内容撑开,可以设置padding,但直接设置width却无效,下面我们来具体看下这个示例: 复制代码代码如下: <div> ”1px”> <tr> <td width=”100px...
金升阳近期推出低功耗、高可靠、小体积RS485隔离收发模块——TD5(3)31S485-L、TD5(3)21D485-L系列,静态电流低至8mA,满足煤矿、仪器仪表等对功耗要求严苛的应用场景。 该系列产品的加工采用全贴片工艺,客户可...