使用 HTML Colspan 时的 CSS 单元格边框
我认为最好用图像来解释这一点。 
左侧图像，无列跨度。右图带有 colspan。
解释一下，每个绿色单元格由代表一小时的 12 个单元格组成。这使我能够将正确位置的单元格同步到最近的 5 分钟。
使用 colspan="12"，我可以每小时减少单元格数量，只需创建一个跨度为 12. 而不是 12. 的单元格（如果适用）。
然而，由于这一个单元格与 12 个单元格接壤，因此它将其触摸边框设置为与其中一个触摸单元格相同的颜色。尽管只有一半是黑色的，其余的是绿色的。是否可以将边框设置为一半？或者这是 HTML 的限制？
编辑：
我发现（至少在谷歌浏览器中），将边框设置为相同的宽度会产生奇怪的效果。较大的边框似乎占主导地位。即，我可以通过使绿色比黑色更宽来扭转效果，相反，它使整条线变成绿色...设置为 2px，使它们随机地相互支配。请参阅 http://jsfiddle.net/7Harq/7/ 和 http://jsfiddle.net/7Harq/9/
编辑2：
似乎只发生在 Chrome 中（FF工作正常）。
那么，拥有额外的细胞（即 12 个细胞，而不是使用 colspan 12 的 1 个细胞）是否会产生不利影响？ Iphone/Ipad 上的速度一度非常慢，我将其归因于电池数量。
I think this is best explained using an image.
Image on left, with no col span. Image on right with colspan.
To explain, each green cell is made up of 12 cells representing an hour. This allows me to sync the cells in the correct places to the nearest 5 mins.
using colspan="12", I can reduce the number of cells, by each hour, just creating one cell of span 12. rather than 12. (where applicable).
However, due to this one cell bordering against 12 cells, it is setting its touching border to equal the same colour as one of the touching cells. Despite only half are black, and the rest are green. Is it possible to set the border half and half? or is this a HTML limitation?
EDIT:
Ive found that (In google chrome at least), setting the borders to be the same width has strange effects.The bigger border seems to dominate. I.e. I can reverse the effect by making green wider than black, and instead it makes the whole line green... Setting to 2px, makes them randomly dominate each other. See http://jsfiddle.net/7Harq/7/ and http://jsfiddle.net/7Harq/9/
Edit 2:
Seems to only occur in Chrome (FF works fine).
So, does having extra cells (i.e. 12 cells instead of 1 cell with colspan 12) have a detrimental effect? It was at one point really slow on the Iphone/Ipad which I put down to the number of cells.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这是浏览器特定的错误。
每个浏览器在考虑表格边框（CSS 或真实表格）时都有自己的错误，按照您想要的方式执行此操作的唯一真正方法是使用 DIV 并动态浮动和间隔它们或使用 CSS 预设，因为它是唯一的获得跨浏览器视图的真正方法。
抱歉，表格的问题太多，并且特定于浏览器，无法用于布局。
This is a browser specific bug.
Each browser has it's own bugs when taking into account table borders (Css or real tables), the only real way of doing this the way you want is to use a DIV and float and space them dynamically or preset using CSS as it is the only true way of getting a cross browser view.
Sorry tables are just too buggy and browser specific to be used for layout.