当给出％宽度时，表的主体减少了Head的col 1空间的总空间

I have a table with px widths. The only thing I am changing are those px to %. When table receives new values, table's header and footer accept them correctly and take the correct position. But table's body reacts taking its total width as the width of only the first column. This means the 4 columns collapse into the first one, and leving the next 3 columns blank.

我有一个px宽度的表。我唯一要改变的是那些px到%。当表格收到新值时,表格的页眉和页脚会正确接受它们并采取正确的位置。但是桌子的身体反应将其总宽度作为仅第一列的宽度。这意味着4列会折叠到第一列,并将接下来的3列留空。

Here I explain with images.

在这里,我用图像解释。

Before: width on px. Each column on the body matches with each column on head:

之前:px上的宽度。身体上的每一列都与头上的每一列相匹配:

Code involved:

table {
    width: 100%;
    border-spacing: 0;
    color:#666;
    font-size:12px;
    background:#eaebec;
    margin:10px;
    border:#ccc 1px solid;
    border-radius:3px;
    box-shadow: 0 1px 2px #d1d1d1;
    table-layout: fixed;}
.discontinueColumn{
    font-size: 10px;
    width: 90px;}
.editColumn{
    font-size: 10px;
    width: 90px;}
.headerScroll{
    width: 16px;}
tbody{
    display: block;
    height: 360px;
    width: 900px;
        overflow-y: auto; }
.contentColumn_turn_conf1{
    width:549px;}
.contentColumn_turn_conf2{
    width:149px;}

After: width on %. All body's columns reduce it's total space to head's first column width:

之后:宽度为%。所有正文的列都将其总空间减少到头部的第一列宽度:

Code involved:

table {
    width: 100%;
    border-spacing: 0;
    color:#666;
    font-size:12px;
    background:#eaebec;
    margin:10px;
    border:#ccc 1px solid;
    border-radius:3px;
    box-shadow: 0 1px 2px #d1d1d1;
    table-layout: fixed;}
.discontinueColumn{
    font-size: 10px;
    width: 10%;}
.editColumn{
    font-size: 10px;
    width: 10%;}
.headerScroll{
    width: 4%;  }
tbody{
    display: block;
    height: 360px;
    width: 100%;
        overflow-y: auto; }
.contentColumn_turn_conf1{
    width:60%;}
.contentColumn_turn_conf2{
    width:20%;}

As you can see, on the last one body's 100% width is reduced to head's first column width. On code you can appreciate only width values have changed. Why is this happening? Any aditional code please let me know. Thank you.

正如您所看到的,在最后一个主体的100%宽度减少到头部的第一列宽度。在代码上,您可以欣赏只有宽度值已更改。为什么会这样?任何附加代码请告诉我。谢谢。

1 个解决方案

#1

you gave display: block; to a <tbody> which is not good since it is display: table-row-group by default.

你给了display:block;到这是不好的,因为它是display:table-row-group默认情况下。

This could be what you want: http://jsfiddle.net/4Eak6/ Let the table header define the column width.

这可能是你想要的:http://jsfiddle.net/4Eak6/让表头定义列宽。

table {
    width: calc(100% - 20px);
    border-spacing: 0;
    color:#666;
    font-size:12px;
    background:#eaebec;
    margin:10px;
    border:#ccc 1px solid;
    border-radius:3px;
    box-shadow: 0 1px 2px #d1d1d1;
    table-layout: auto;
}
.discontinueColumn {
    font-size: 10px;
    width: 10%;
}
.editColumn {
    font-size: 10px;
    width: 10%;
}
.headerScroll {
    width: 4%;
}
tbody {
    height: 360px;
    overflow: auto;
}
.contentColumn_turn_conf1 {
    width:60%;
}
.contentColumn_turn_conf2 {
    width:20%;
}

Edit:

From the source I guess you want floating table headers. So here is demo for that: http://jsfiddle.net/4Eak6/1/ using the jQuery Framework and floatThead Plugin. Maybe it's a help for you.

从源头我想你想要浮动表头。所以这里是演示:http://jsfiddle.net/4Eak6/1/使用jQuery框架和floatThead插件。也许这对你有所帮助。

1 个解决方案

#1

更多相关文章

随机推荐