0

我正在使用一个简单的 TABLE 来显示表格数据，其中行需要对齐，但是在选择表格内容时，我只希望用户能够在每一列中进行选择。默认浏览器行为是在所有列中选择行，但我们需要以某种方式只允许在列中选择。

我希望有一种新奇的 CSS 或 XHTML 1.0 方式将表格定义为列而不是行，然后浏览器会在其中强制选择。我知道这可能是不可能的，并且需要构建一种 javascript 选择方式来覆盖浏览器选择。显然，像谷歌电子表格这样的 javascript 电子表格小部件允许根据我的需要在行和列中进行选择，但我希望找到一个基于 Prototype 构建的网格类型小部件或编写我自己的功能。

内置此列选择的小部件的任何提示或链接？是否有一个 HTML/CSS 技巧可以使这样的事情起作用？

4

3 回答 3

1

使用 colgroup 标签 - http://www.w3schools.com/tags/tag_colgroup.asp

您可以将所需的任何样式应用于整个列。当鼠标在列中移动/单击时更改样式可以在 jquery 中完成......您可以使用此处其他答案中的脚本，但将“table td”选择器替换为“table colgroup”。

于 2009-03-16T13:43:08.597 回答
1

我不确定您的意思，但您似乎希望能够以不同于其他列的方式为单个列着色。最简单的方法是使用 colgroup 和 col 标签：

css

.name {width:5em;background:#ccc;}
.value {width:3em;text-align:center;color:#f00;}
.comment {text-align:right;}

HTML

<table>
<caption>My Test Table</caption>
<col class="name">
<colgroup class="value" span="3"></colgroup>
<col class="comment">
</colgroup>
<tr>
<th>Name</th>
<th>Value 1</th>
<th>Value 2</th>
<th>Value 3</th>
<th>Comment</th>
</tr>
<tr>
<td>Bob</td>
<td>Yes</td>
<td>No</td>
<td>42</td>
<td>I like cheese</td>
</tr>
<tr>
<td>Susan</td>
<td>No</td>
<td>Yes</td>
<td>42</td>
<td>Sharp Cheddar</td>
</tr>
</table>

从http://www.webmasterworld.com/forum83/6826.htm窃取的代码

只有一部分 CSS 属性可以在列上设置。W3C 有一个列表。

于 2009-03-16T12:06:56.597 回答
1

如果您只想在用户单击表格时突出显示一列，您可以使用jquery轻松完成

$("table td").bind('click',function(){
            $("table td").css('background','');
            $(this).css('background','green');
         });
于 2009-03-16T12:31:26.570 回答