水平滚动但具有固定的第一列的表格

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/