列有不同的寬度

我對列下面的標記：列有不同的寬度

<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

列有不同的寬度

回答

相關問題