So stellen Sie die Körperhöhe mit der Überlaufrolle ein

113

Ich habe Probleme beim Einstellen der Überlaufrolle für Körperhöhe und Breite. 

<style> 
     tbody{
       height:50px;display:block;overflow:scroll
     }
   </style>

       <h3>Table B</h3>
    <table style="border: 1px solid red;width:300px;display:block">
        <thead>
            <tr>
                <td>Name</td>
                <td>phone</td>
            </tr>
        </thead>
        <tbody style='height:50px;display:block;overflow:scroll'>
            <tr>
                <td>AAAA</td>
                <td>323232</td>
            </tr>
            <tr>
                <td>BBBBB</td>
                <td>323232</td>
            </tr>
            <tr>
                <td>CCCCC</td>
                <td>3435656</td>
            </tr>
        </tbody>
    </table>

Besuchen Sie meine Geige hier

Ich möchte Tabelle B wie Tabelle A mit Überlaufrolle.

Jede Hilfe wird geschätzt.

Vielen Dank, M.

html css Einzelgänger
quelle
Kann nicht verstehen. Sie möchten Tabelle B wie Tabelle A mit Überlauf-Bildlauf, aber Tabelle A hat keinen Überlauf, Tabelle B hat.
Alex Char
Alek: Wenn ich die Höhe des Körpers mit Überlaufschriftrolle und Anzeigeblock einstelle, wird das Design chaotisch.
Maverick
Die Ausrichtung sollte wie in Tabelle A sein.
Maverick

Antworten:

221

Wenn Sie tbodyeine Schriftrolle anzeigen möchten , verwandeln Sie sie in eineblock .

Um das Verhalten von beizubehalten table, verwandeln Sie sich trintable .

Um die Zellen gleichmäßig zu besprühen, verwenden Sie table-layout:fixed;

DEMO tbody scroll

CSS für Ihren HTML-Test:

table ,tr td{
    border:1px solid red
}
tbody {
    display:block;
    height:50px;
    overflow:auto;
}
thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
    width:400px;
}

Wenn tbodykeine Schriftrolle angezeigt wird, weil der Inhalt kleiner als heightoder ist max-height, stellen Sie die Schriftrolle jederzeit ein mit : overflow-y:scroll;. DEMO 2

G-Cyrillus
quelle
1
GCyrillus: Sie sind am nächsten. Aber es gibt ein Problem. Tischbreite ging zu hoch. Können wir die Tischbreite festlegen?
Maverick
1
Entschuldigung, ich habe kein Beispiel. Wenn wir über von Ihnen bereitgestellten Code sprechen, bedeutet dies, dass die im obigen Code definierte Breite nicht verwendet wird: table {width: 400px; }
Maverick
1
Vielen Dank @GCyrillus es funktioniert super! Darf ich einen Tipp vorschlagen? Ersetzen overflow:autodurch overflow-y: scroll, um zu vermeiden, dass Überschriften 1em links bleiben, auch wenn der Körper keine Bildlaufleiste benötigt.
Bludwarf
3
Schließlich! Ich kann jetzt eine feste Höhe, einen Bildlauftabellenkörper, feste Überschriften und einstellbare Spaltenbreiten haben ... alles ohne Javascript! Danke dir!!
Matt Hancock
4
WARNUNG: Diese Lösung trennt die Gitter von Kopf und Körperzellen. Dies bedeutet, dass Sie in den meisten praktischen Fällen nicht die Zellenausrichtung haben, die Sie von Tabellen erwarten. Beachten Sie, dass diese Lösung einen Hack verwendet, um sie irgendwie ausgerichtet zu halten: thead {width: calc (100% - 1em)}
Ciabaros
52

Es ist eine einfache Möglichkeit, die Bildlaufleiste zum Tabellenkörper zu verwenden

/* It is simple way to use scroll bar to table body*/

table.tableBodyScroll tbody {
  display: block;
  max-height: 300px;
  overflow-y: scroll;
}

table.tableBodyScroll thead, table.tableBodyScroll tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
<table class="tableBodyScroll">
  <thead>
    <th>Invoice Number</th>
    <th>Purchaser</th>
    <th>Invoice Amount</th>
    <th>Invoice Date</th>
  </thead>
  <tbody>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
  </tbody>
</table>
Erweitern Sie das Snippet

Dinesh Vaitage
quelle
20
Weit davon entfernt, perfekt zu sein, werden alle Spalten auf die gleiche Breite
gezwungen
Gibt es eine Möglichkeit, dies zu tun, ohne die Körpergröße einzustellen?
Shinzou
1
Ich werde daran arbeiten ... aber wenn wir keine Höhe verwendet haben, werden alle Datensätze gleichzeitig angezeigt, und es wird keine vertikale Bildlaufleiste angezeigt. danke @shinzou
Dinesh Vaitage
@stackers Sie können Spaltenbreiten festlegen, indem Sie width: 100pxnach td, thinnen hinzufügentbody, thead
Dariusz Sikorski
Ich habe ein Problem mit dieser Methode. Wenn ich display: block für den Tisch setze, wird es durcheinander. Aber ich konnte die Bildlaufansicht nicht erhalten, ohne display: block zu setzen. Irgendeine Lösung dafür?
Ahamed Safnaj
26

Ein anderer Ansatz besteht darin, Ihre Tabelle in ein scrollbares Element zu wickeln und die Kopfzellen so einzustellen, dass sie oben bleiben.

Der Vorteil dieses Ansatzes besteht darin, dass Sie die Anzeige auf tbody nicht ändern müssen und es dem Browser überlassen können, die Spaltenbreite zu berechnen, während die Kopfzellenbreiten mit den Spaltenbreiten der Datenzellen übereinstimmen.

/* Set a fixed scrollable wrapper */
.tableWrap {
  height: 200px;
  border: 2px solid black;
  overflow: auto;
}
/* Set header to stick to the top of the container. */
thead tr th {
  position: sticky;
  top: 0;
}

/* If we use border,
we must use table-collapse to avoid
a slight movement of the header row */
table {
 border-collapse: collapse;
}

/* Because we must set sticky on th,
 we have to apply background styles here
 rather than on thead */
th {
  padding: 16px;
  padding-left: 15px;
  border-left: 1px dotted rgba(200, 209, 224, 0.6);
  border-bottom: 1px solid #e8e8e8;
  background: #ffc491;
  text-align: left;
  /* With border-collapse, we must use box-shadow or psuedo elements
  for the header borders */
  box-shadow: 0px 0px 0 2px #e8e8e8;
}

/* Basic Demo styling */
table {
  width: 100%;
  font-family: sans-serif;
}
table td {
  padding: 16px;
}
tbody tr {
  border-bottom: 2px solid #e8e8e8;
}
thead {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}
tbody tr:hover {
  background: #e6f7ff;
}
<div class="tableWrap">
  <table>
    <thead>
      <tr>
        <th><span>Month</span></th>
        <th>
          <span>Event</span>
        </th>
        <th><span>Action</span></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>January</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>February. An extra long string.</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>March</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>April</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>May</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>June</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>July</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>August</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>September</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>October</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>November</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>December</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
    </tbody>
  </table>
</div>
Erweitern Sie das Snippet

brandonkal
quelle
7
Großartige Idee! Das Tabellenlayout wird nicht wie bei den anderen Optionen durcheinander gebracht.
André
2
Erinnern Sie alle anderen daran, dass Sie sicherstellen müssen, dass keine Vorfahrenelemente einen Überlauf verwenden. Könnte Position verursachen: klebrig nicht funktionieren stackoverflow.com/questions/43707076/…
cboston
Ein weiteres cooles Aspekt dieser Lösung ist , dass es funktioniert mitheight: 100%
Pier-Luc Gendreau
Dies ist bei weitem die beste Option. Vielen Dank!
JCBP
1
IE unterstützt Position nicht: sticky
ariel_556
11

Standardmäßig overflowgilt dies nicht für Tabellengruppenelemente, es sei denn, Sie geben ein display:blockan, <tbody> und Sie müssen ein position:relativeund display: blockan geben <thead>. Überprüfen Sie die DEMO .

.fixed {
  width:350px;
  table-layout: fixed;
  border-collapse: collapse;
}
.fixed th {
  text-decoration: underline;
}
.fixed th,
.fixed td {
  padding: 5px;
  text-align: left;
  min-width: 200px;
}


.fixed thead {
  background-color: red;
  color: #fdfdfd;
}
.fixed thead tr {
  display: block;
  position: relative;
}
.fixed tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 100px;
  overflow-y: scroll;
    overflow-x: hidden;
}
Kheema Pandey
quelle
1
Gibt es eine Möglichkeit, dies zu tun, ohne die Körpergröße einzustellen?
Shinzou
2
funktioniert nicht vollständig. Wenn der Spaltenname breiter als der Spalteninhalt ist, wird er falsch ausgerichtet.
Cristiano Maia
6

Einfachste aller Lösungen:

Fügen Sie den folgenden Code in CSS hinzu:

.tableClassName tbody {
  display: block;
  max-height: 200px;
  overflow-y: scroll;
}

.tableClassName thead, .tableClassName tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.tableClassName thead {
  width: calc( 100% - 1.1em );
}

1.1 em ist die durchschnittliche Breite der Bildlaufleiste. Bitte ändern Sie diese bei Bedarf.

Gil Baggio
quelle
1
Die Syntax der 2. Regel ist falsch, da am Ende ALLE tbody trElemente auf der Seite ausgewählt werden. Ändern Sie zu:.tableClassName thead, .tableClassName tbody tr {...}
Aaron Hudon
2

Ändern Sie Ihren zweiten Tabellencode wie unten.

<table style="border: 1px solid red;width:300px;display:block;">
<thead>
    <tr>
        <td width=150>Name</td>
        <td width=150>phone</td>
    </tr>
</thead>
<tbody style='height:50px;overflow:auto;display:block;width:317px;'>
    <tr>
        <td width=150>AAAA</td>
        <td width=150>323232</td>
    </tr>
    <tr>
        <td>BBBBB</td>
        <td>323232</td>
    </tr>
    <tr>
        <td>CCCCC</td>
        <td>3435656</td>
    </tr>
</tbody>
</table>

JSFIDDLE DEMO

Suresh Ponnukalai
quelle
Gibt es eine Möglichkeit, dies zu tun, ohne die Körpergröße einzustellen?
Shinzou
2

In meinem Fall wollte ich eine reaktionsschnelle Tabellenhöhe anstelle einer festen Höhe in Pixel haben, wie die anderen Antworten zeigen. Dazu habe ich den Prozentsatz der sichtbaren Höheneigenschaft und den Überlauf für div verwendet, der die Tabelle enthält:

&__table-container {
  height: 70vh;
  overflow: scroll;
}

Auf diese Weise wird die Tabelle zusammen mit der Fenstergröße erweitert.

Kazuar
quelle
1

Basierend auf dieser Antwort ist hier eine minimale Lösung, wenn Sie Bootstrap bereits verwenden:

div.scrollable-table-wrapper {
  height: 500px;
  overflow: auto;

  thead tr th {
    position: sticky;
    top: 0;
  }
}
<div class="scrollable-table-wrapper">
  <table class="table">
    <thead>...</thead>
    <tbody>...</tbody>
  </table>
</div>

Getestet auf Bootstrap v3

ErJab
quelle
0

Ich denke, was Sie versuchen, ist, den Header fest zu halten und den Body-Inhalt zu scrollen. Sie können den Inhalt in zwei Richtungen scrollen:

  • horizontal: Sie können den Inhalt nur horizontal scrollen, wenn Sie einen Schieberegler verwenden (z. B. einen jQuery-Schieberegler). Ich würde empfehlen, in diesem Fall die Verwendung einer Tabelle zu vermeiden.
  • vertikal: Mit einem tbodyTag können Sie das nicht erreichen , weil Sie es zuweisendisplay:blockdisplay:inline-block das Layout der Tabelle oder wird.

Hier ist eine Lösung mit divs: JSFiddle

HTML:

<div class="wrap_header">
    <div class="column">
        Name
    </div>
    <div class="column">
        Phone
    </div>
    <div class="clearfix"></div>
</div>
<div class="wrap_body">
    <div class="sliding_wrapper">
        <div class="serie">
            <div class="cell">
                AAAAAA
            </div>
            <div class="cell">
                323232
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="serie">
            <div class="cell">
                BBBBBB
            </div>
            <div class="cell">
                323232
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="serie">
            <div class="cell">
                CCCCCC
            </div>
            <div class="cell">
                3435656
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

CSS:

.wrap_header{width:204px;}
.sliding_wrapper,
.wrap_body {width:221px;}
.sliding_wrapper {overflow-y:scroll; overflow-x:none;}
.sliding_wrapper,
.wrap_body {height:45px;}
.wrap_header,
.wrap_body {overflow:hidden;}
.column {width:100px; float:left; border:1px solid red;}
.cell {width:100px; float:left; border:1px solid red;}

/**
 * @info Clearfix: clear all the floated elements
 */
.clearfix:after {
    visibility:hidden;
    display:block;
    font-size:0;
    content:" ";
    clear:both;
    height:0;
}
.clearfix {display:inline-table;}

/**
 * @hack Display the Clearfix as a block element
 * @hackfor Every browser except IE for Macintosh
 */
    /* Hides from IE-mac \*/
    * html .clearfix {height:1%;}
    .clearfix {display:block;}
    /* End hide from IE-mac */

Erläuterung:

Du hast ein sliding wrapper die alle Daten enthält.

Beachte das Folgende:

.wrap_header{width:204px;}
.sliding_wrapper,
.wrap_body {width:221px;}

Es gibt einen Unterschied von 17px, da wir die Breite der Bildlaufleiste berücksichtigen müssen.

Wissam El-Kik
quelle
0

Webkit scheint intern display: table-row-groupfür das tbodyTag zu verwenden. Derzeit gibt es einen Fehler beim Festlegen der Höhe: https://github.com/w3c/csswg-drafts/issues/476

Hoffen wir, dass es bald gelöst wird.

Karl Adler
quelle
0

HTML:

<table id="uniquetable">
    <thead>
      <tr>
        <th> {{ field[0].key }} </th>
        <th> {{ field[1].key }} </th>
        <th> {{ field[2].key }} </th>
        <th> {{ field[3].key }} </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="obj in objects" v-bind:key="obj.id">
        <td> {{ obj.id }} </td>
        <td> {{ obj.name }} </td>
        <td> {{ obj.age }} </td>
        <td> {{ obj.gender }} </td>
      </tr>
    </tbody>
</table>

CSS:

#uniquetable thead{
    display:block;
    width: 100%;
}
#uniquetable tbody{
    display:block;
    width: 100%;
    height: 100px;
    overflow-y:overlay;
    overflow-x:hidden;
}
#uniquetable tbody tr,#uniquetable thead tr{
    width: 100%;
    display:table;
}
#uniquetable tbody tr td, #uniquetable thead tr th{
   display:table-cell;
   width:20% !important;
   overflow:hidden;
}

das wird auch funktionieren:

#uniquetable tbody {
    width:inherit !important;
    display:block;
    max-height: 400px;
    overflow-y:overlay;
  }
  #uniquetable thead {
    width:inherit !important;
    display:block;
  }
  #uniquetable tbody tr, #uniquetable thead tr {
    display:inline-flex;
    width:100%;
  }
  #uniquetable tbody tr td,  #uniquetable thead tr th {
    display:block;
    width:20%;
    border-top:none;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height:400px;
  }
bermz kastral
quelle
0

Das Erstellen von Bildlauftabellen ist immer eine Herausforderung. Dies ist eine Lösung, bei der die Tabelle sowohl horizontal als auch vertikal mit fester Höhe auf dem Körper gescrollt wird, wodurch der Leser und der Körper "kleben" (ohne Anzeige: klebrig). Ich habe eine "große" Tabelle hinzugefügt, um sie zu zeigen. Ich habe mich von G-Cyrillus inspirieren lassen, um den Körper anzuzeigen: block; Wenn es jedoch um die Breite einer Zelle geht (sowohl im Header als auch im Body), hängt dies vom inneren Inhalt ab. Daher habe ich in jeder Zelle Inhalte mit einer bestimmten Breite hinzugefügt, sowohl in der ersten als auch in der minimalen ersten Zeile in tbody (die anderen Zeilen passen sich entsprechend an).

.go-wrapper {
    overflow-x: auto;
    width: 100%;
}
.go-wrapper table {
    width: auto;
}
.go-wrapper table tbody {
    display: block;
    height: 220px;
    overflow: auto;
}
.go-wrapper table thead {
    display: table;
}
.go-wrapper table tfoot {
    display: table;
}
.go-wrapper table thead tr, 
.go-wrapper table tbody tr,
.go-wrapper table tfoot tr {
    display: table-row;
}

.go-wrapper table th,
.go-wrapper table td { 
    white-space: nowrap; 
}

.go-wrapper .aw-50  { min-height: 1px; width: 50px; }
.go-wrapper .aw-100 { min-height: 1px; width: 100px; }
.go-wrapper .aw-200 { min-height: 1px; width: 200px; }
.go-wrapper .aw-400 { min-height: 1px; width: 400px; }

/***** Colors *****/
.go-wrapper table {
    border: 2px solid red
}
.go-wrapper table thead, 
.go-wrapper table tbody, 
.go-wrapper table tfoot {
    outline: 1px solid green
}
.go-wrapper td {
    outline: 1px solid blue
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Template</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <div class="container">
        <div class="row mt-5 justify-content-md-center">
            <div class="col-8">
                <div class="go-wrapper">
                    <table class="table">
                        <thead>
                            <tr>
                                <th><div class="aw-50" ><div class="checker"><span><input type="checkbox" class="styled"></span></div></div></th>
                                <th><div class="aw-200">Name</div></th>
                                <th><div class="aw-50" >Week</div></th>
                                <th><div class="aw-100">Date</div></th>
                                <th><div class="aw-100">Time</div></th>
                                <th><div class="aw-200">Project</div></th>
                                <th><div class="aw-400">Text</div></th>
                                <th><div class="aw-200">Activity</div></th>
                                <th><div class="aw-50" >Hours</th>
                                <th><div class="aw-50" >Pause</div></th>
                                <th><div class="aw-100">Status</div></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><div class="aw-50"><div class="checker"><span><input type="checkbox" class="styled"></span></div></div></td>
                                <td><div class="aw-200">AAAAA</div></td>
                                <td><div class="aw-50" >15</div></td>
                                <td><div class="aw-100">07.04.2020</div></td>
                                <td><div class="aw-100">10:00</div></td>
                                <td><div class="aw-200">Project 1</div></td>
                                <td><div class="aw-400">Blah blah blah</div></td>
                                <td><div class="aw-200">Activity</div></td>
                                <td><div class="aw-50" >2t</div></td>
                                <td><div class="aw-50" >30min</div></td>
                                <td><div class="aw-100">Waiting</div></td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>BBBBB</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>CCCCC</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah Blah blah blah</td>
                                <td>Activity Activity Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>DDDDD</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>EEEEE</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>FFFFF</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity Activity Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>GGGGG</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>HHHHH</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>IIIII</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>JJJJJ</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>KKKKK</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>LLLLL</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>MMMMM</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>NNNNN</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>OOOOO</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>PPPPP</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>QQQQQ</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>RRRRR</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>SSSSS</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>TTTTT</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>UUUUU</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>VVVVV</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>XXXXX</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>YYYYY</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>ZZZZZ</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>ÆÆÆÆÆ</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>ØØØØØ</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>ÅÅÅÅÅ</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <th><div class="aw-50" ><div class="checker"><span><input type="checkbox" class="styled"></span></div></div></th>
                                <th><div class="aw-200">Name</div></th>
                                <th><div class="aw-50" >Week</div></th>
                                <th><div class="aw-100">Date</div></th>
                                <th><div class="aw-100">Time</div></th>
                                <th><div class="aw-200">Project</div></th>
                                <th><div class="aw-400">Text</div></th>
                                <th><div class="aw-200">Activity</div></th>
                                <th><div class="aw-50" >Hours</th>
                                <th><div class="aw-50" >Pause</div></th>
                                <th><div class="aw-100">Status</div></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
   
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

</html>
Erweitern Sie das Snippet

Jørgen Rudolph Låker
quelle