在附加的html文件中，我想要冻结第一列，而其他列可以滚动以获取响应页面。我最初尝试将第一列定位为绝对列，然后根据它排列其余列。但它似乎没有成功。请帮帮我。我附上了我尝试使用的所有html和样式。
@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 & 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>
答案 0 :(得分：1)
最简单的方法是将第一列作为单独的表格。
或者您可以将可滚动表嵌套在一个表格单元格中。
<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>
希望你有这个概念。