1
我創建了以下網格: https://codepen.io/anon/pen/mBwqQP子容器相同的寬度父
問題是,與數據的行僅至於屏幕的寬度跨越。
此外,如果您檢查標題行,它顯示實際行不是容器的寬度。
是否有可能使它們的寬度與它們所在的容器相同?
.schedule-grid {
width: 100%;
}
.schedule-grid .rows {
width: calc(100% - 150px);
overflow: auto;
white-space: nowrap;
margin-left: 150px;
}
.schedule-grid .rows .header-row {
margin: 0;
height: auto;
}
.schedule-grid .rows .header-row>div {
width: 250px;
display: inline-block;
white-space: normal;
}
.schedule-grid .rows .fixed {
width: 150px !important;
position: absolute;
left: 0px;
}
.schedule-grid .rows .row {
margin: 0;
background-color: red;
}
.schedule-grid .rows .row>div {
font-size: 12px;
padding: 5px;
height: 25px;
background-color: red;
}
<div class="schedule-grid">
<div class="rows">
<div class="header-row">
<div class="fixed">Name/Date</div>
<div>
Fr 1 Sep
</div>
<div>
Sa 2 Sep
</div>
<div>
Su 3 Sep
</div>
<div>
Mo 4 Sep
</div>
<div>
Tu 5 Sep
</div>
<div>
We 6 Sep
</div>
<div>
Th 7 Sep
</div>
<div>
Fr 8 Sep
</div>
<div>
Sa 9 Sep
</div>
<div>
Su 10 Sep
</div>
</div>
<div class="row">
<div class="fixed ">
Name
</div>
<div>
Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123
</div>
</div>
</div>
</div>
感謝的作品!有趣的是,現在'.row'元素也佔據了整個寬度。 – YesMan85