标签: html-table
将border-bottom添加到表行<tr>
我有一个3乘3的表.我需要一种方法为每行的底部添加一个边框tr并给它一个特定的颜色.
首先我尝试了直接的方式,即:
<tr style="border-bottom:1pt solid black;">
但那没用.所以我添加了这样的CSS:
tr {
border-bottom: 1pt solid black;
}
那还是行不通的.
我更喜欢使用CSS,因为那时我不需要style为每一行添加属性.我还没有添加border属性<table>.我希望这不会影响我的CSS.
推荐指数
解决办法
查看次数
CSS3的border-radius属性和border-collapse:collapse不混合.如何使用border-radius创建带圆角的折叠表？
编辑-原标题:是否有其他方式来实现border-collapse:collapse的CSS(为了有倒塌,圆角表)？
因为事实证明只是让表格的边框崩溃并不能解决根本问题,所以我更新了标题以更好地反映讨论.
我正在尝试使用该CSS3 border-radius属性制作带圆角的桌子.我正在使用的表格样式如下所示:
table {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px
}
这是问题所在.我也想设置border-collapse:collapse属性,当设置border-radius不再有效时.是否有基于CSS的方式我可以获得与border-collapse:collapse没有实际使用它相同的效果？
编辑:
我做了一个简单的页面来演示这里的问题(仅限Firefox/Safari).
似乎问题的很大一部分是将表设置为圆角不会影响角td元素的角落.如果表格都是一种颜色,这不会是一个问题,因为我可以td分别为第一行和最后一行制作圆角和倒角.但是,我使用不同的背景颜色来区分标题和条纹,因此内部td元素也会显示其圆角.
建议的解决方案摘要:
桌子周围有另一个圆角的元素不起作用,因为桌子的方角"渗透".
将边框宽度指定为0不会折叠表.
底部td四角设置CELLSPACING零后仍然广场.
使用JavaScript代替 - 避免问题.
可能的解决方案:
这些表是用PHP生成的,所以我可以为每个外部的t/tds应用一个不同的类,并分别为每个角设置样式.我宁愿不这样做,因为它不是很优雅,并且应用于多个表格有点痛苦,所以请保持建议.
可能的解决方案2是使用JavaScript(特别是jQuery)来设置角落的样式.这个解决方案也有效,但仍然不是我想要的(我知道我很挑剔).我有两个保留意见:
- 这是一个非常轻量级的网站,我希望将JavaScript保持在最低限度
- 使用border-radius对我来说具有优雅降级和渐进增强的部分吸引力.通过对所有圆角使用border-radius,我希望在支持CSS3的浏览器中拥有一致的圆形网站,在其他浏览器中拥有一致的方形网站(我正在看着你,IE).
我知道今天尝试用CSS3做这件事似乎是不必要的,但我有我的理由.我还想指出,这个问题是w3c规范的结果,而不是CSS3支持不好,所以当CSS3得到更广泛的支持时,任何解决方案仍然具有相关性和实用性.
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
如何在打印大型HTML表时处理分页符
我有一个项目,需要打印一个包含许多行的HTML表.
我的问题是表格在多页上打印的方式.它有时会减少一半,使其无法读取,因为一半位于页面的边缘,其余部分打印在下一页的顶部.
我能想到的唯一合理的解决方案是使用堆叠的DIV而不是表格,并在需要时强制分页.但在完成整个更改之前,我认为我之前可以问过这个问题.
推荐指数
解决办法
查看次数
如何创建具有固定/冻结左列和可滚动主体的HTML表？
如何创建具有固定/冻结左列和可滚动主体的HTML表？
我需要一个简单的解决方案 我知道它与其他一些问题类似,例如:
但我只需要一个左栏就可以冻结,我更喜欢一个简单且无脚本的解决方案.
推荐指数
解决办法
查看次数
使细胞宽度适合内容
给定以下标记,我如何使用CSS强制一个单元格(列中的所有单元格)适合其中的内容宽度而不是拉伸(这是默认行为)？
<style type="text/css">
td.block
{
border: 1px solid black;
}
</style>
<table style="width: 100%;">
<tr>
<td class="block">this should stretch</td>
<td class="block">this should stretch</td>
<td class="block">this should be the content width</td>
</tr>
</table>
编辑:我意识到我可以硬编码宽度,但我宁愿不这样做,因为该列中的内容是动态的.
查看下图,第一张图像是标记产生的图像.第二张图是我想要的.
推荐指数
解决办法
查看次数
如何在php中获取选择框的多个选定值？
我有一个html表单,其中有一个选择列表框,您可以从中选择多个值,因为它的multiple属性设置为multiple.考虑形式方法是'GET'.表单的html代码如下:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<form id="form1" name="form1" method="get" action="display.php">
<table width="300" border="1">
<tr>
<td><label>Multiple Selection </label> </td>
<td><select name="select2" size="3" multiple="multiple" tabindex="1">
<option value="11">eleven</option>
<option value="12">twelve</option>
<option value="13">thirette</option>
<option value="14">fourteen</option>
<option value="15">fifteen</option>
<option value="16">sixteen</option>
<option value="17">seventeen</option>
<option value="18">eighteen</option>
<option value="19">nineteen</option>
<option value="20">twenty</option>
</select>
</td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Submit" value="Submit" tabindex="2" /></td>
</tr>
</table>
</form>
</body>
</html>我想在display.php页面的选择列表框中显示所选值.那么如何使用$_GET[]数组在display.php页面上访问所选值.
推荐指数
解决办法
查看次数
带固定标题的HTML表格？
是否有跨浏览器的CSS/JavaScript技术来显示长HTML表格,使列标题保持固定在屏幕上,不要与表格主体一起滚动.想想Microsoft Excel中的"冻结窗格"效果.
我希望能够滚动表格的内容,但始终能够看到顶部的列标题.
推荐指数
解决办法
查看次数
在表格内形成
我在HTML表中包含一些表单来添加新行并更新当前行.我得到的问题是,当我在开发工具中检查表单时,我看到表单元素在打开后立即关闭(输入等不包含在表单中).
因此,提交表单不包括字段.
表行和输入如下:
<tr>
<form method="post" action="">
<td>
<input type="text" name="job_num">
</td>
<td>
<input type="text" name="desc">
</td>
</form>
</tr>
任何帮助都会很棒,谢谢.
推荐指数
解决办法
查看次数
如何在表格行上使用slideDown(或show)函数？
我正在尝试向表中添加一行并将该行滑入视图,但是slidedown函数似乎是在表格行中添加了一个显示:块样式,这会混淆布局.
任何想法如何解决这个问题？
这是代码:
$.get('/some_url',
{ 'val1': id },
function (data) {
var row = $('#detailed_edit_row');
row.hide();
row.html(data);
row.slideDown(1000);
}
);
推荐指数
解决办法
查看次数