오버플로 스크롤로 tbody 높이를 설정하는 방법

113

tbody 높이 너비 오버플로 스크롤을 설정하는 동안 문제가 발생했습니다. 

<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>

여기 내 바이올린을 방문하십시오

오버플로 스크롤이있는 테이블 A와 같은 테이블 B를 원합니다.

도움을 주시면 감사하겠습니다.

많은 감사합니다, M.

html  css 
— Maverick
소스
이해할 수 없습니다. 오버플로 스크롤이있는 테이블 A와 같은 테이블 B를 원하지만 테이블 A는 오버플로되지 않았고 테이블 B에는 있습니다.
— 알렉스 숯불
Alek : 오버플로 스크롤과 디스플레이 블록으로 tbody의 높이를 설정하면 디자인이 엉망이됩니다.
— Maverick
정렬은 표 A와 같아야합니다. 알겠습니까?
— Maverick

답변:

223

tbody스크롤을 표시 하려면 block.

의 동작을 유지하기 위해 table차례를, tr로 table.

세포에 골고루 분사하려면 table-layout:fixed;

데모 tbody 스크롤

HTML 테스트 용 CSS :

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;
}

경우 tbody함량이를하기 때문에, 스크롤을 표시하지 않습니다 height또는 max-height,로 스크롤 언제든지 설정합니다 overflow-y:scroll;. 데모 2

— G- 키릴루스
소스
1
GCyrillus : 당신이 가장 가깝습니다. 그러나 한 가지 문제가 있습니다. 테이블 너비가 너무 높아졌습니다. 테이블 너비를 고정 할 수 있습니까?
— Maverick
1
죄송합니다. 예가 없습니다. 당신이 제공 한 코드에 대해 이야기한다면, 위 코드에 정의 된 너비를 취하지 않는 것은 다음을 의미합니다 : table {width : 400px; }
— Maverick
1
감사합니다 @GCyrillus 훌륭하게 작동합니다! 하나의 팁을 제안해도 될까요? 교체 overflow:auto로 overflow-y: scroll1em 몸이 스크롤을 필요로하지 않는 경우에도 왼쪽 머물 피하기 헤더.
— Bludwarf
3
드디어! 이제 고정 높이, 스크롤 테이블 본문, 고정 헤더, 조정 가능한 열 너비 .... 모두 자바 스크립트 없이도 가능합니다! 감사합니다!!
— Matt Hancock
4
경고 :이 솔루션은 thead 및 tbody 셀 그리드를 분리합니다. 즉, 대부분의 실제 경우 표에서 기대하는 셀 정렬이 없습니다. 이 솔루션은 일종의 정렬을 유지하기 위해 해킹을 사용합니다. thead {width : calc (100 %
— -1em
53

스크롤바를 테이블 본문에 사용하는 간단한 방법입니다.

/* 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>
스 니펫 확장

— Dinesh Vaitage
소스
21
멀리 완벽한에서, 힘의 모든 열이 같은 폭으로
— 적재기
몸의 높이를 설정하지 않고 할 수있는 방법이 있나요?
— shinzou
1
작업하겠습니다 ... 그러나 높이를 사용하지 않으면 모든 레코드가 한 번에 표시되므로 세로 스크롤 막대가 없습니다. 덕분에 @shinzou
— 네쉬 Vaitage에게
@stackers 당신은 추가하여 열 너비를 설정할 수 있습니다 width: 100px에 td, th내부tbody, thead
— 다리우스 시코 르 스키
이 방법에 문제가 있습니다. 테이블에 display : block을 넣으면 엉망이됩니다. 하지만 display : block을 넣지 않고 스크롤 뷰를 얻을 수 없었습니다. 이것에 대한 해결책은?
— Ahamed Safnaj
27

또 다른 방법은 스크롤 가능한 요소로 표를 감싸고 머리글 셀을 맨 위에 고정하도록 설정하는 것입니다.

이 접근 방식의 장점은 tbody의 표시를 변경할 필요가 없으며 헤더 셀 너비를 데이터 셀 열 너비에 맞춰 유지하면서 열 너비를 계산하기 위해 브라우저에 맡길 수 있다는 것입니다.

/* 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>
스 니펫 확장

— 브랜 칼
소스
8
좋은 생각입니다! 다른 옵션처럼 테이블 레이아웃을 엉망으로 만들지 않습니다.
— André
2
다른 사람에게 상위 요소가 오버플로를 사용하고 있지 않은지 확인해야 함을 알려줍니다. 하지 작업에 끈적 : 위치를 일으킬 수 stackoverflow.com/questions/43707076/...
— cboston
이 솔루션의 또 다른 멋진 측면은 다음과 함께 작동한다는 것입니다.height: 100%
— Pier-Luc Gendreau
1
IE는 위치를 지원하지 않습니다. 고정
— ariel_556
1
FWIW 당신은 ​​또한 tfoot0의 끈적한 하단 위치로 추가 할 수 있으며 매력처럼 작동합니다. 좋은 대답입니다!
— Matty J
11

기본적으로 overflow당신은이 제공되지 않는 테이블 그룹 요소에 적용되지 않습니다 display:block에 <tbody> 또한 당신이 포기해야 position:relative하고 display: block에 <thead>. 데모를 확인하십시오 .

.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
소스
1
몸의 높이를 설정하지 않고 할 수있는 방법이 있나요?
— shinzou
2
완전히 작동하지 않습니다. 열 이름이 열 내용보다 넓은 경우 잘못 정렬됩니다.
— Cristiano Maia
6

가장 간단한 솔루션 :

CSS에 아래 코드를 추가하십시오.

.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 은 스크롤 막대의 평균 너비입니다. 필요한 경우 수정하십시오.

— 길 바지오
소스
1
두 번째 규칙의 구문 tbody tr은 페이지의 모든 요소를 선택하기 때문에 올바르지 않습니다 . 변경 :.tableClassName thead, .tableClassName tbody tr {...}
— Aaron Hudon
2

두 번째 테이블 코드를 아래와 같이 변경하십시오.

<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 데모

— 수레 쉬 폰누 칼라이
소스
몸의 높이를 설정하지 않고 할 수있는 방법이 있나요?
— shinzou
2

제 경우에는 다른 답변이 표시되는 것처럼 픽셀 단위의 고정 높이 대신 반응 형 테이블 높이를 원했습니다. 이를 위해 표를 포함하는 div에서 보이는 높이 속성의 백분율과 오버플로를 사용했습니다.

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

이렇게하면 크기가 조정되는 창과 함께 테이블이 확장됩니다.

— Kazuar
소스
1

이 답변을 기반으로 이미 Bootstrap을 사용중인 경우 최소한의 솔루션이 있습니다.

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>

Bootstrap v3에서 테스트 됨

— ErJab
소스
0

당신이하려는 것은 헤더를 고정하고 본문 내용을 스크롤하는 것입니다. 콘텐츠를 두 방향으로 스크롤 할 수 있습니다.

  • 수평 : 슬라이더 (예 : jQuery 슬라이더)를 사용하지 않는 한 콘텐츠를 수평으로 스크롤 할 수 없습니다. 이 경우 테이블을 사용하지 않는 것이 좋습니다.
  • 수직으로 : 테이블의 레이아웃을 tbody할당 display:block하거나 display:inline-block깨뜨리기 때문에 태그 로는이를 달성 할 수 없습니다 .

다음은 JSFiddle을 사용하는 솔루션입니다 divs.

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 */

설명:

당신은 sliding wrapper 모든 데이터를 포함한다.

다음 사항에 유의하십시오.

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

스크롤바의 너비를 고려해야하기 때문에 17px의 차이가 있습니다.

— Wissam El-Kik
소스
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;
}

이것도 작동합니다.

#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
소스
0

스크롤 테이블을 만드는 것은 항상 어려운 일입니다. 이것은 테이블이 tbody에 고정 된 높이로 수평 및 수직으로 스크롤되어 theader와 tbody를 "stick"(디스플레이 없음 : sticky)하는 솔루션입니다. 보여주기 위해 "큰"테이블을 추가했습니다. Tbody 디스플레이를 만들기 위해 G-Cyrillus에서 영감을 얻었습니다. 그러나 셀의 너비 (헤더와 본문 모두)에 관해서는 내부 내용에 따라 다릅니다. 따라서 tbody의 첫 번째 행과 최소 행 모두에서 각 셀 내부에 특정 너비의 콘텐츠를 추가했습니다 (다른 행은 그에 따라 조정 됨).

.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/popper.js@1.16.0/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>
스 니펫 확장

— 요르겐 루돌프 로커
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.