问题标签 [html-table]

编辑 - 原标题：有没有其他方法可以实现border-collapse:collapse（CSS为了有一个折叠的圆角桌）？

事实证明，简单地让表格的边框折叠并不能解决根本问题，我更新了标题以更好地反映讨论。

我正在尝试使用该CSS3 border-radius属性制作一张圆角的桌子。我使用的表格样式如下所示：

这就是问题所在。我也想设置border-collapse:collapse属性，当设置border-radius不再有效。有没有一种基于 CSS 的方式，我可以获得与border-collapse:collapse不实际使用它相同的效果？

编辑：

我制作了一个简单的页面来演示这里的问题（仅限 Firefox/Safari）。

似乎很大一部分问题在于将表格设置为圆角不会影响角td元素的角。如果表格都是一种颜色，这不会有问题，因为我可以td分别为第一行和最后一行制作顶角和底角。但是，我为表格使用不同的背景颜色来区分标题和条纹，因此内部td元素也会显示它们的圆角。

建议的解决方案摘要：

用另一个圆角元素围绕桌子不起作用，因为桌子的方角“渗出”。

将边框宽度指定为 0 不会折叠表格。

td将单元格间距设置为零后，底角仍然是方形的。

改用 JavaScript 可以避免问题。

可能的解决方案：

这些表是用 PHP 生成的，所以我可以对每个外部 th/tds 应用不同的类并分别设置每个角的样式。我宁愿不这样做，因为它不是很优雅，而且应用于多个表有点痛苦，所以请不断提出建议。

可能的解决方案 2 是使用 JavaScript（特别是 jQuery）来设置角的样式。这个解决方案也有效，但仍然不是我想要的（我知道我很挑剔）。我有两个保留：

1. 这是一个非常轻量级的网站，我希望将 JavaScript 保持在最低限度
2. 使用边界半径对我的部分吸引力是优雅的退化和渐进的增强。通过对所有圆角使用边框半径，我希望在支持 CSS3 的浏览器中拥有一个始终如一的圆形站点，在其他浏览器中拥有一个始终如一的方形站点（我在看着你，IE）。

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

_{（来源：sontag.ca）}

第一部分

这种布局可以很简单地用 2 个 HTML 表格来完成，一个嵌套在另一个里面，甚至可以用一个表格来完成。

它也可以用 CSS 来完成，尽管它可能需要更多的思考。

这可能不是真实世界的布局，但我见过类似的页面。认为这是一个谜；一个锻炼你的 CSS 技能的练习。

为了让事情变得更有趣，我在一个名为The Challenge的小 2 部分网页中提出了这个问题。我们将检查代码和问题：使用表格布局还是 CSS？，并排，一击一击，因为我们的两个对手争夺代码霸权。

第一部分阐述了挑战是如何产生的。我希望你喜欢。

第二部分是决定。 你可能会感到惊讶。

第二部分

我很惊讶在我发布后几分钟真正好的答案出现的速度如此之快。这是一次令人谦卑的经历。我不想和你竞争计时赛。

但是，话虽如此，在仔细检查所提供的解决方案后，我开始意识到没有一个 CSS 解决方案（包括我当时自己的）能像所提供的任何一个表格解决方案一样有效。挑战在于 CSS 比任何布局解决方案的表格都要好。

所以我添加了 3 条新规则（请记住，其中一条规则是可以更改规则）。这惹恼了一些人。因此，我添加了一些关于为什么更改规则的丰富多彩的解释。我认为这更让他们恼火。

1. 我们的花园要围着栅栏；有什么东西可以把它与它可能发现的任何沉闷的环境区分开来；而且不是太贵，但易于保持清洁。所以我想要花园周围有一个 1 像素的黑色边框
2. 每个花园地块的居民（角色）必须是黑人或白人，这取决于哪个人在他们的花园里表现得最好。而且都是草书血统。它们之间没有斜体。;-)
3. 花园是可重定位的，也就是说，我可以在页面的任何位置拥有这个花园（没有绝对定位）。

这是最终输出的样子（背景颜色可选）：

_{（来源：sontag.ca）}

对于反复无常和最后一刻的规则更改，我深表歉意。我错了。每个花园地块的居民都是工匠，手工制作的专家。他们是草书家族的后代，他们的风格感归功于斜体。

花园必须是可重定位的，因为两种花园（表格和 CSS）需要在同一页面上共存。我说position:absolute不允许有规则可能是错误的。如果你能让他们在这种情况下工作，那么你就有更多的权力。他们肯定会被接受。

我要求在地块周围设置一个栅栏，因为每种花园类型都将种植在一个橙色背景的乡村，与我们种植的一些花朵的颜色非常相似。

我现在住在荷兰，郁金香季节快到了。如果您在接下来的几周内飞越荷兰，并且天气晴朗（这里很少见），您下方的风景将看起来与这个愚蠢的练习非常相似。

我不喜欢橙色，但我喜欢并欣赏荷兰人，所以这就是为什么我们有橙色背景，向我的东道国致敬。:-)

第三部分

我在下面的挑战中发布了 Ted 的表格答案以及这张图片

_{（来源：sontag.ca）}

因为居住者可以很容易地添加到花园地块而无需触及 CSS 规则 - 一切都自动居中。

你能用 CSS 做到这一点吗？ 你能用……鲱鱼砍倒森林里最强壮的树吗？

更新：查理的答案在这里。

我有一个 html 文件，其中有一个包含 4 列和多行的巨大表格。我想在 asp 2.0/3.5 页面中显示它，这样它的前 2 列出现在一个区域中，另外两列出现在与其相邻的另一个区域中。诸如将表格一分为二并显示之类的事情。有什么办法可以实现吗？

第一次在这里提问。

我有一个围绕桌子建立的网站，我知道不好，但它已经完成了。它在 Firefox 中看起来不错，但在 IE 中到处都是文本。

链接是http://www.mothershipinc.com 警告：包含音乐

这是索引页面的代码：

关闭行的可见性并消除间隙的最佳方法是什么。反之亦然，如果打开可见性确保可见行再次显示。

是否有一种跨浏览器 CSS/JavaScript 技术来显示一个长 HTML 表格，以便列标题保持固定在屏幕上并且不随表格主体滚动。想想 Microsoft Excel 中的“冻结窗格”效果。

我希望能够滚动浏览表格的内容，但始终能够看到顶部的列标题。

我目前正在使用以下 jQuery 脚本来突出显示表中的行，效果很好！

这对于每一行都是新记录的数据表非常有用，但是，我遇到了一个问题，我的记录占用了两行数据，并且想要修改 jQuery，使其呈现如下内容：

我将如何在 jQuery 中实现这一点，我希望每 3 行都有一个“alt1”类，每 4 行有一个“alt2”类？

页面： http: //www.visitherefordshire.net/news

在 Internet Explorer 7 和 Opera 9.6 中，文本在框外运行。这似乎是由于表格是 100% 宽度：如果我设置像素宽度（例如 700 像素），那么它们适合。

据我所见，所有的“外部”div 都不比可见框宽，那么为什么桌子上的 100% 宽度会将其拉伸这么远？

PS 可怕的代码，我知道；这就是适合你的 Joomla。从长远来看，我们会努力让它变得更好。

是否有 CSS/JavaScript 技术来显示一个长 HTML 表格，以便列标题在屏幕上保持固定，第一列保持固定并随数据滚动。

我希望能够滚动浏览表格的内容，但始终能够看到顶部的列标题和左侧的第一列。

如果有一个jQuery插件那就太好了！如果它有帮助，我唯一关心的浏览器就是 Firefox。

有一个由表单标签包围的数据表。在页面底部有一个固定的页脚。

当表格为空时（仅显示表格标题），整个页脚会移到屏幕的一半，向右移动。

有任何想法吗？

CSS：