วิธีตั้งค่าความสูงของร่างกายด้วยการเลื่อนแบบล้น

114

ฉันกำลังประสบปัญหาในขณะที่ตั้งค่าความสูงความกว้างตัวถังล้น 

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

เยี่ยมชมซอของฉันที่นี่

ฉันต้องการตาราง B เหมือนตาราง A ที่มีการเลื่อนมากเกินไป

ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชม.

ขอบคุณมากเอ็ม

html  css 
— ไม่ฝักใฝ่ฝ่ายใด
แหล่งที่มา
ไม่เข้าใจ. คุณต้องการให้ตาราง B เหมือนตาราง A ที่มีการเลื่อนล้น แต่ตาราง A ไม่ล้นตาราง B มี
— Alex Char
Alek: เมื่อฉันตั้งค่าความสูงของร่างกายด้วยการเลื่อนล้นและบล็อกการแสดงผลการออกแบบจะยุ่งเหยิง
— Maverick
การจัดตำแหน่งควรเป็นเหมือนตาราง A เข้าใจไหม
— Maverick

คำตอบ:

224

หากคุณต้องการtbodyแสดงการเลื่อนให้เปลี่ยนเป็นไฟล์block.

เพื่อให้การทำงานของtableเลี้ยวเข้าไปtrtable

เพื่อฉีดพ่นเซลล์อย่างสม่ำเสมอให้ใช้ table-layout:fixed;

การสาธิต tbody เลื่อน

CSS สำหรับการทดสอบ HTML ของคุณ:

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 สาธิต 2overflow-y:scroll;

— จี - ไซริลลัส
แหล่งที่มา
1
GCyrillus: คุณอยู่ใกล้ที่สุด แต่มีประเด็นหนึ่ง ความกว้างของโต๊ะสูงเกินไป เราสามารถกำหนดความกว้างของตารางได้หรือไม่?
— Maverick
1
ขออภัยฉันไม่มีตัวอย่าง หากเราพูดถึงโค้ดที่คุณให้มามันไม่ได้ใช้ความกว้างที่กำหนดไว้ในโค้ดด้านบนหมายความว่า: table {width: 400px; }
— Maverick
1
ขอบคุณมาก @GCyrillus มันใช้งานได้ดีมาก! ฉันขอแนะนำเคล็ดลับได้ไหม แทนที่overflow:autoด้วยoverflow-y: scrollเพื่อหลีกเลี่ยงส่วนหัวเพื่อให้เหลือ 1em แม้ว่าร่างกายจะไม่ต้องการแถบเลื่อนก็ตาม
— Bludwarf
3
ในที่สุด! ตอนนี้ฉันสามารถมีความสูงคงที่การเลื่อนตัวของตารางส่วนหัวคงที่ความกว้างของคอลัมน์ที่ปรับได้ .... ทั้งหมดนี้ไม่ต้องใช้จาวาสคริปต์! ขอบคุณ!!
— Matt Hancock
4
คำเตือน: โซลูชันนี้จะตัดการเชื่อมต่อกริดเซลล์ของ thead และ tbody ซึ่งหมายความว่าในทางปฏิบัติส่วนใหญ่คุณจะไม่มีการจัดตำแหน่งเซลล์ที่คุณคาดหวังจากตาราง สังเกตว่าโซลูชันนี้ใช้การแฮ็กเพื่อจัดเรียงให้สอดคล้องกัน: thead {width: calc (100% - 1em)}
— Ciabaros
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
บังคับให้คอลัมน์ทั้งหมดมีความกว้างเท่ากัน
— รถ stackers
มีวิธีทำโดยไม่ตั้งส่วนสูงของร่างกายหรือไม่?
— shinzou
1
ฉันจะดำเนินการกับมัน ... แต่ถ้าเราไม่ได้ใช้ความสูงดังนั้นบันทึกทั้งหมดจะแสดงในแต่ละครั้งจะไม่มีแถบเลื่อนแนวตั้ง ขอบคุณ @shinzou
— Dinesh Vaitage
@stackers คุณสามารถตั้งค่าความกว้างของคอลัมน์ได้โดยเพิ่มwidth: 100pxเข้าไปtd, thข้างในtbody, thead
— Dariusz Sikorski
ฉันกำลังประสบปัญหาเกี่ยวกับวิธีนี้ เมื่อฉันวางจอแสดงผล: บล็อกสำหรับตารางมันเริ่มยุ่ง แต่ฉันไม่สามารถรับมุมมองแบบเลื่อนได้โดยไม่ต้องใส่ 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 ไม่รองรับตำแหน่ง: sticky
— ariel_556
1
FWIW คุณสามารถเพิ่มtfootด้วยตำแหน่งด้านล่างที่เหนียวเป็น 0 และใช้งานได้เหมือนมีเสน่ห์ ตอบโจทย์มาก!
— 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;
}
— เขมะพันดี
แหล่งที่มา
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คือความกว้างเฉลี่ยของแถบเลื่อนโปรดแก้ไขค่านี้หากจำเป็น

— Gil Baggio
แหล่งที่มา
1
ไวยากรณ์ของกฎข้อที่ 2 ไม่ถูกต้องเนื่องจากจบลงด้วยการเลือก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;
}

วิธีนี้ตารางจะขยายออกไปพร้อมกับการปรับขนาดหน้าต่าง

— คาซัวร์
แหล่งที่มา
2

จากคำตอบนี้นี่เป็นวิธีแก้ปัญหาขั้นต่ำหากคุณใช้ 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.0

— เออจาบ
แหล่งที่มา
0

ฉันเดาว่าสิ่งที่คุณกำลังพยายามทำคือการคงส่วนหัวไว้และเลื่อนเนื้อหาของร่างกาย คุณสามารถเลื่อนเนื้อหาได้ 2 ทิศทาง:

  • ในแนวนอน: คุณจะไม่สามารถเลื่อนเนื้อหาในแนวนอนได้เว้นแต่คุณจะใช้แถบเลื่อน (เช่นแถบเลื่อน jQuery) ฉันอยากจะแนะนำให้หลีกเลี่ยงการใช้ตารางในกรณีนี้
  • ในแนวตั้ง: คุณจะไม่สามารถทำได้ด้วยtbodyแท็กเนื่องจากการกำหนดdisplay:blockหรือdisplay:inline-blockจะทำให้เค้าโครงของตารางเสียหาย

นี่คือวิธีแก้ปัญหาโดยใช้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 */

คำอธิบาย:

คุณมีsliding wrapperซึ่งจะมีข้อมูลทั้งหมด

สังเกตสิ่งต่อไปนี้:

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

มีความแตกต่างที่ 17px เนื่องจากเราต้องคำนึงถึงความกว้างของแถบเลื่อนด้วย

— วิสซามเอล - กิ๊ก
แหล่งที่มา
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

การทำตารางเลื่อนเป็นสิ่งที่ท้าทายเสมอ นี่คือวิธีแก้ปัญหาที่ตารางถูกเลื่อนทั้งในแนวนอนและแนวตั้งโดยมีความสูงคงที่บนตัวถังทำให้ตัวละครและตัว "ติด" (ไม่มีการแสดงผล: เหนียว) ฉันได้เพิ่มตาราง "ใหญ่" เพื่อแสดง ฉันได้รับแรงบันดาลใจจาก G-Cyrillus ในการสร้าง tbody display: block; แต่เมื่อพูดถึงความกว้างของเซลล์ (ทั้งในส่วนหัวและส่วนเนื้อหา) จะขึ้นอยู่กับเนื้อหาภายใน ดังนั้นฉันจึงเพิ่มเนื้อหาที่มีความกว้างเฉพาะภายในแต่ละเซลล์ทั้งใน thead และแถวแรกต่ำสุดใน 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>
ขยายข้อมูลโค้ด

— Jørgen Rudolph Låker
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.