How to style a table with first column horizontally and header fixed vertically

Asked

Viewed 122 times

1

I’ve had a problem for two days, and I can’t fix it. I need to create a table where the first column is fixed horizontally, but allows moving vertically, and the header is fixed vertically but allows horizontal movement. I need to do this so that the table content can be moved horizontally through a scroll horizontally and so that the header is always shown.

I have read some questions and the vast majority uses position:fixed however this does not work for me. I need to do this only with CSS and HTML, without Javascript. Is there any way to do this?

.table .thead-white th {
  color: #fff;
  background-color: #4a5b7eff;
  border-color: #4a5b7eff;
  padding: 0.1rem .75rem 0.1rem .75rem;
  cursor: pointer;
}

.table .thead-white th:hover {
  background-color: #465577ff;
  color: #fff;
}

.table .thead-cinza th {
  color: #fff;
  background-color: #52658cff;
}

.table .thead-white th i {
  padding: 0.8rem 0.5rem 0.7rem 0.5rem;
  line-height: 1.5rem;
  font-size: 1.3rem;
}

.barras {
  color: #fff !important;
  background-color: #4a5b7eff !important;
  cursor: default !important;
  padding: 1rem !important;
}

.table {
  text-align: center;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: #dadcddff !important;
}

.table td,
.table th {
  border-right: 0.5px solid #52658cff;
  border-left: 0.5px solid #52658cff;
  border-top: 0 !important;
  color: #52658cff;
  padding: 1.1rem 0 1.1rem 0;
  width: 20rem;
  min-width: 20rem;
}

.table thead th {
  border-bottom: 0 !important;
}

tbody tr th {
  color: #52658cff;
}

.container_info {
  width: 100%;
  background-color: #e6e7e8ff;
  margin: 0 !important;
  padding: 0 !important;
  margin-top: 0.2rem;
  word-wrap: break-word;
}

span {
  font-size: 16px !important;
  margin-bottom: 1rem;
}

.container_info .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.border-azul {
  border-color: #52658cff !important;
}

.badge-danger {
  color: #fff;
  background-color: #c23531ff !important;
}

.badge-success {
  color: #373435ff !important;
  background-color: #91c7aeff !important;
}

.headcol {
  position: sticky !important;
  left: 0 !important;
  background-color: #dadcddff;
  z-index: 99 !important;
  border-right: 0.5px solid #52658cff !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-principal">
  <div class="table">
    <table class="table table-striped">
      <thead class="thead-white">
        <tr id="fixo1">
          <th scope="col" class="barras headcol">Cód. Barras</th>
          <th id="btn_cod_barras" scope="col"><i class="fas fa-barcode-read"></i></th>
          <th scope="col"><i class="fas fa-barcode-read"></i></th>
          <th scope="col"><i class="fas fa-barcode-read"></i></th>
          <th scope="col"><i class="fas fa-barcode-read"></i></th>
          <th scope="col"><i class="fas fa-barcode-read"></i></th>
          <th scope="col"><i class="fas fa-barcode-read"></i></th>
          <th scope="col"><i class="fas fa-barcode-read"></i></th>
          <th scope="col"><i class="fas fa-barcode-read"></i></th>
          <th scope="col"><i class="fas fa-barcode-read"></i></th>
          <th scope="col"><i class="fas fa-barcode-read"></i></th>
          <th scope="col"><i class="fas fa-barcode-read"></i></th>
          <th scope="col"><i class="fas fa-barcode-read"></i></th>
          <th scope="col"><i class="fas fa-barcode-read"></i></th>
          <th scope="col"><i class="fas fa-barcode-read"></i></th>
          <th scope="col"><i class="fas fa-barcode-read"></i></th>
        </tr>
      </thead>
      <thead class="thead-cinza">
        <tr id="fixo2">
          <th class="headcol" scope="col">Grupo Comercial</th>
          <th scope="col">Cliente 1</th>
          <th scope="col">Cliente 2</th>
          <th scope="col">Cliente 3</th>
          <th scope="col">Cliente 4</th>
          <th scope="col">Cliente 5</th>
          <th scope="col">Cliente 6</th>
          <th scope="col">Cliente 7</th>
          <th scope="col">Cliente 8</th>
          <th scope="col">Cliente 9</th>
          <th scope="col">Cliente 10</th>
          <th scope="col">Cliente 11</th>
          <th scope="col">Cliente 12</th>
          <th scope="col">Cliente 13</th>
          <th scope="col">Cliente 14</th>
          <th scope="col">Cliente 15</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th id="drops" class="headcol" scope="row">Drops</th>

          <td>
            <span class="badge badge-warning">66%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 3,79</p>
                </div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6"></div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 3</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 4,99</p>
                </div>
              </div>
            </div>
          </td>

          <td>
            <span class="badge badge-success">100%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 3,79</p>
                </div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 3,79</p>
                </div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 3</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 4,99</p>
                </div>
              </div>
            </div>
          </td>

          <td>
            <span class="badge badge-danger">0%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6"></div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6"></div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 3</p>
                </div>
                <div class="col-6"></div>
              </div>
            </div>
          </td>

          <td>
            <span class="badge badge-danger">0%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6"></div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6"></div>
              </div>

            </div>
          </td>

          <td>
            <span class="badge badge-warning">50%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 3,79</p>
                </div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6"></div>
              </div>

            </div>
          </td>
          <td>
            <span class="badge badge-warning">66%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 3,79</p>
                </div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6"></div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 3</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 4,99</p>
                </div>
              </div>
            </div>
          </td>
          <td>
            <span class="badge badge-danger">0%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6"></div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6"></div>
              </div>

            </div>
          </td>
          <td>
            <span class="badge badge-danger">0%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6"></div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6"></div>
              </div>

            </div>
          </td>
          <td>
            <span class="badge badge-warning">66%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 3,79</p>
                </div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6"></div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 3</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 4,99</p>
                </div>
              </div>
            </div>
          </td>
          <td>
            <span class="badge badge-warning">66%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 3,79</p>
                </div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6"></div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 3</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 4,99</p>
                </div>
              </div>
            </div>
          </td>
          <td>
            <span class="badge badge-warning">66%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 3,79</p>
                </div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6"></div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 3</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 4,99</p>
                </div>
              </div>
            </div>
          </td>
          <td>
            <span class="badge badge-warning">66%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 3,79</p>
                </div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6"></div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 3</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 4,99</p>
                </div>
              </div>
            </div>
          </td>
          <td>
            <span class="badge badge-danger">0%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6"></div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6"></div>
              </div>

            </div>
          </td>
          <td>
            <span class="badge badge-danger">0%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6"></div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6"></div>
              </div>

            </div>
          </td>
          <td>
            <span class="badge badge-danger">0%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6"></div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6"></div>
              </div>

            </div>
          </td>

        </tr>

      </tbody>
    </table>
  </div>


</div>

html css table

  • My question is different. The author of this question just wanted to fix the first row, I need to fix the first column and the entire header. I can do one or the other, but never both at the same time.

  • 1

    That answered the question https://answall.com/questions/395577/position-sticky-joinedcom-overflow/

  • 1

    That worked for me. Thank you!

  • Matheus if he helped you Curte there :)

No answers

Browser other questions tagged html css table

You are not signed in. Login or sign up in order to post.