0
在附加的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>