html table td如何撑开

灿烂阳光168 2012-02-06 02:54:58

情况如下，一个table中有2行，其中第1行是一个控件，随着table中的其它行撑开自行伸缩，第2行是放置内容的行，当第2行是100px时，第1行中的控件也是100px长；当第2行是200px时，第1行中的控件也是200px长。

为了美观起见，我想无论第2行是长是短，第1行都是100%等于屏幕宽。

我尝试了加1行：
<tr>
<td style="width:100%">
</td>
<tr>

但是不起作用

...全文

859 10 打赏收藏转发到动态举报

写回复

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

灿烂阳光168 2012-02-08

打赏
举报

回复

[Quote=引用 9 楼 dreamslink2010 的回复:]
你要想控制一个td里面的宽度不跟其他列里面一样，那就再这个td里面再嵌套一个table，这些你想控制多宽多高so easy,right？
[/Quote]

嗯，现在是要让撑开为100%页面宽，我安装你的方法，单独新建一个table,但<td width="100%">控件</td>不管用，控件有多宽，还是多宽，我现在是想控件跟页面一样宽。

Ajava攻城师 2012-02-06

打赏
举报

回复

你要想控制一个td里面的宽度不跟其他列里面一样，那就再这个td里面再嵌套一个table，这些你想控制多宽多高so easy,right？

p2227 2012-02-06

打赏
举报

回复

[Quote=引用 3 楼 java166 的回复:]

引用 2 楼 p2227 的回复:
老办法：用一个1px的透明gif撑开

有实例吗？
[/Quote]不好意思，这方法太老了，我自己都搜索不出来了

灿烂阳光168 2012-02-06

打赏
举报

回复

[Quote=引用 6 楼 zsx841021 的回复:]
引用 4 楼 java166 的回复:

引用 1 楼 zsx841021 的回复:
为什么说不起作用。。

还是没有撑开呀，所以说不起作用

你上面代码td 里面没有内容怎么撑开啊。。

[/Quote]

要100%撑开，要怎么加内容呢？

三石-gary 2012-02-06

打赏
举报

回复

[Quote=引用 4 楼 java166 的回复:]

引用 1 楼 zsx841021 的回复:
为什么说不起作用。。

还是没有撑开呀，所以说不起作用
[/Quote]
你上面代码td 里面没有内容怎么撑开啊。。

灿烂阳光168 2012-02-06

打赏
举报

回复

[Quote=引用 2 楼 p2227 的回复:]
老办法：用一个1px的透明gif撑开
[/Quote]

请提供一个实例，非常感谢！

灿烂阳光168 2012-02-06

打赏
举报

回复

[Quote=引用 1 楼 zsx841021 的回复:]
为什么说不起作用。。
[/Quote]

还是没有撑开呀，所以说不起作用

灿烂阳光168 2012-02-06

打赏
举报

回复

[Quote=引用 2 楼 p2227 的回复:]
老办法：用一个1px的透明gif撑开
[/Quote]

有实例吗？

p2227 2012-02-06

打赏
举报

回复

老办法：用一个1px的透明gif撑开

三石-gary 2012-02-06

打赏
举报

回复

为什么说不起作用。。

一开始的需求只是表头部分在滚动时能一直固定在头部，那关键要实现的就是让tr能定位。首先想到的方法是给tr设置relative，用ie6/7测试以下代码： Code 1 2 3 4 给tr设置relative后就能相对table定位了，看来很简单啊，但问题是这个方法ie8和ff都无效，而且存在很多问题，所以很快就被抛弃了。 ps：该效果用来做tr的拖动会很方便。接着想到的是给table插入一个新tr，克隆原来的tr，并设置这个tr为fixed（ie6为absolute），例如： Code 1 2 3 4 5 6 第一个问题是fixed的tr在ie7中不能进行定位，而且td在定位后并不能保持在表格中的布局，这样在原表格插tr就没意义了。 ps：fixed的相关应用可参考仿LightBox效果。最后我用的方法是新建一个table，并把源tr克隆到新table中，然后通过对新table定位来实现效果。用这个方法关键有两点，首先要做一个仿真度尽可能高的tr，还有是要准确的定位，这些请看后面的程序说明。程序说明【克隆table】克隆一个元素用cloneNode就可以了，它有一个bool参数，表示克隆是否包含子节点。程序第一步就是克隆原table： this._oTable = $(table);//源table this._nTable = this._oTable.cloneNode(false);//新table this._nTable.id = "";//避免id冲突要注意虽然ie的cloneNode参数是可选的（默认是false），但在ff是必须的，建议使用时都写上参数。还要注意的是id属性也会被克隆，也就是克隆后会有两个相同id的元素（如果克隆对象有设置的话），这很容易会导致其他问题，程序会把克隆table的id属性设空。 ps：table请用class来绑定样式，用id的话新table就获取不了样式了。克隆之后再设置样式： this._style.width = this._oTable.offsetWidth + "px"; this._style.position = isIE6 ? "absolute" : "fixed"; this._style.zIndex = 100; 一般来说offsetWidth是width+padding+border的结果，但table比较特别，测试下面的代码： Code html PUBLIC "-//W3C//DTD XHTML 1.0 Tra

代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <body> <style type=”text/css”> table {width:200px;table-layout:fixed;} td {white-space:nowrap;overflow:hidden;word-break:keep-all;} </style>

【引子】在开发的过程中，表格Table有个缺陷，如果一行中某个单元格的超过一行，表格就不够美观了。下面的代码解决了这个问题：当表格被载入的时候，TD的宽度是原定的长度，不会撑开TD，也不会影响其他TD，点击某行会按照本行所有单元格中行数最多的单元格的长度伸长行高。用户体验很好。【优点】 1、对开发人员指定的表格没有任何影响； 2、使用简单； 3、被定义的表格样式可以随意的定制你的样式，不对你的样式构成影响； 4、移植性好，扩展性好。【缺点】目前用IE7测试正常，但不支持FireFox，工作比较忙，没时间更正，希望网友更正，俺在此谢过。^_^ 【使用方法】 1、将AutoTableSize.js包文件[点击这儿下载源代码]导入到你的web应用目录中； 2、引入包AutoTableSize.js，页面body底部加入： 3、编写你的脚本调用： new AutoTableSize(); 当DOM对象中只有一个Table的时候不用指定Table的ID属性； new AutoTableSize(table); table:既可以是表格的ID属性，也可以是表格对象；

最近在做浏览器兼容，有个table自动拉伸的问题一直困扰着我，这个问题今天终于告一段落了，这篇文章我是极力推荐的，如果碰到这个问题的朋友，我相信你一定会感激我的，如果文章对你有帮助，请留言支持，也可以进行交流。 table这个html中的元素很多人是不推荐用的，因为table有时候不好控制，一些内容自动非配td宽度以及内容撑开，边的问题有时候很让人头疼，如果你有此类问题，欢迎与我交流，俗话说，横排用td，竖排用table，这句话确实没有错，今天我主要说的功能是table的自动拉伸分配td宽度的时候在Chrome与IE下的区别。先对这个问题的浏览器进行分类，这个分类是我经过测试的： A浏览

下面的代码解决了这个问题：当表格被载入的时候，TD的宽度是原定的长度，不会撑开TD，也不会影响其他TD，点击某行会按照本行所有单元格中行数最多的单元格的长度伸长行高。用户体验很好。【优点】 1、对开发人员指定的表格没有任何影响； 2、使用简单； 3、被定义的表格样式可以随意的定制你的样式，不对你的样式构成影响； 4、移植性好，扩展性好。【缺点】目前用IE7测试正常，但不支持FireFox，工作比较忙，没时间更正，希望网友更正，俺在此谢过。^_^ 【使用方法】 1、将AutoTableSize.js包文件[点击这儿下载源代码]导入到你的web应用目录中； 2、引入包AutoTableSize

61,112

社区成员

60,730

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章