webentwicklung-frage-antwort-db.com.de

Erste Zeile und erste Spalte der Tabelle einfrieren

Ich versuche, die erste Zeile und die erste Spalte einer Tabelle einzufrieren/zu sperren.

Ich habe versucht, den Code position: absolute; oder position: fixed; zu geben, aber es sieht komisch aus.

Ich bin einigen Antworten gefolgt, aber ich bin immer noch verwirrt, wie ich es machen kann.

Mein HTML/CSS-Code:

th {    
   font-size: 80%;
   text-align: center;
}
td {
   font-size : 65%;
   white-space: pre;
   text-align: center;
}
.inner {
   overflow-x: scroll;
   overflow-y: scroll;
   width: 300px;
   height: 100px;
}
input {
   font-size : 65%;
}
<body>
  <div class="inner">
    <form method="POST" action="dashboard">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>ID</th>
            <th>Tanggal</th>
            <th>Judul Pekerjaan</th>
            <th>Deskripsi</th>
            <th>Level</th>
            <th>Category</th>
            <th>Severity</th>
          </tr>
        </thead>
    </form>
        <tbody>
          <tr>
            <td>1</td>
            <td>1 May 2017</td>
            <td>Satu</td>
            <td>Satu</td>
          </tr>
          <tr>
            <td>2</td>
            <td>2 May 2017</td>
            <td>Dua</td>
            <td>Dua</td>
          </tr>
          <tr>
            <td>3</td>
            <td>3 May 2017</td>
            <td>Tiga</td>
            <td>Tiga</td>
          </tr>
          <tr>
            <td>3</td>
            <td>3 May 2017</td>
            <td>Tiga</td>
            <td>Tiga</td>
          </tr>
        </tbody>
      </table>
  </div>
</body>

Erste Zeile einfrieren

Das Einfrieren nur der ersten Zeile ist einfach und kann mit CSS durchgeführt werden, indem der Tabellenkörper auf overflow: auto festgelegt wird und den Tabellenzellen eine feste Breite zugewiesen wird.

table thead tr {
    display: block;
}
table th, table td {
    width: 80px;
}
table tbody {
    display: block;
    height: 90px;
    overflow: auto;
}
th {
    text-align: center;
}
td {
    text-align: center;
    white-space: pre;
}
<table class="table table-bordered">
  <thead>
    <tr>
      <th>ID</th>
      <th>Tanggal</th>
      <th>Judul Pekerjaan</th>
      <th>Deskripsi</th>
      <th>Level</th>
      <th>Category</th>
      <th>Severity</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>1 May 2017</td>
      <td>Satu</td>
      <td>Satu</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2 May 2017</td>
      <td>Dua</td>
      <td>Dua</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3 May 2017</td>
      <td>Tiga</td>
      <td>Tiga</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3 May 2017</td>
      <td>Tiga</td>
      <td>Tiga</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2 May 2017</td>
      <td>Dua</td>
      <td>Dua</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3 May 2017</td>
      <td>Tiga</td>
      <td>Tiga</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3 May 2017</td>
      <td>Tiga</td>
      <td>Tiga</td>
    </tr>
  </tbody>
</table>

Erste Zeile und erste Spalte einfrieren

Um dieses Verhalten für die erste Zeile und die erste Spalte zu erhalten, müssen Sie jedoch die erste Zeile, die erste Spalte und die erste Zelle von der Tabelle trennen und dann die Position dieser Elemente basierend auf der Bildlaufposition des Tabellenkörpers kontinuierlich festlegen bei einem Scroll-Ereignis.

$(document).ready(function() {
  $('tbody').scroll(function(e) { 
    $('thead').css("left", -$("tbody").scrollLeft());
    $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()-5); 
    $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()-5); 
  });
});
body {
  margin: 0;
}
th, td {
    text-align: center;
    background-color: white
}
table {
  position: relative;
  width: 400px;
  overflow: hidden;
}
thead {
  position: relative;
  display: block;
  width: 400px;
  overflow: visible;
}
thead th {
  min-width: 80px;
  height: 40px;
}
thead th:nth-child(1) {
  position: relative;
  display: block;
  height: 40px;
  padding-top: 20px;
}
tbody {
  position: relative;
  display: block;
  width: 400px;
  height: 90px;
  overflow: scroll;
}
tbody td {
  min-width: 80px;
}
tbody tr td:nth-child(1) {
  position: relative;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
  <thead>
    <tr>
      <th>ID</th>
      <th>Tanggal</th>
      <th>Judul Pekerjaan</th>
      <th>Deskripsi</th>
      <th>Level</th>
      <th>Category</th>
      <th>Severity</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>1 May 2017</td>
      <td>Satu</td>
      <td>Satu</td>
      <td>5</td>
      <td>Lorem</td>
      <td>Ipsum</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2 May 2017</td>
      <td>Dua</td>
      <td>Dua</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3 May 2017</td>
      <td>Tiga</td>
      <td>Tiga</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3 May 2017</td>
      <td>Tiga</td>
      <td>Tiga</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2 May 2017</td>
      <td>Dua</td>
      <td>Dua</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3 May 2017</td>
      <td>Tiga</td>
      <td>Tiga</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3 May 2017</td>
      <td>Tiga</td>
      <td>Tiga</td>
    </tr>
  </tbody>
</table>

7
Chava G

Wie löse ich das Ausrichtungsproblem zwischen Kopf und Körper? Schauen Sie sich das folgende Bild an:

enter image description here

Und das modifizierte CSS ist hier: Th, td { / text-align: center; / Hintergrundfarbe: weiß }

    table {
        position: relative;
        width: 600px;
        overflow: hidden;
    }
    thead {
        position: relative;
        display: block;
        width: 400px;
        overflow: visible;
    }
    thead th {
        min-width: 80px;
        height: 40px;
    }
    thead th:nth-child(1) {
        position: relative;
        display: block;
        height: 40px;
        /*padding-top: 20px;*/
    }
    tbody {
        position: relative;
        display: block;
        width: 700px;
        /*height: 90px;
        overflow: scroll;*/
        overflow-y: auto;
    }
    tbody td {
        min-width: 80px;
    }
    tbody tr td:nth-child(1) {
        position: relative;
        display: block;
        background-color: gray;
    }
0
Bruce

Ich habe diese Frage gestern mit meinem Kollegen zusammen aus mir herausgesucht. Das angepasste CSS ist:

.pcvBody {
  overflow-x: auto;
  width: calc(100vw - 110px);

}
/* CSS START for freezing table column*/
#prodTable {
  position: relative;
  overflow: hidden;
}
#prodTable thead {
  position: relative;
  display: block;
  overflow: visible;
}
#prodTable thead th {
  min-width: 150px;
  width: 1000px;
}
#prodTable thead th:nth-child(1), #prodTable thead th:nth-child(2) {
  position: relative;
  /*display: block;*/
  max-width: 150px;
  width: 50px;
  border-left: 1px solid #ededed;
}
#prodTable tbody {
  position: relative;
  display: block;

}
#prodTable tbody td {
  min-width: 150px;
  width: 1000px;
}
#prodTable tbody input {
  max-width: 120px;
}
#prodTable tbody tr td:nth-child(1), #prodTable tbody tr td:nth-child(2) {
  position: relative;
  /*display: block;*/
  background-color: white;
  min-height: 20px;
  max-width: 150px;
  width: 50px;
  border-left: 1px solid #ededed;
}
/* CSS END for freezing table column*/

Das angepasste Bildlaufereignis lautet:

$('#pcvBody').scroll(function(e) {
  var scrollLeft = $("#pcvBody").scrollLeft();
  //$('#prodTable thead').css("left", -tbodyScrollLeft);
  //$('#prodTable thead th:nth-child(1)').css("left", tbodyScrollLeft - 5); 
  //$('#prodTable tbody td:nth-child(1)').css("left", tbodyScrollLeft - 5); 
  $('#prodTable thead th:nth-child(1)').css("left", scrollLeft); 
  $('#prodTable tbody td:nth-child(1)').css("left", scrollLeft); 
  $('#prodTable thead th:nth-child(2)').css("left", scrollLeft);
  $('#prodTable tbody td:nth-child(2)').css("left", scrollLeft);
});

Außerdem habe ich ein 'div' hinzugefügt, um die Tabelle zu umschließen.

0
Bruce