Как я могу сделать левый столбец stati c, когда пользователь прокручивает влево? - PullRequest
Новая
       6

Как я могу сделать левый столбец stati c, когда пользователь прокручивает влево?

0 голосов
/ 06 мая 2020

f

Как я могу сделать левый столбец гибкого поля статическим c, когда пользователь прокручивает влево? основной div flexbox css ниже и 4 поля внутри 

.crsTable {
  width: 90%;
  display: flex;
  overflow: hidden;
  overflow-x: auto;
  height: 100vh;
  margin-top: 10px;
  flex-wrap: wrap;
  align-items: flex-start;
}

1 Ответ

1 голос
/ 06 мая 2020 

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  display: flex;
  height: 100vh;
  overflow-x: auto;
  padding-left: 10;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.sticky {
  position: sticky;
  position: -webkit-sticky;
  left: 0;
  background: #569ca8;
  color: white;
  width: 100px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Document</title>
  </head>
  <body>
    <table>
      <tr>
        <th class="sticky">Company</th>
        <th>Contact</th>
        <th>Country</th>
        <th>Company2</th>
        <th>Contact2</th>
        <th>Country2</th>
        <th>Company3</th>
        <th>Contact3</th>
        <th>Country3</th>
      </tr>
      <tr>
        <td class="sticky">Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>

        <td>Germany</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td class="sticky">Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>

        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td class="sticky">Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>

        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td class="sticky">Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>

        <td>Germany</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td class="sticky">Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>

        <td>Germany</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td class="sticky">Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>

        <td>Germany</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td class="sticky">Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>

        <td>Germany</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td class="sticky">Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>

        <td>Germany</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td class="sticky">Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>

        <td>Germany</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td class="sticky">Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>

        <td>Germany</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td class="sticky">Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>

        <td>Germany</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td class="sticky">Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>

        <td>Germany</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td class="sticky">Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>
        <td>Germany</td>

        <td>Germany</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td class="sticky">Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
    </table>
  </body>
</html>
...