HTML 表格未与 CSS 正确对齐

Question

我有一系列堆叠在一起的表格。它们可能是一张表，但出于功能原因，它们被分开了。它们看起来像这样:

现在，问题是他们没有像我期望的那样排队。管理它们的代码如下所示(相当冗长):

http://pastebin.com/eWhEPzF5

结构有3张表，分表的时候可以看到戳到了最里面的表外面。全局样式非常简单:

body *
    {
    font-family:'Consolas';
    font-size:12pt;
    padding:0px;

    }
table
    {
        border: 0px;
        border-style:solid;
        padding:0px;
        border-spacing:0px;
        border-collapse:collapse; 
    }
td
    {
        padding:0px;
        border:0px;
        height:25px;
        border-style:solid;
    }

--

现在，我原本以为是输入框搞砸了对齐，但在完全删除它们之后，什么都没有改变。事实上，逐行添加行时，它只会在我添加第一个表的第一行时“中断”(“哦，我看看所有这些数据”)。

我仔细检查了所有样式和所有内容，一切都是正确的。

为什么这些单元格不排列？

Answer 1

使用class , <col>标记和 colspan在每个表中设置等于宽度。

添加table-layout:fixed;避免 width根据内容调整大小。

现在，如果您从您的 pastbin 制作一个 codepen，那么重新使用您的代码并查看您在做什么，以便进一步开发会很舒服。问候