html - HTML 表格未与 CSS 正确对齐

Question

我有一系列堆叠在一起的桌子。它们可能是一个表，但出于功能原因，它们被拆分了。它们看起来像这样：

现在，问题是他们没有像我期望的那样排队。管理它们的代码如下所示（很长）：

该结构有 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;
    }

--

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

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

为什么这些细胞不排队？

score 2 · Accepted Answer

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

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

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

score 2 · Accepted Answer

尝试在所有表上使用它：

table-layout:fixed;

w3schools 中的表格布局属性

问候，尼古拉

score 1 · Accepted Answer

有很多地方你有错字

cellWdith310

假设您遗漏了一些 CSS，那么这可能是问题所在

更新：这是一个 JS 小提琴。您的 HTML 存在各种问题，例如最后一个表中没有足够的 TD 等。区分源代码，看看有什么不同

http://jsfiddle.net/AhLAD/7/

html - HTML 表格未与 CSS 正确对齐

3 回答 3

Related

Reference