相关疑难解决方法(0)

编辑-原标题:是否有其他方式来实现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)来设置角落的样式.这个解决方案也有效,但仍然不是我想要的(我知道我很挑剔).我有两个保留意见:

1. 这是一个非常轻量级的网站,我希望将JavaScript保持在最低限度
2. 使用border-radius对我来说具有优雅降级和渐进增强的部分吸引力.通过对所有圆角使用border-radius,我希望在支持CSS3的浏览器中拥有一致的圆形网站,在其他浏览器中拥有一致的方形网站(我正在看着你,IE).

我知道今天尝试用CSS3做这件事似乎是不必要的,但我有我的理由.我还想指出,这个问题是w3c规范的结果,而不是CSS3支持不好,所以当CSS3得到更广泛的支持时,任何解决方案仍然具有相关性和实用性.

我进行了搜索和搜索,但未能找到符合我要求的解决方案.

我有一个简单的HTML表格.我想要它的圆角,不使用图像或JS,即纯CSS.像这样:

角部细胞的圆角和细胞的1px粗边.

到目前为止我有这个:

table {
  -moz-border-radius: 5px !important;
  border-collapse: collapse !important;
  border: none !important;
}
table th,
table td {
  border: none !important
}
table th:first-child {
  -moz-border-radius: 5px 0 0 0 !important;
}
table th:last-child {
  -moz-border-radius: 0 5px 0 0 !important;
}
table tr:last-child td:first-child {
  -moz-border-radius: 0 0 0 5px !important;
}
table tr:last-child td:last-child {
  -moz-border-radius: 0 0 5px 0 !important;
}
table tr:hover td {
  background-color: #ddd !important …

目前我正在为我的项目进行表自定义.我正在使用Twitter Bootstrap rails gem(2.2.6).但是我认为这不应该是CSS定制的问题.

所以基本上我想实现以下模型:

然而,当我把半径边框上没有任何反应,除非我float这left或块显示它,我没有看到圆角边框.请查看以下jsfiddle:http: //jsfiddle.net/zaEFz/2/

但问题是:当浮动内容时,我松开了表格的结构.这意味着标题不再与内容匹配.这么几个问题:

1. 如何将内容与标题对齐？如果使用float:left

2. 如何围绕每一行的角落？如果不使用float:left和display:block

如果你回答其中一个应该没问题的问题:)