标签: html-table
jQuery追加并删除动态表行
我可以为表添加许多行,但我无法删除很多行.我只能在每个顺序添加中删除1行.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#addCF").click(function(){
$("#customFields").append('<tr valign="top"><th scope="row"><label for="customFieldName">Custom Field</label></th><td><input type="text" class="code" id="customFieldName" name="customFieldName[]" value="" placeholder="Input Name" /> <input type="text" class="code" id="customFieldValue" name="customFieldValue[]" value="" placeholder="Input Value" /> <a href="javascript:void(0);" id="remCF">Remove</a></td></tr>');
$("#remCF").on('click',function(){
$(this).parent().parent().remove();
});
});
});
</script>
<table class="form-table" id="customFields">
<tr valign="top">
<th scope="row"><label for="customFieldName">Custom Field</label></th>
<td>
<input type="text" class="code" id="customFieldName" name="customFieldName[]" value="" placeholder="Input Name" />
<input type="text" class="code" id="customFieldValue" name="customFieldValue[]" value="" placeholder="Input Value" />
<a href="javascript:void(0);" id="addCF">Add</a>
</td>
</tr>
</table>
你可以在http://jsfiddle.net/3AJcj/看到代码
我需要帮助.
推荐指数
解决办法
查看次数
是否有可能告诉Safari在打印页面上重复表格标题？
是否可以在每个打印页面上重复Safari中的表格标题？
此代码适用于Firefox但不适用于Safari:
<table>
<thead>
<tr>
<td>Header1</td>
<td>Header2</td>
</tr>
</thead>
<!-- lots of rows -->
</table>
编辑:
以下不修复它,因此它不能与IE具有相同的错误:
thead { display:table-header-group; }
推荐指数
解决办法
查看次数
比 更好的选择 用于显示空HTML表格单元格？
这是一个经典问题 - 当你有一个空的表格单元格时,浏览器不会渲染它周围的边框.还有两个众所周知的解决方法.一种是 在表格中放置一个; 另一种是使用empty-cells:showCSS属性.
不幸的是两者都有缺点. 在选择文本和复制粘贴时,它有点难看.你会得到很多不应该有的空间,甚至可能还有异国情调的Unicode字符.empty-cells:show应该解决这个问题,但不幸的是它只能在IE版本8开始正常工作(然后只能在符合标准的模式下).它也可以通过指定在其他版本中工作border-collapse: collapse,但有时这是不需要的.在我的情况下,我有一个相当复杂的表,它依赖于border-collapse:separate否则会创建一个混乱的CSS/HTML汤.
那么你可能会在表单元格中放置哪些其他东西会使IE绘制边框但是不可见或可复制？对于所有其他浏览器empty-cells:show已经有了诀窍,所以我真的只需要欺骗IE.
推荐指数
解决办法
查看次数
HTML5表格单元格填充 - 在浏览器中有所不同
我把它简化为一个相当简单的例子.
对我来说,它在Chrome 7.0中与在Firefox 3.6.12中看起来不同.IE 9 beta看起来像Chrome.
我希望能够在TD上设置填充,并使其在所有浏览器中以相同的高度渲染.目前,使用10px顶部填充,Chrome中的单元格看起来比Firefox更高.
我尝试过使用Eric的重置css,它不会改变结果任何想法为什么这些都被渲染得不同？
它的外观如下所示 - http:// yfrog.COM/5zqa7p
而代码......
<!DOCTYPE html>
<head>
<title>padding test</title>
<meta charset=utf-8>
<style>
td { width: 100px; height:100px; background: green; padding: 10px 0 0 0; }
</style>
</head>
<body>
<table>
<tr><td>TEST</td></tr>
<tr><td>TEST</td></tr>
</table>
</body>
推荐指数
解决办法
查看次数
表属性的最小宽度和最大高度
我有一个表,我想定义min-width和max-height属性.见下面的例子.
我现在的问题是浏览器不接受它.如果我在td它上面定义它会被忽略,如果我在div元素内部的td元素中定义它,内容具有正确的最小和最大宽度,但表仍然具有相同的大小.(所以有很多可用空间:/)
我该如何解决这个问题？
编辑:我刚刚注意到问题似乎只发生在表格处于全屏模式时.然而,元素不应超过最大宽度!
例:
<html>
<head>
<style type="text/css">
td {
border: 1px solid black;
}
html,body,.fullheight {
height: 100%;
width: 100%;
}
.minfield {
max-width: 10px;
border: 1px solid red;
overflow: hidden;
}
</style>
</head>
<body>
<table class="fullheight">
<tr>
<td class="minfield">
<div class="minfield">
<p>hallo</p>
</div>
</td>
<td><p>welt</p></td>
</tr>
</table>
</body>
</html>
推荐指数
解决办法
查看次数
table-cell - 某种colspan？
我现在有点困惑,因为我的CSS代码有效,但它根本不漂亮.我现在想重写这些CSS样式并通过LESS构建它们.我和display:table;/ display:table-row;和我有很大的问题display:table-cell;.
例如,我有以下代码:http://jsfiddle.net/La3kd/2/
我怎么能做到最后一个单元格(中心)不会将上面的第二个单元格向右移动？最后一个单元格应该具有上面2个单元格的宽度.需要一些colspan.这太奇怪了,因为我觉得它在我重新编写代码之前有效.但是现在右边的所有元素都完全转移了.
推荐指数
解决办法
查看次数
如何在TD内对齐表格？
我有一张2 和2 的桌子:<tr><td>
<table>
<tr>
<td>
<table>
<!-- other content -->
</table>
</td>
<td/>
</tr>
<tr>
<td/><td/>
</tr>
</table>
在*****的地方我需要插入几乎相同的表(不包含另一个表).但是当我调试它时,表格保持对齐.
我希望左上方框中的表格是右对齐的(知识:和中心对齐).
例如:其中的表格宽度td为32px,但包含的宽度为64px.
如何将桌子对齐？
推荐指数
解决办法
查看次数
Bootstrap:流体表太宽,不适合窗户
我正在使用twitter bootstrap开展一个项目.我们有一个包含大量列的表,并且几乎每次都会比浏览器窗口大.
这就是右边发生的事情:
表格边框保留在浏览器窗口中,而表格内容则不在.如果我滚动,边框保持原样,它们不会"跟随"浏览器窗口.
你可以在这个jsfiddle上看到问题.它适用于Safari,而不适用于Chrome或Firefox.
布局是这样的:
<body>
<div class='container-fluid'>
<div class='row-fluid'>
<div class='span1'>
... menusidebar here...
</div>
<div class='span11'>
<table class="table table-striped table-bordered" style="white-space: nowrap">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
我希望你能帮助我.如果您需要更多信息,请问,我很乐意供应.
这是一个Rails 3.2应用程序,使用版本2.2.1.1中的gem bootstrap-sass(问题也出现在2.2.2.0中).前三个数字反映了bootstrap版本.
推荐指数
解决办法
查看次数
如何在我的表中有两行跨越多列,同时仍然与引导程序兼容？
我正在使用我的Web应用程序的bootstrap.我正在尝试使表格设计布局工作,同时仍然能够使用bootstrap的table-striped类.目前我正在使用以下内容:
<table>
<thead>
<th>ID</th>
<th>Name</th>
<th>Department</th>
<th>Started</th>
</thead>
<tbody>
<tr>
<td>6</td>
<td>
<div>John Doe</div>
<div>12 Sales Total; 4 March, 3 April, 12 July, 14 August</div>
</td>
<td>Sales</td>
<td>Feb. 12th 2010</td>
</tr>
</tbody>
</table>
但是,我希望12 Sales Total; 4 March, 3 April, 12 July, 14 August表格显示在下面,John Doe Sales Feb. 12th 2010而不是在它现在的列中包装.如果我使用两个单独的<tr>元素来使布局工作,那么它将table-striped不再正常工作.
编辑:
所以这是当前的设置.这得到了我想要的,除了div上的文本没有跨越其他列的问题,只是包装在它当前所在的列中.http://jsfiddle.net/AkT6R/
我已经尝试过早些时候在@Bryce提交的答案中提到的东西,但这似乎与Bootstrap不兼容.http://jsfiddle.net/AkT6R/1/
推荐指数
解决办法
查看次数
如何从内容中自动调整表格td宽度
首先请尝试看看这个jsFiddle,因为你可以看到我有一个有很多列的表我唯一的问题是如何td根据文本里面的文本多长时间调整它的宽度而不包装单词？
这是我的HTML代码:
<div class="content">
<div class="content-header">
</div>
<div class="content-loader">
<table>
<tbody>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Gender</td>
<td>Birth Date</td>
<td>Address</td>
<td>Zip Code</td>
<td>Nationality</td>
<td>Contact Number</td>
<td>Email</td>
<td>Username</td>
<td>Course</td>
<td>Year</td>
<td>ID Number</td>
<td>Subjects</td>
<td>Other Fields</td>
<td>Other Fields</td>
<td>Other Fields</td>
<td>Other Fields</td>
<td>Other Fields</td>
<td>Other Fields</td>
</tr>
</tbody>
</table>
</div>
</div>
这是我的CSS代码:
.content {
width: 1100px;
height: 200px;
background: #fdfdfd;
margin: 0px auto;
position: relative;
top: 40px;
border: 1px solid #aaaaaa;
}
.content .content-header {
width: 100%;
height: …推荐指数
解决办法
查看次数
标签 统计
html-table ×10
css ×6
html ×6
html5 ×2
alignment ×1
css3 ×1
fluid-layout ×1
javascript ×1
jquery ×1
padding ×1
safari ×1
tablerow ×1