收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2774|回复: 8

[求助] 求助火狐下控制表格列的样式?

[复制链接]
发表于 2009-6-24 10:21:21 | 显示全部楼层 |阅读模式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.tab .td_right{ text-align:right; padding-right:5px}
.tab .td_left{ text-align:left; padding-left:5px;}

<!--[IF!IE]>
.tab td:first-child{text-align:right; padding-right:5px}
.tab td:first-child+td {text-align:left; padding-left:5px;}
<![endif]-->

</style>
</head>
<body>


<table width="100%" border="1" cellspacing="0" cellpadding="0" class="tab">
<colgroup><col class="td_right"/><col class="td_left"/></colgroup>
  <tr>
    <td>用户名:</td>
    <td><input value="" type="text" /></td>
  </tr>
  <tr>
    <td>密码:</td>
    <td>555556666</td>
  </tr>
</table>
</body>
</html>
这个在IE下可以实现对td_right,td_left两个样式的控制,但是在火狐下不行,哪位有好的解决火狐下的方法啊?谢谢
发表于 2009-6-24 10:27:37 | 显示全部楼层
tdright
tdleft
加到TD上去
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-6-24 10:29:02 | 显示全部楼层
呵呵!老大,就是为了不在下面的TD上加上很多class所以才这样做的,呵呵~!能实现吗?
回复 支持 反对

使用道具 举报

发表于 2009-6-24 10:31:08 | 显示全部楼层
firefox对colgroup支持不好。
连文字对齐都不行。
不过拿来做做背景还可以。

看你的情况吧。要给每一列写比较复杂的样式的话,还是要添加class。

[[i] 本帖最后由 dcchan 于 2009-6-24 10:34 编辑 ]
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-6-24 10:39:33 | 显示全部楼层
http://bbs.blueidea.com/viewthread.php?tid=429795&page=论坛里面有对这个的一些研究但是没有说到火狐下不知道,不知道哪位了解的说说?
回复 支持 反对

使用道具 举报

发表于 2009-6-24 10:40:49 | 显示全部楼层
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-6-24 10:41:42 | 显示全部楼层

回复 4# dcchan 的帖子

对,我就是想实现文字的对齐,我那个写了个这个似乎第二个可以实现但是第一个又没找到,你可以把我代码考下来看下
<!--[IF!IE]>
.tab td:first-child{text-align:right; padding-right:5px}
.tab td:first-child+td {text-align:left; padding-left:5px;}
<![endif]-->
我对这个属性不是很熟
回复 支持 反对

使用道具 举报

发表于 2009-6-24 13:23:35 | 显示全部楼层
不清楚lz的情况,我这没问题。
看代码吧。

 提示:您可以先修改部分代码再运行


[[i] 本帖最后由 dcchan 于 2009-6-24 13:24 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2009-6-24 18:07:22 | 显示全部楼层
  1. .tab .td_right { ... }
  2. .tab .td_left { ...}
复制代码
原帖由 [i]dcchan 于 2009-6-24 10:31 发表
firefox对colgroup支持不好。

问题在于 td 并不是 col 的后代元素,或者说 col 元素的内部并没有任何子元素或文本节点,所以那样的选择符根本就是无效的。只不过 IE 猜到你的用意而已,但其实那是错误的。

对标准浏览器来说,实现这个效果完全可以使用伪类选择符,td:first-child 和 td:last-child,甚至更加强大的 CSS3 顺序选择符。

p.s. 楼主使用的条件注释语法是错误的(而且条件注释不能放在 <style> 元素内部),标准浏览器读不到那一段 CSS 代码。把条件注释去掉应该就正常了。

[[i] 本帖最后由 birdstudio 于 2009-6-24 18:14 编辑 ]
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-4-4 19:15 , Processed in 0.124687 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表