CSS table fixed column chages position on different screen size

Question

I am creating a responsive website.

I have a table with a fixed first column. But as you resize the window or view on a device with different width of more than 454 pixels the fixed first column moves out of place and the table body also moves away.

How can I create a responsive table with a fixed column that doesn't go out of place with different device width?

table looks OK on this screen width, this screenshot: 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>

If you run the code on full-page then resize the window to less than 454px the table looks OK, as you increase the window width the table starts to go out of place — Kash, Mar 21 '20 at 21:53

score 0 · Answer 1 · answered Mar 21 '20 at 23:16

0

It seems the issue is due to this position: absolute rule:

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

Removing it fix the problem the gap problem.

answered Mar 21 '20 at 23:16

Pine Code

2,466
3
18
43

But this removes the first column from being fixed. The first column is fixed, and rest of the table should be scrollable – Kash Mar 22 '20 at 00:58

CSS table fixed column chages position on different screen size

1 Answers1