第一列冻结且另一列可滚动的表

Question

In the attached html file, I want the first column to be frozen whereas the other columns to be scrollable for responsive page. I initially tried to position the first column as absolute and then arrange the rest of the columns according to it. But it doesn't seem to work out. Please help me out. I have attached all of my html and the styles that I tried to use.

 @media screen and (min-width:800px) { div.tech-spec h2 p { font-family: open-sans; } div.tech-spec #responsivetable { border-spacing: 10px; border-collapse: collapse; border-color: #aaaaaa; } div.tech-spec #responsivetable td { min-width: 100px; max-width: 200px; min-height: inherit; align-content: flex-start; border-collapse: collapse; column-width: inherit; border-bottom: 1px solid #aaaaaa; padding: 5px 15px; } div.tech-spec #responsivetable td:nth-child(1) { border-right: 1px solid #aaaaaa; width: 300px; } div.tech-spec #responsivetable tr:nth-child(1) td { font-size: 14px; font-weight: bold; } div.tech-spec #responsivetable td:nth-child(1) div{ float: right; width: 200px; } div.tech-spec #responsivetable td:nth-child(1) div p,h4{ margin-top: 0px; } div.tech-spec #responsivetable td:nth-child(1) img{ float: left; margin-left: -5px; width: 80px; } div.tech-spec #responsivetable td p { float: left; padding-right: 20px; } div.tech-spec #responsivetable tr td a { text-decoration: none; color: skyblue; } } @media screen and (max-width:800px) { h2 p { font-family: open-sans; } div.tech-spec #responsivetable { border-collapse: collapse; font-size: 13px; } div.tech-spec #responsivetable td { width: 100px; align-content: flex-start; border-bottom: 1px solid #aaaaaa; padding: 8px 8px; margin: 0; border-top-width: 0px; } div.tech-spec { font-family: open-sans; overflow-x: scroll; overflow-y: visible; width: 400px; margin-left: 5em; } div.tech-spec #responsivetable td:nth-child(1) img { height: 0px; width: 0px; margin: 0; padding: 0px 0px; visibility: collapse; } div.tech-spec #responsivetable td:nth-child(1) { border-right: 1px solid #aaaaaa; width: 145px; position: absolute; left: 0; white-space: normal; } div.tech-spec #responsivetable tr:nth-child(1) td { font-size: 14px; font-weight: bold; } div.tech-spec #responsivetable td p { float: left; } div.tech-spec #responsivetable tr td a { text-decoration: none; color: skyblue; } } 

 <h2>Harvey balls</h2> <p>Harvey balls</p> <div class="tech-spec"> <table id="responsivetable"> <tr> <td></td> <td>Weight</td> <td>Screen Sizes</td> <td>Processor</td> <td>Battery</td> <td>Usage</td> </tr> <tr> <td> <div><h4>3000 Series</h4> <br><p>Starting at price shouldn't be hardcoded</p></div> </td> <td> 4 - 4.5 lbs </td> <td> 14" - 15" </td> <td>Up to Intel i5</td> <td>Up to 27.5 hours with Dell Power Companion</td> <td>Everyday performance for small &amp; growing businesses</td> </tr> <tr> <td><div>5000 Series <br>Starting at price shouldn't be hardcoded</div> </td> <td>1.6 - 4.7 lbs</td> <td>11" - 15"</td> <td>Up to Intel i7 (quad-core)</td> <td>Up to 26.5 hours with Dell Power Companion</td> <td>Fully-featured business-class laptops and 2-in-1s</td> </tr> <tr> <td> <div><a href="http://www.dell.com/">7000 Series</a> <br>starting at</div> </td> <td>1.6 - 4.7 lbs</td> <td>11" - 15"</td> <td>Up to Intel i7 (quad-core)</td> <td>Up to 26.5 hours with Dell Power Companion</td> <td>Premium business-class laptops for elite mobile productivity</td> </tr> <tr> <td> <div><a href="http://www.google.com/">Educational Series<br>Text Wrapping</a> <br>Starting at</div> </td> <td>3 - 4 lbs</td> <td>11" - 13"</td> <td>Up to Intel i5</td> <td>All the time you need</td> <td>Purpose-built for K-12 student computing programs</td> </tr> <tr> <td> <div><a href="http://www.dell.com/">Rugged Series</a> <br>Starting at price</div> </td> <td>3.57 - 8 lbs</td> <td>12" - 14"</td> <td>Up to Intel i3</td> <td>Up to 14 hours</td> <td>Delivers reliable performance in the harshest of environments</td> </tr> </table> </div> 

Answer 1

The easiest way is to make your first column the separate table.

Or you can nest your scrollable table in one table cell.

<table>
  <tr>
    <td>Static headind</td>
    <td rowspan="n">
       <div style="overflow-x: scroll">
           <table class="scrollable-table">
               ...
           </table>
       </div>
    </td>
  </tr>
  ...
  <tr>
    <td>Static headind</td>
  </tr>
</table>

Hope you've got the concept.