水平にスクロールされているが、最初のカラムが固定されているテーブル

Question

これまでのように、ウィンドウがこのように小さい場合、私は応答テーブルを水平にスクロールします。jsfiddle。私が今必要とするのは、最初の列を修正し、残りの列のみをスクロールする機能です。私が得ることができるのはthisです。最初の柱は今私のために重なっていて、それを左にシフトさせることができればよいだろうが、何らかの理由でできない。どうぞよろしくお願いします。 :)

html 

Answer 1

このコードを確認してください。私は固定列のクラスを作成し、2番目の子供のためのパディングを与えました。 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/を見ます