列有不同的宽度

我对列下面的标记：列有不同的宽度

<table class="b-hdfs__files-list"> 
    <colgroup> 
     <col span="1" class="b-hdfs__files-list__item-property-col-width-selected"> 
     <col span="1" class="b-hdfs__files-list__item-property-col-width-type"> 
     <col span="1" class="b-hdfs__files-list__item-property-col-width-name"> 
     <col span="1" class="b-hdfs__files-list__item-property-col-width-size"> 
     <col span="1" class="b-hdfs__files-list__item-property-col-width-user"> 
     <col span="1" class="b-hdfs__files-list__item-property-col-width-group"> 
     <col span="1" class="b-hdfs__files-list__item-property-col-width-permissions"> 
     <col span="1" class="b-hdfs__files-list__item-property-col-width-date"> 
    </colgroup>

和CSS：

.b-hdfs__files-list .b-hdfs__files-list__item-property-col-width-selected { 
    width: 50px; 
} 
.b-hdfs__files-list .b-hdfs__files-list__item-property-col-width-type { 
    width: 50px; 
} 
.b-hdfs__files-list .b-hdfs__files-list__item-property-col-width-name { 
    width: 50px; 
} 
.b-hdfs__files-list .b-hdfs__files-list__item-property-col-width-size { 
    width: 50px; 
} 
.b-hdfs__files-list .b-hdfs__files-list__item-property-col-width-user { 
    width: 50px; 
} 
.b-hdfs__files-list .b-hdfs__files-list__item-property-col-width-group { 
    width: 50px; 
} 
.b-hdfs__files-list .b-hdfs__files-list__item-property-col-width-permissions { 
    width: 50px; 
} 
.b-hdfs__files-list .b-hdfs__files-list__item-property-col-width-date { 
    width: 50px; 
}

但是，虽然如预期每一列都是平等的，他们不是50像素宽，但33px。我想知道为什么。这是fiddler具有完整的标记和样式。

来源

2015-09-05 AngularInDepth.com

因为你给的表格宽度为100％，这是根据它调整。因此删除中的width:100%;并给出width: 100px;（您的选择）col s。

来源

2015-09-05 09:22:02

这里的问题：

.b-hdfs__files-list { 
    width: 100%; 
}

尝试使用这个：

.b-hdfs__files-list { 
    width: auto; 
}

来源

2015-09-05 09:21:55

我不知道这会工作，但我认为它会：

.b-hdfs__files-list { 
    width: 100%; 
} 
.b-hdfs__files-list { 
    width: auto; 
} 
.b-hdfs__files-list .b-hdfs__files-list__item-property-col-width-selected { 
    width: 15px; 
} 
.b-hdfs__files-list .b-hdfs__files-list__item-property-col-width-type { 
    width: 15px; 
} 
.b-hdfs__files-list .b-hdfs__files-list__item-property-col-width-name { 
    width: 15px; 
} 
.b-hdfs__files-list .b-hdfs__files-list__item-property-col-width-size { 
    width: 15px; 
} 
.b-hdfs__files-list .b-hdfs__files-list__item-property-col-width-user { 
    width: 15px; 
} 
.b-hdfs__files-list .b-hdfs__files-list__item-property-col-width-group { 
    width: 15px; 
} 
.b-hdfs__files-list .b-hdfs__files-list__item-property-col-width-permissions { 
    width: 15px; 
} 
.b-hdfs__files-list .b-hdfs__files-list__item-property-col-width-date { 
    width: 15px; 
} 
.b-hdfs__files-list__header { 
    text-align: left; 
    height: 32px; 
    border-bottom: 1px solid #c7d0d9; 
} 
.b-hdfs__files-list__item { 
    line-height: 32px; 
    cursor: pointer; 
    border-bottom: 1px solid #c7d0d9; 
} 
.b-hdfs__files-list__item:hover { 
    background-color: #E8F1FB; 
} 
.b-hdfs__files-list__item-property { 
    color: #494a4c; 
} 
.b-hdfs__files-list__item-property__name { 
    font-weight: bold; 
}

DEMO

来源

2015-09-05 09:24:28

您可以添加table-layout: fixed到表

来源

2015-09-05 09:32:08 lezhni

列有不同的宽度

回答

相关问题