问题标签 [css-tables]

我在重新设计的网站上遇到了一些 CSS 和/或表格问题。由于众所周知的“100% div 高度”问题，我使用表格作为网站的结构元素。所以它看起来像这样：

HTML 标记：

和相应的 CSS

这里的问题是，显然右侧的 td 在某些浏览器中根本不会显示（在 Mac 以及旧的 IE 实例上都看到过）。这是 CSS 问题还是表格的问题？

我需要将桌子设计成圆角。

我只是在看看如何最好地去做：

通常，当我将 div 样式设置为圆角时，我会使用 2 个 div，顶部和底部带有空注释，并对其应用尺寸和背景图像 CSS。

然而，表格有内部边框，所以我必须仔细对齐角落 bg 图像中的垂直线，以匹配真正的单元格边框。

到目前为止，这清楚吗？

所以我想知道其他人会如何处理这个问题。我认为我能做的最好的事情就是只使用一个完整的固定大小的背景图像、边框和所有内容，并在顶部覆盖一个无边框的表格。毕竟桌子总是一样大的。

谁能想到更好的方法？

当您激活“冻结窗格”时，如何创建一个第一行和第一列都被锁定的表，就像在 Excel 中一样？我需要表格水平和垂直滚动（存在很多解决方案，但只允许垂直滚动）。

因此，当您在表格中向下滚动时，第一行将保持不变，因为它将具有列标题。这可能最终会出现在 中thead，也可能不会出现在任何使解决方案更容易的情况下。

当您向右滚动时，第一列保持不变，因为它包含行的标签。

我很确定这仅靠 CSS 是不可能的，但谁能指出我的 JavaScript 解决方案？它需要在所有主流浏览器中工作。

我想在浏览器窗口的中心显示一个固定宽度的表格。现在我用

但是 Visual Studio 2008 在这一行给出警告：

属性“对齐”被认为是过时的。建议使用较新的构造。

我应该对表格应用什么 CSS 样式以获得相同的布局？

在一个项目中，我需要渲染具有特定宽度列的表格，每个表格行只有一个 HTML 行（不换行）。我需要每个表格单元在顶部和底部有 1 个像素的填充，在左右有 2 个像素的填充。我能想出的跨浏览器的最佳方法是以这种方式将 div 放在表格内的 td 中：

我希望能够消除添加额外 div 的需要。我花了很多时间在谷歌上搜索这个问题，但找不到替代方案。

有没有办法在不需要添加额外的 div 的情况下做我需要的事情？如果是，那是什么？

有没有办法在不使用表格的情况下获得所需的结果？

显然，奇/偶行的实际样式将通过 CSS 类完成，但是将类“附加”到行的最佳方法是什么？将它放在标记中更好，还是通过客户端javascript更好？哪个更好？为什么？

为简单起见，我们假设这是一个大表，有 100 行，并且颜色方案是交替奇数行/偶数行。此外，页面中的其他地方需要某种可以轻松执行此操作的 javascript 库，因此该包的开销不是一个因素。

---

这个问题的真正目标是确定涉及哪些权衡以及应该如何处理这些权衡，例如如果页面在负载下命中（假设是动态表）对服务器的性能影响，带宽命中对于连接速度较低的用户，通过向 HTML 添加额外的布局代码来实现语义命中（这里的想法是 HTML 用于内容，CSS 用于布局，javascript 用于内容的行为方式以及控制/增强布局）

我喜欢得到一个<ul><li>并使它成为一个漂亮的表格，我将使用 CSS 设置样式。

我喜欢用 jQuery 进行的转换

不断地......

并用表格单元格的第一行<ul>和其他表格单元格制作一个表格头......

页面上可能会有 4-5<ul>秒。

为了给蛋糕锦上添花，让我们从最大的收入者到最小的收入者排序！

---

我发现了这个问题：

如何使用 JQuery 将 HTML 表格转换为列表？

恰恰相反……但也许是一个好的开始？我不知道，我会检查一下......但仍然让问题悬而未决。

---

我发现了这个问题：

如何使用 JQuery 将 HTML 表格转换为列表？

恰恰相反……但也许是一个好的开始？我不知道，我会检查一下......但仍然让问题悬而未决。

---

与解决方案有关的另一个问题...

如果我想“删除”并用表格替换它..

我不喜欢做一张空桌子..

这是代码......也许没有“优化”但它有效

有什么更好的吗？

---

不不不，因为问题/答案变得和插件很棒......但不再起作用......

这是错误......我喜欢在点击事件切换时调用插件（tablerize）并用表格替换整个UL......它不这样做

这是一小段代码：

毫不奇怪，它不起作用..我肯定会搞砸一些东西...而且我没有运气就修改了插件！...

我真的很喜欢保留该代码：

可以变成：

我什至需要一个 div 吗？

帮助！

---

它不起作用；这是完整的页面，也许它会帮助你看看它应该做什么

http://www.acecrodeo.com/new/04-classement.php

我使用延迟隐藏只是为了看到数据在那里......

按下标题后.. tablerize 应该发生，删除旧的 ul 并用表格替换它，然后滑动切换它

---

好的..现在有状态...

我只知道编辑答案并发布它......任何地方都没有更新按钮......

我喜欢给你一个大拇指或任何可以帮助你评分的东西......我只是不知道如何

对于这个问题......我已经准确地发布了你给我的东西......它不起作用......让我们看看链接：http ://www.acecrodeo.com/new/04-classement.php

这是错误：它切换标题...

我迷路了！

我刚刚阅读了应该支持多种现代浏览器（包括 FireFox 3.X、Safari 3.X 和 IE7+，但不包括 IE6-）的网络产品的代码。HTML 代码使用div而不是table来创建类似表格的效果。实际上，div的组织方式如下：

有一段 onload JavaScript 代码可以读取所有“headerX”元素，计算它们的最大offsetWidth。然后将最大offsetWidth分配给它们中的每一个。这样，div 就可以很好地对齐，就像表格一样。

实际上，我认为这不是一个好方法，但有人告诉我，该产品是这样设计的，以使其支持跨浏览器，因为表在不同浏览器中的行为不同。

我不相信。所以，问题。除了上面提到的方法之外，还有什么更好的方法可以为所有流行的浏览器制作类似表格的布局？

我正在使用一个简单的 TABLE 来显示表格数据，其中行需要对齐，但是在选择表格内容时，我只希望用户能够在每一列中进行选择。默认浏览器行为是在所有列中选择行，但我们需要以某种方式只允许在列中选择。

我希望有一种新奇的 CSS 或 XHTML 1.0 方式将表格定义为列而不是行，然后浏览器会在其中强制选择。我知道这可能是不可能的，并且需要构建一种 javascript 选择方式来覆盖浏览器选择。显然，像谷歌电子表格这样的 javascript 电子表格小部件允许根据我的需要在行和列中进行选择，但我希望找到一个基于 Prototype 构建的网格类型小部件或编写我自己的功能。

内置此列选择的小部件的任何提示或链接？是否有一个 HTML/CSS 技巧可以使这样的事情起作用？

我正在尝试设计一些可以在表格中的特定行周围放置边框的 HTML/CSS。是的，我知道我真的不应该使用表格进行布局，但我还没有足够的 CSS 来完全替换它。

无论如何，我有一个包含多行和多列的表格，其中一些与 rowspan 和 colspan 合并，我想在表格的某些部分周围放置一个简单的边框。目前，我正在使用 4 个单独的 CSS 类（顶部、底部、左侧、右侧），它们<td>分别附加到表格顶部、底部、左侧和右侧的单元格。

有没有更简单的方法来做我想做的事？我尝试将顶部和底部应用于 a<tr>但它没有用。（ps我是CSS新手，所以我可能错过了一个非常基本的解决方案。）

注意：我确实需要有多个带边框的部分。基本思想是有多个有边界的集群，每个集群包含多行。