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;
    }

-

现在，我原本以为输入框是拧紧对齐的东西，但在完全移除后，没有任何改变。事实上，逐行添加行，当我添加第一个表的第一行时，它只会“中断”（“哦，我看看所有这些数据”）。

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

为什么这些细胞不排队？

Answer 1

尝试在所有表格上使用它：

table-layout:fixed;

Table layout property in w3schools

此致尼古拉

Answer 2

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

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

现在，如果你从你的pastbin中创建一个codepen，那么重新使用你的代码并看看你做了什么，以及进一步开发是很容易的。问候

Answer 3

你有错误的地方

cellWdith310

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

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

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

HTML表格与CSS无法正确对齐

3 个答案: