Search code examples
htmlcssresponsive-design

How can I make the first column statis while the other are horizontally scrollable only if on a mobile screen?

How can I achieve the desired result, so that the first column Produto stays static, while the user can scroll through the other columns and fill out the blanks on a mobile screen?

  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>

Solution

  • If I'm understanding you correctly, the problem is that when you scroll horizontally, all of the cells in the first first column remain static, as you want, except Produto, which disappears.

    That is due to the following setting:

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

    If I remove that sticky, it seems to do what I think you want.