CSS表格固定列在不同屏幕尺寸上的位置答案

【问题标题】：CSS table fixed column chages position on different screen sizeCSS表格固定列在不同屏幕尺寸上的位置
【发布时间】：2020-03-22 07:16:35
【问题描述】：

我正在创建一个响应式网站。

我有一个固定第一列的表格。但是，当您在具有超过 454 像素的不同宽度的设备上调整窗口或视图的大小时，固定的第一列会移出位置，并且表格主体也会移开。

如何创建一个具有固定列的响应式表格，该表格不会因不同的设备宽度而显得格格不入？

table looks OK on this screen width，这个截图： as the width increases the fixed column moves of place

.pagewrap1 {
  width: 90%;
  background-color: orange;
  margin: 0 auto;
  padding: 0 20px 0 20px;
}

div.data {
  background-color: green;
}


/*.scroll {
	overflow-x: scroll;
}*/

table.data {
  border-width: 0px;
  width: 750px;
  background-color: yellow;
}

.auto-style2 {
  border-style: solid;
  border-width: 1px;
}

.auto-style2b {
  border-style: solid;
  border-width: 1px;
  background-color: purple;
}

@media only screen and (max-width: 740px) {
  .pagewrap {
    background-color: blue;
  }
  .scroll {
    overflow-x: scroll;
    margin-left: 30px;
  }
  .auto-style2b {
    position: absolute;
    left: 30px;
    width: 25px;
  }
  table.data {
    width: 100%;
  }
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta content="en-gb" http-equiv="Content-Language" />
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <title>Untitled 1</title>
</head>
<body>
  <div class="pagewrap1">
    <div class="data">
      <div class="scroll">
        <table class="data">
          <tr>
            <th class="auto-style2b">&nbsp;</th>
            <th style="width: 195px" class="auto-style2">column a</th>
            <th style="width: 195px" class="auto-style2">column b</th>
            <th style="width: 195px" class="auto-style2">column c</th>
          </tr>
          <tr>
            <th style="height: 120px;" class="auto-style2b">c1</th>
            <td style="height: 120px; width: 195px;" class="auto-style2">
              123456789123456<br />
            </td>
            <td style="height: 120px; width: 195px;" class="auto-style2">
              123456789123456789</td>
            <td style="height: 120px; width: 195px;" class="auto-style2">
              123456789123456789123456</td>
          </tr>
          <tr>
            <th class="auto-style2b">c2</th>
            <td style="width: 195px" class="auto-style2">5855</td>
            <td style="width: 195px" class="auto-style2">&nbsp;</td>
            <td style="width: 195px" class="auto-style2">&nbsp;</td>
          </tr>
          <tr>
            <th class="auto-style2b">c3</th>
            <td style="width: 195px" class="auto-style2">&nbsp;</td>
            <td style="width: 195px" class="auto-style2">&nbsp;</td>
            <td style="width: 195px" class="auto-style2">&nbsp;</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</body>
</html>

【问题讨论】：

我尝试了你的代码，但在 454px 处发生了任何事情。
如果您在整页上运行代码，然后将窗口大小调整为小于 454 像素，表格看起来还不错，因为您增加了窗口宽度，表格开始不合适
你能发一张图片来说明这个问题吗？
我添加了截图链接

标签： css scroll overflow fixed-header-tables

【解决方案1】：

问题似乎是由于这个position: absolute 规则：

.auto-style2b {
   position: absolute; /* it causes the gap */
   left: 30px;
   width:25px;
}

删除它可以解决差距问题。

【讨论】：

但这会删除第一列的固定。第一列是固定的，表格的其余部分应该是可滚动的