水平滾動但具有固定的第一列的表格

Question

到目前爲止，如果窗口較小，如此類似，我有一個水平滾動的響應表，其格式爲jsfiddle。我現在需要的是修復第一列的功能，並且只能滾動其餘列。我所能得到的是this。第一列現在重疊在我身上，如果我能夠讓它左移，但由於某種原因我無法完成，那將是一件好事。請HELPPPPP。 :)

html 

Answer 1

檢查此代碼。我創建了一個固定列的類併爲第二個孩子填充了填充。 Demo

body { 
 
    color: white; 
 
} 
 

 
.search-table-outter { 
 
    width: auto; 
 
    max-width: 735px; 
 
    margin-left: 5em; 
 
    margin-right: auto; 
 
    padding-top: 30px; 
 
} 
 
.search-table{ 
 
    table-layout: fixed; 
 
    margin:0px auto 0px auto; 
 
    background-color: lightblue 
 
} 
 
.search-table, td, th{ 
 
    border-collapse:collapse; 
 
    border-bottom:1px solid white; 
 
    line-height: 10px; 
 
} 
 
th{ 
 
    padding:5px 10px; 
 
    font-size:15px; 
 
} 
 
td{ 
 
    padding:5px 10px; 
 
    height:35px; 
 
} 
 
.search-table-outter { overflow-x: scroll; } 
 
th, td { min-width: 100px; text-align: center; } 
 

 
.fixed { 
 
    position: absolute; 
 
    left: auto; 
 
    top: auto; 
 
    background-color: lightblue; 
 
    margin: 1px; 
 
} 
 

 
.search-table tr th:nth-child(2), .search-table tr td:nth-child(2) { 
 
    padding-left: 150px; 
 
}

<div class="container header"> 
 
<div class="search-table-outter wrapper"> 
 
    <table class="search-table inner"> 
 
    <tr> 
 
     <th class="fixed">Time</th> 
 
     <th>Icon</th> 
 
     <th>Description</th> 
 
     <th>Temp</th> 
 
     <th>Precip</th> 
 
     <th>Wind</th> 
 
    </tr> 
 
    <tr> 
 
     <td class="fixed">4:11 </td> 
 
     <td>Cloud </td> 
 
     <td>Partly Cloudy </td> 
 
     <td>86 </td> 
 
     <td>0% </td> 
 
     <td>8.38 mph </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="fixed">4:11 </td> 
 
     <td>Cloud </td> 
 
     <td>Partly Cloudy </td> 
 
     <td>86 </td> 
 
     <td>0% </td> 
 
     <td>8.38 mph </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="fixed">4:11 </td> 
 
     <td>Cloud </td> 
 
     <td>Partly Cloudy </td> 
 
     <td>86 </td> 
 
     <td>0% </td> 
 
     <td>8.38 mph </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="fixed">4:11 </td> 
 
     <td>Cloud </td> 
 
     <td>Partly Cloudy </td> 
 
     <td>86 </td> 
 
     <td>0% </td> 
 
     <td>8.38 mph </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="fixed">4:11 </td> 
 
     <td>Cloud </td> 
 
     <td>Partly Cloudy </td> 
 
     <td>86 </td> 
 
     <td>0% </td> 
 
     <td>8.38 mph </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="fixed">4:11 </td> 
 
     <td>Cloud </td> 
 
     <td>Partly Cloudy </td> 
 
     <td>86 </td> 
 
     <td>0% </td> 
 
     <td>8.38 mph </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="fixed">4:11 </td> 
 
     <td>Cloud </td> 
 
     <td>Partly Cloudy </td> 
 
     <td>86 </td> 
 
     <td>0% </td> 
 
     <td>8.38 mph </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="fixed">4:11 </td> 
 
     <td>Cloud </td> 
 
     <td>Partly Cloudy </td> 
 
     <td>86 </td> 
 
     <td>0% </td> 
 
     <td>8.38 mph </td> 
 
    </tr> 
 
    </table> 
 
</div> 
 
</div>

Answer 2

可能這是你在尋找什麼

需要填充設置爲第二個TD或日

.search-table tr th:nth-child(2), .search-table tr td:nth-child(2) { 
    padding-left: 100px; 
} 

body { 
 
    color: white; 
 
} 
 

 
.search-table-outter { 
 
    width: auto; 
 
    max-width: 735px; 
 
    margin-left: 5em; 
 
    margin-right: auto; 
 
    padding-top: 30px; 
 
} 
 
.search-table{ 
 
    table-layout: fixed; 
 
    margin:0px auto 0px auto; 
 
    background-color: lightblue 
 
} 
 
.search-table, td, th{ 
 
    border-collapse:collapse; 
 
    border-bottom:1px solid white; 
 
    line-height: 10px; 
 
} 
 
th{ 
 
    padding:5px 7px; 
 
    font-size:15px; 
 
} 
 
td{ 
 
    padding:5px 10px; 
 
    height:35px; 
 
} 
 
.search-table-outter { overflow-x: scroll; } 
 
th, td { min-width: 100px; } 
 

 
.headcol { 
 
    position: absolute; 
 
    color: black; 
 
    left: auto; 
 
    width: 5em; 
 
    top: auto; 
 
} 
 

 
.search-table tr th:nth-child(2), .search-table tr td:nth-child(2) { 
 
    padding-left: 100px; 
 
}

<div class="container header"> 
 
<div class="search-table-outter wrapper"> 
 
    <table class="search-table inner"> 
 
    <tr> 
 
     <th class="headcol">Time</th> 
 
     <th>Icon</th> 
 
     <th>Description</th> 
 
     <th>Temp</th> 
 
     <th>Precip</th> 
 
     <th>Wind</th> 
 
    </tr> 
 
    <tr> 
 
     <td class="headcol">4:11 </td> 
 
     <td>Cloud </td> 
 
     <td>Partly Cloudy </td> 
 
     <td>86 </td> 
 
     <td>0% </td> 
 
     <td>8.38 mph </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="headcol">4:11 </td> 
 
     <td>Cloud </td> 
 
     <td>Partly Cloudy </td> 
 
     <td>86 </td> 
 
     <td>0% </td> 
 
     <td>8.38 mph </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="headcol">4:11 </td> 
 
     <td>Cloud </td> 
 
     <td>Partly Cloudy </td> 
 
     <td>86 </td> 
 
     <td>0% </td> 
 
     <td>8.38 mph </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="headcol">4:11 </td> 
 
     <td>Cloud </td> 
 
     <td>Partly Cloudy </td> 
 
     <td>86 </td> 
 
     <td>0% </td> 
 
     <td>8.38 mph </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="headcol">4:11 </td> 
 
     <td>Cloud </td> 
 
     <td>Partly Cloudy </td> 
 
     <td>86 </td> 
 
     <td>0% </td> 
 
     <td>8.38 mph </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="headcol">4:11 </td> 
 
     <td>Cloud </td> 
 
     <td>Partly Cloudy </td> 
 
     <td>86 </td> 
 
     <td>0% </td> 
 
     <td>8.38 mph </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="headcol">4:11 </td> 
 
     <td>Cloud </td> 
 
     <td>Partly Cloudy </td> 
 
     <td>86 </td> 
 
     <td>0% </td> 
 
     <td>8.38 mph </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="headcol">4:11 </td> 
 
     <td>Cloud </td> 
 
     <td>Partly Cloudy </td> 
 
     <td>86 </td> 
 
     <td>0% </td> 
 
     <td>8.38 mph </td> 
 
    </tr> 
 
    </table> 
 
</div> 
 
</div>

看到小提琴https://jsfiddle.net/s8bczc0L/