Question

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

我在这里做了一个小提琴：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;

请参阅remote web debugging

Answer 2

几个问题：

您的第一个<th>以</div>而非显而易见的方式关闭。当我看到HTML给出非常不寻常和意外的行为时，我倾向于使用W3 Validator查找这些问题;它的大部分输出与我无关，但它至少擅长于找到不匹配的标签。浏览器通常会呈现这些内容，以防它们出现轻微的HTML错误，但有时候糟糕的结束标记会严重破坏格式。
您可以在<th>块中定义宽度，但是您可以使用古老的width HTML属性覆盖它。如果您希望标题指定宽度，只需在那里设置宽度。
这可能只是jsfiddle，但是表格给出的空间不允许它给出单元格的全部预期宽度。通过设置width: 300%;以使其具有水平滚动条，我看起来没问题。您在"widht"属性上也有拼写错误。

display: block;

display: table-cell;

display: table-row;

Answer 3

一般来说，你试图对你的桌子施加过多的控制。

首先，从设置thead > tr的{{1}}和tbody元素中删除内嵌样式。当您使用表格时，通常不会想要这个。只需执行此操作即可使列对齐。

现在删除所有设置列宽的内联样式...更简单的方法是使用display:block：

colgroup

现在这就留下了我相信你试图从一开始就处理的问题，那就是你的表数据会创建一个比你的可用空间更宽的表。您可以通过几种方式处理此问题。几点建议：

•将表放在容器中以滚动溢出：

<table>
  <colgroup>
    <col style="width: 50%"></col>
    <col style="width: 20%"></col>
    <col style="width: 30%"></col>
  </colgroup>
  <thead>
    <tr>
     <th>Header 1</th>
     <th>Header 2</th>
     <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
     <td>Header 1</td>
     <td>Header 2</td>
     <td>Header 3</td>
    </tr>
  </tbody>
</table>

•设置表格以截断单元格内容：

 div.tableContainer {
   overflow-x: auto;
 }

通常，您的目标应该是拥有尽可能少的内联CSS的表。

为什么我的列标题不排队？

3 个答案: