我想显示一个带控件的基本html表来切换显示/隐藏其他列:
<table id="mytable">
<tr>
<th>Column 1</th>
<th class="col1">1a</th>
<th class="col1">1b</th>
<th>Column 2</th>
<th class="col2">2a</th>
<th class="col2">2b</th>
</tr>
<tr>
<td>100</td>
<td class="col1">40</td>
<td class="col1">60</td>
<td>200</td>
<td class="col2">110</td>
<td class="col2">90</td>
</tr>
</table>
因此,第1列和第2列将是默认显示的唯一列 - 但是当您单击列1时,我希望1a和1b切换,而第2列则使用2a和2b.我最终可能会有更多列和大量行 - 所以任何javascript循环方法都太慢了,无法在我测试时使用.
唯一似乎足够快的方法是设置一些像这样的css:
table.hide1 .col1 { display: none; }
table.hide2 .col2 { display: none; }
table.hide3 .col3 { display: none; }
table.show1 .col1 { display: table-cell; }
table.show2 .col2 { display: table-cell; }
table.show3 .col3 { display: table-cell; }
然后在将触发切换的表头单元格上设置onClick函数调用 - 并确定将"mytable"设置为哪个css类将创建我正在寻找的切换效果.有没有一种简单的方法来设置它,以便代码可以适用于n#列？
这就是我提出的,效果很好 - 而且非常快.如果您能想出改进方法,请告诉我.
CSS …
我有一个用户表,每行包含他们的姓名,电子邮件地址等.对于一些用户来说,这一行是一行文本行,有些是另外两行等等.但是我希望表中的每一行都是一行文本行,截断其余部分.
我看到了这两个问题:
事实上,我的问题与第一个问题完全相似,但由于链接已经死亡,我无法研究它.两个答案都说使用white-space: nowrap.然而,这不起作用,也许我错过了一些东西.
由于我无法向您展示代码,我转载了问题:
<style type="text/css">
td {
white-space: nowrap;
overflow: hidden;
width: 125px;
height: 25px;
}
</style>
<div style="width:500px">
<table>
<tr>
<td>lorem ipsum here... blablablablablablablablablabla</td>
<td>lorem ipsum here... blablablablablablablablablabla</td>
<td>lorem ipsum here... blablablablablablablablablabla</td>
<td>lorem ipsum here... blablablablablablablablablabla</td>
</tr>
</table>
</div>
没有white-space表是500px宽,文本需要多行.
但是white-space: nowrap让浏览器只是忽略width指令并增加表的宽度,直到所有数据都适合一行.
我究竟做错了什么？
我知道这有点偏离主题,但HTML表格标记中使用的标签名称"TD"的起源是什么？
"TH"似乎应该代表"Table Row"的"Table Header"和"TR",但是"TD"呢？
这不是一个问题.
我只觉得花了这么多时间搞清楚如何做到这一点我会讨厌自己,如果我不把它保存在某个地方,如果我没有分享我找到的东西,我会是一个糟糕的程序员.(在这里一石二鸟.)
所以这里是用于在表中旋转文本作为标题的代码.
<html>
<head>
<!--[if IE]>
<style>
.rotate_text
{
writing-mode: tb-rl;
filter: flipH() flipV();
}
</style>
<![endif]-->
<!--[if !IE]><!-->
<style>
.rotate_text
{
-moz-transform:rotate(-90deg);
-moz-transform-origin: top left;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: top left;
-o-transform: rotate(-90deg);
-o-transform-origin: top left;
position:relative;
top:20px;
}
</style>
<!--<![endif]-->
<style>
table
{
border: 1px solid black;
table-layout: fixed;
width: 69px; /*Table width must be set or it wont resize the cells*/
}
th, td
{
border: 1px solid black;
width: 23px;
}
.rotated_cell
{
height:300px;
vertical-align:bottom
} …我似乎找不到我的问题的答案.我有一个包含两行和两列的表(如下所示的代码),如何在特定单元格中居中对齐文本.我想在一个或两个单元格中对齐文本 - 而不是所有单元格.
<div style="text-align: center;">
<table style="margin: 0px auto;" border="0">
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</div>
我有一张类似于的表:
<table id="table1">
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
</tr>
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
</tr>
<table>
我想连续计算td元素的数量.我在尝试:
document.getElementById('').cells.length;
document.getElementById('').length;
document.getElementById('').getElementsByTagName('td').length;
它没有显示实际结果.
我安装了Ruby和Mechanize.在我看来,Nokogiri可以做我想做的事,但我不知道该怎么做.
那怎么样table？它只是vBulletin论坛网站HTML的一部分.我试图保留HTML结构,但删除了一些文本和标记属性.我想获得每个帖子的一些细节:标题,作者,日期,时间,回复和视图.
请注意HTML文档中的表格很少？我正在追寻一张特别的桌子tbody,<tbody id="threadbits_forum_251">.名称将始终相同(我希望).我可以在代码中使用tbody和name吗？
<table >
<tbody>
<tr> <!-- table header --> </tr>
</tbody>
<!-- show threads -->
<tbody id="threadbits_forum_251">
<tr>
<td></td>
<td></td>
<td>
<div>
<a href="showthread.php?t=230708" >Vb4 Gold Released</a>
</div>
<div>
<span><a>Paul M</a></span>
</div>
</td>
<td>
06 Jan 2010 <span class="time">23:35</span><br />
by <a href="member.php?find=lastposter&t=230708">shane943</a>
</div>
</td>
<td><a href="#">24</a></td>
<td>1,320</td>
</tr>
</tbody>
</table>
我知道如何使用jQuery获取单元格的行和列索引,但我无法弄清楚相反的情况.给定行和列索引,我将如何访问此位置的td？
我想在HTML表中转置行和列,即行作为列,列作为行.
我能以什么方式做到这一点？
示例:
1 4 7
2 5 8
3 6 9
如
1 2 3
4 5 6
7 8 9
我有一个由3列组成的HTML表.它的固定宽度为600px.
<table>
<tr>
<td>Name</td>
<td>Qty</td>
<td>Actions</td>
</tr>
</table>
我希望Qty和Actions列尽可能小(将内容保持为一行),并希望Name列占用剩余的可用空间."数量"和"操作"列的大小会根据内容/字体大小而变化,因此在这种情况下,固定宽度将不起作用.
有没有办法在HTML/CSS中执行此操作？或者这是我需要打破Javascript的东西吗？