html - 为什么我的列标题不对齐？

Question

我为列标题设置了与数据行相同的宽度。但他们拒绝排队。

我在这里做了一个 fiddle :http://jsfiddle.net/bwdc78tr/

这是我的 CSS

html, body {
    height: 100%;
    margin: 0;
    width: 100%
}

#header {
    width: 100%;
    height: 60px;
    background-color: #013499;
    margin: 0;
}

#sidebar {
    background-color: #7690C5;
    bottom: 60px;
    float: left;
    height: calc(100% - 120px);
    top: 60px;
    width: 200px;
}

#content {
    background-color: #F2F2F2;
    bottom: 60px;
    float: left;
    height: calc(100% - 120px);
    top: 60px;
    width: calc(100% - 200px);
}

footer {
    clear: both;
    margin: -60px 0 0 0;
    width: 100%;
    height: 60px;
    background-color: #013499;
}

.buttons {
    float: right;
    margin-right: 20px;
}

#dropDownButton {
    vertical-align: -5px;
}

#WholeNumber {
    width: 135px;
}

#LookupSection {
    color: white;
    height: 60px;
    margin-left: 220px;
}

.WholeNumberCell {
    background-color: white;
    color: #000000;
}

#ImageDataTable {
    border: 1px solid black;
    border-spacing: 0;
    height: 100px;
    padding: 0;
    width: 100%;
}

.ImageDataCell {
    background-color: white;
    border: 1px solid black;
    color: #000000;
}

#WholeNumberDiv {
    margin-left: 100px;
    height: 0;
    overflow: auto;
}

.send_button {
    margin-right: 20px;
    text-align: right;
}

表是动态创建的。我已经阅读了几个关于如何创建表格的网站，但它们都解释了基本的东西。这些技术在扩展时总是会崩溃。我找不到任何解释更高级的东西的东西，所以如果有人知道任何好的链接，请发布它们。

我认为一个问题可能是我使用的示例是一个静态大小的表 ( http://www.imaputz.com/cssStuff/bigFourVersion.html ) 而我的是动态的。关于如何调整它有什么想法吗？

Answer 1

在你的表 ImageDataTable 中你有你的 thead 然后在第一个 tr 中你将属性设置为 display:block 当它应该是 display: table-row 在代码的更下方，您将 tbody id="TmageDataBody" 设置为 display: block什么时候应该是 display: table-row-group;

参见 your updated Fiddle here