表边框不直(Table borders not straight)

表边框不直(Table borders not straight)

我正在使用表创建一个html迷宫，由于某种原因，边框没有正确显示。 而不是漂亮的直线，边框显示为对角线blob而不是。 有没有办法来解决这个问题？ 这是我的例子： http ： //thomaswd.com/maze 。

输出：

我的CSS：

section .l { border-left:20px solid #ff9c00; } section .r { border-right:20px solid #ff9c00; } section .t { border-top:20px solid #ff9c00; } section .b { border-bottom:20px solid #ff9c00; } section table { margin-right:auto; margin-left:auto; border:20px solid #FF9C00; }

I am creating a html maze using tables and for some reason, the borders dont show up correctly. Instead of nice straight lines, the borders show up as diagonal blobs instead. Is there a way to fix this? Here is my example : http://thomaswd.com/maze.

Output:

My CSS:

section .l { border-left:20px solid #ff9c00; } section .r { border-right:20px solid #ff9c00; } section .t { border-top:20px solid #ff9c00; } section .b { border-bottom:20px solid #ff9c00; } section table { margin-right:auto; margin-left:auto; border:20px solid #FF9C00; }

最满意答案

去除border: 20px solid transparent; 从您的section table tr td选择器（未在您的代码示例中显示），它看起来很好。

Remove border: 20px solid transparent; from your section table tr td selector (not shown in your code sample) and it looks fine.