Questions tagged «html-table»

与HTML有关，表用于以表格形式显示数据。有关HTML表的问题应通过显示源代码有问题的方式来提出，或者，如果该问题是有关根据期望创建表的尝试失败，则询问者需要显示失败的尝试，描述期望并行为如何不同。

7
如何在HTML表格上显示滚动条
我正在写一个页面，我需要一个html表来维持设置的大小。我需要表顶部的标题始终保持在该位置，但是无论表中添加了多少行，我都需要表的主体进行滚动。 我希望它看起来像此网址中的方法2：http : //www.cssplay.co.uk/menu/tablescroll.html 我尝试这样做，但是没有滚动条出现： tbody { height: 80em; overflow: scroll; } <table border=1 id="qandatbl" align="center"> <tr> <th class="col1">Question No</th> <th class="col2">Option Type</th> <th class="col1">Duration</th> </tr> <tbody> <tr> <td class='qid'></td> <td class="options"></td> <td class="duration"></td> </tr> </tbody> </table> 运行代码段隐藏结果展开摘要
4
我该如何构造一个表头，而不是跨越HTML中的多行？
我想构造一个表，如下所示： | Major Heading 1 | Major Heading 2 | | Minor1 | Minor2 | Minor3 | Minor4 | ---------------------------------------------- | col1 | col2 | col3 | col4 | rest of table ... 鉴于TH元素只有1行，如何构造标题行（如列排列）？分层表似乎不是一个好选择，因为列宽不会对齐，而且我也不能在带有colspan的TH标签的两行中使用。
80 html  html-table 
6
如何使用CSS将表格放在页面中心？
我正在使用以下代码。如何使用CSS将此表格放在页面中心？ <html> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>The Main Page</title> </head> <body> <table> <tr> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> </tr> </table> </body> </html>
80 html  css  html-table  center 
3
将样式应用于第一行的单元格
它应该很简单，但我无法弄清楚。 我有这样一张桌子： <table class="category_table"> <tr><td> blabla 1</td><td> blabla 2 </td></tr> <tr><td> blabla 3 </td><td> blabla 4 </td></tr> </table> 我想使td第一tr行的标签具有vertical-align。但不是第二行。 .category_table td{ vertical-align:top; }
1
使用可排序HTML表格的jQuery UI
我想在HTML表格中从数据库中输出一些数据，并且希望用户能够对表格行进行重新排序。为此，我使用了可排序的jQuery UI，因此： <script> $(function() { $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); }); </script> <?php while($row = mysql_fetch_assoc($co_authors)) { echo "<tr id='sortable'><td>{$row['author_email']}</td> <td>{$row['coauthor_level']}</td>"; <td><button class='remove' id='remove' name='remove' email="<?php echo $row['author_email'] ?>" paper="<?php echo $row['paper_id'] ?>">Remove</button></td> </tr>"; } ?> 问题是当我拖动表格时tr，只会td被拖动。而且，最重要的是，只有第一行是可拖动的：该效果不会应用于其他行。我该如何解决？
11
数据表：无法读取未定义的属性“长度”
我知道这是一个很普遍的问题，并且在Stack Overflow和其他网站（包括datatables网站）上已经阅读了所有类似的问题。 为了澄清，我正在使用 PHP Codeigniter 物质学 我还确保我正确接收了JSON数组： [{"name_en":"hello","phone":"55555555"},{"name_en":"hi","phone":"00000000"}] 我的HTML表格如下所示： <table id="customer_table"> <thead> <tr> <th>Name</th> <th>Phone</th> </tr> </thead> </table> 这是我的document.ready功能： $(document).ready(function(){ //$('#customer_table').DataTable(); $('#customer_table').DataTable( { "ajax": 'json', "dataSrc": "", "columns": [ { "data": "email" }, { "data": "name_en" } ] }); }); 我得到的错误是 Uncaught TypeError：无法读取未定义的属性“ length”
12
使用jQuery从AJAX响应构建表行（json）
可能重复的嵌套元素 我从服务器端ajax响应（Json）中获取信息，并试图动态创建表行并将其附加到ID =的现有表中records_table。 我试图重复实现该解决方案，但失败了。 我的回答如下： '[{ "rank":"9", "content":"Alon", "UID":"5" }, { "rank":"6", "content":"Tala", "UID":"6" }]' 需求结果是这样的： <tr> <td>9</td> <td>Alon</td> <td>5</td> </tr> <tr> <td>6</td> <td>Tala</td> <td>5</td> </tr> 我想做一些事情而不解析Json，所以我尝试做以下事情，这当然是灾难： function responseHandler(response) { $(function() { $.each(response, function(i, item) { $('<tr>').html( $('td').text(item.rank), $('td').text(item.content), $('td').text(item.UID) ).appendTo('#records_table'); }); }); } 从我的解决方案中，我在所有单元格中仅得到数字为6的一行。我究竟做错了什么？
4
如何将文本向左旋转90度，并根据html中的文本调整单元格大小
假设我的桌子上有一些行和列，所以我想旋转像这样的单元格中的文本： 问题是当我使用样式旋转文本时： #rotate { -moz-transform: rotate(-90.0deg); /* FF3.5+ */ -o-transform: rotate(-90.0deg); /* Opera 10.5 */ -webkit-transform: rotate(-90.0deg); /* Saf3.1+, Chrome */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */ 像这样全弄乱了 html代码： <table cellpadding="0" cellspacing="0" align="center"> <tr> <td id='rotate'>10kg</td> <td >B</td> <td >C</td> <td>D</td> <td>E</td> </tr> <tr> <td id='rotate'>20kg</td> …
77 css  html  html-table 
7
在HTML表格的<td>中设置最小宽度
我的表有几列。 每列应具有取决于浏览器窗口大小的动态宽度。另一方面，每一列都不能太小。因此，我尝试min-width为这些列设置属性，但这不是有效的属性。也尝试过min-width，&lt;td&gt;但这也是无效的属性。 有没有办法min-width在HTML表中为col / td设置？
76 html  css  html-table 
3
了解D3.js如何将数据绑定到节点
我正在阅读D3.js文档，发现很难从文档中理解该selection.data方法。 这是文档中给出的示例代码： var matrix = [ [11975, 5871, 8916, 2868], [ 1951, 10048, 2060, 6171], [ 8010, 16145, 8090, 8045], [ 1013, 990, 940, 6907] ]; var tr = d3.select("body").append("table").selectAll("tr") .data(matrix) .enter().append("tr"); var td = tr.selectAll("td") .data(function(d) { return d; }) .enter().append("td") .text(function(d) { return d; }); 我了解其中的大部分内容，但是声明的这一.data(function(d) { return …
7
删除所有的填充和边距表HTML和CSS
我有这张桌子： &lt;body&gt; &lt;table id="page" &gt; &lt;tr id="header" &gt; &lt;td colspan="2" id="tdheader" &gt;je suis&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;1&lt;/td&gt; &lt;td&gt;2&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; 这是CSS html, body, #page { height:100%; width:100%; margin:0; padding:0; } #header { margin:0; padding:0; height:20px; background-color:green; } 我想删除所有边距和填充，但始终有： 我该如何解决？
6
使用jQuery将行添加到表的正文中
我试图将行添加到tbody表中。但是我在实现目标上遇到了问题。首先，在更改html页面的下拉菜单时会调用所有发生的功能。我创建了一个tr字符串，其中包含所有td包含html元素，文本和其他内容的内部。但是当我尝试使用以下方法将生成的行添加到表中时： $(newRowContent).appendTo("#tblEntAttributes tbody"); 我遇到一个错误。该表的名称是tblEntAttributes，我正在尝试将其添加到中tbody。 实际上发生的是jQuery无法tblEntAttributes作为html元素获取。但是我可以使用documemt.getElementById("tblEntAttributes"); 有什么办法可以通过向tbody表的行添加行来实现这一点。也许绕过什么。 这是完整的代码： var newRowContent = "&lt;tr&gt;&lt;td&gt;&lt;input type=\"checkbox\" id=\"" + chkboxId + "\" value=\"" + chkboxValue + "\"&gt;&lt;/td&gt;&lt;td&gt;" + displayName + "&lt;/td&gt;&lt;td&gt;" + logicalName + "&lt;/td&gt;&lt;td&gt;" + dataType + "&lt;/td&gt;&lt;td&gt;&lt;input type=\"checkbox\" id=\"chkAllPrimaryAttrs\" name=\"chkAllPrimaryAttrs\" value=\"chkAllPrimaryAttrs\"&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=\"checkbox\" id=\"chkAllPrimaryAttrs\" name=\"chkAllPrimaryAttrs\" value=\"chkAllPrimaryAttrs\"&gt;&lt;/td&gt;&lt;/tr&gt;"; $("#tblEntAttributes tbody").append(newRowContent); 我忘记提及的一件事是编写此代码的函数实际上是ajax调用的成功回调函数。我可以使用访问该表，document.getElementById("tblEntAttributes")但由于某些原因$(#tblEntAttributes)似乎无法正常工作。
8
CSS表格的TD宽度-固定，不灵活
我有一张桌子，我想在td上设置30px的固定宽度。问题在于，当td中的文本太长时，td会被拉宽到30px以上。Overflow:hidden在td上也不起作用，我需要某种方式隐藏溢出的文本并保持td宽度为30px。 &lt;table cellpadding="0" cellspacing="0"&gt; &lt;tr&gt; &lt;td&gt;first&lt;/td&gt;&lt;td&gt;second&lt;/td&gt;&lt;td&gt;third&lt;/td&gt;&lt;td&gt;forth&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;first&lt;/td&gt;&lt;td&gt;this is really long&lt;/td&gt;&lt;td&gt;third&lt;/td&gt;&lt;td&gt;forth&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;
74 html  css  html-table 
7
thead和tbody之间的间距
我有一个简单的html表，如下所示： &lt;table&gt; &lt;thead&gt; &lt;tr&gt;&lt;th&gt;Column 1&lt;/th&gt;&lt;th&gt;Column 2&lt;/th&gt;&lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr class="odd first-row"&gt;&lt;td&gt;Value 1&lt;/td&gt;&lt;td&gt;Value 2&lt;/td&gt;&lt;/tr&gt; &lt;tr class="even"&gt;&lt;td&gt;Value 3&lt;/td&gt;&lt;td&gt;Value 4&lt;/td&gt;&lt;/tr&gt; &lt;tr class="odd"&gt;&lt;td&gt;Value 5&lt;/td&gt;&lt;td&gt;Value 6&lt;/td&gt;&lt;/tr&gt; &lt;tr class="even last-row"&gt;&lt;td&gt;Value 7&lt;/td&gt;&lt;td&gt;Value 8&lt;/td&gt;&lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; 我想用以下方式设置样式： 带框阴影的标题行 标题行和第一行正文之间的空白 我尝试了不同的方法： table { /* collapsed, because the bottom shadow on thead tr is hidden otherwise */ border-collapse: collapse; } …
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.