如何使第一列统计，而其他列仅在移动屏幕上水平滚动？

问题描述 投票：0回答：1

如何才能达到预期的结果，使第一列

Produto
保持静态，而用户可以滚动浏览其他列并填写移动屏幕上的空白？

  body {
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
}

table {
  margin-top: 10px;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
  min-width: 600px;
}

label {
  font-weight: bold;
}

th,
td {
  text-align: center;
}

th:first-child,
td:first-child {
  width: 15%;
  text-align: left;
  font-weight: bold;
}

.price {
  width: 70%;
  text-align: center;
}

#dateInput,
.price,
.header_inputs {
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 4px;
}

input::placeholder {
  color: white;
  /* Change this to your desired color */
}


/* Add this to your existing CSS styles */


/* Use media query to target mobile devices */

@media (max-width: 768px) {
  .table-container {
    overflow-x: auto;
  }
  th.static-column,
  td.static-column {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: white;
  }
  th.static-column {
    border-right: 1px solid #ddd;
  }
  th:not(.static-column) {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 2;
  }
  th:not(.static-column):first-child {
    left: 0;
    border-right: 1px solid #ddd;
  }
  td:not(.static-column):first-child {
    position: sticky;
    left: 0;
    background-color: white;
    z-index: 1;
    border-right: 1px solid #ddd;
  }
  .table-container::-webkit-scrollbar {
    display: none;
  }
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <?!= include('form_css') ?>
    <?!= include('form_js') ?>

</head>

<body>
  <h2>Pesquisa de Preços</h2>
  <div>
    <label for="dateInput">Data</label>
    <input type="date" id="dateInput">

    <label for="posto">Posto do Grupo</label>
    <select id="posto" class="header_inputs">
      <option></option>
      <option>Posto I</option>
      <option>Posto II</option>
      <option>Posto III</option>
      <option>Posto IV</option>
    </select>
    <label for="posto">Nome do Posto</label>
    <select id="nome_posto" class="header_inputs">
      <option></option>
      <option>Catatau Progresso</option>
      <option>Pitanga</option>
      <option>Ibiapaba</option>
    </select>
    <label for="bandeira">Bandeira</label>
    <select id="bandeira" class="header_inputs">
      <option></option>
      <option>Shell</option>
      <option>Ipiranga</option>
      <option>Petrobrás</option>
    </select>

  </div>
  <div class="table-container">
    <table id="table_grupo">
      <tr>
        <th class="static-column">Produto</th>
        <th>Compra-Teresina</th>
        <th>Compra-Fortaleza</th>
        <th>Venda à Vista</th>
        <th>Venda a Prazo</th>
      </tr>
      <tr>
        <td>Gas. Comum</td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
      </tr>
      <tr>
        <td>Gas. Aditivada</td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
      </tr>
      <tr>
        <td>Etanol</td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
      </tr>
      <tr>
        <td>S-500</td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
      </tr>
      <tr>
        <td>S-10</td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
      </tr>
      <tr>
        <td>S-10 Aditivado</td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
      </tr>
    </table>
    <h2>Preço da Concorrência</h2>
    <table id="table_competition">
      <tr>
        <th class="static-column">Produto</th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
      </tr>
      <tr>
        <td>Gas. Comum</td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
      </tr>
      <tr>
        <td>Gas. Aditivada</td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
      </tr>
      <tr>
        <td>Etanol</td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
      </tr>
      <tr>
        <td>S-500</td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
      </tr>
      <tr>
        <td>S-10</td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
      </tr>
      <tr>
        <td>S-10 Aditivado</td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
        <td>
          <input type="text" inputmode="decimal" placeholder="R$ 0,00" class="price" onkeyup="formatCurrency(this)">
        </td>
      </tr>
    </table>
  </div>

</body>
</html>

谢谢。

html css responsive-design
1个回答
0
投票

如果我理解正确，问题是当您水平滚动时，第一列中的所有单元格都保持静态，如您所愿，除了消失的

Produto
之外。

这是由于以下设置造成的：

@media (max-width: 768px) th:not(.static-column) {
    position: sticky;

如果我去掉那张贴纸，它似乎会做我认为你想要的事情。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.