ओवरफ्लो स्क्रॉल के साथ 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>

मेरे फिडेल यहाँ जाएँ

मैं ओवरफ्लो स्क्रॉल के साथ टेबल ए की तरह टेबल बी चाहता हूं।

किसी भी तरह की सहायता को आभार समझेंगे।

बहुत धन्यवाद, एम।

html  css 
— आवारा
स्रोत
समझ नहीं सकते। आप चाहते हैं कि टेबल ए को ओवरफ्लो स्क्रॉल के साथ टेबल ए पसंद आए लेकिन टेबल ए में अतिप्रवाह नहीं है, टेबल बी है।
— एलेक्स चार
Alek: जब मैं ओवरफ्लो स्क्रॉल और डिस्प्ले ब्लॉक के साथ tbody की ऊंचाई सेट करता हूं तो डिजाइन गड़बड़ हो जाता है।
— मवरिक
संरेखण तालिका ए की तरह होना चाहिए?
— मवरिक

जवाबों:

223

यदि आप tbodyएक स्क्रॉल दिखाना चाहते हैं , तो इसे एक में बदल दें block।

tableबदले trमें व्यवहार रखने के लिए table।

समान रूप से कोशिकाओं को स्प्रे करने के लिए, उपयोग करें table-layout:fixed;

डेमो स्क्रॉल करें

अपने 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, स्क्रॉल को कभी भी सेट करें overflow-y:scroll;:। डेमो २

— जी Cyrillus
स्रोत
1
GCyrillus: आप निकटतम हैं। लेकिन एक मुद्दा है। तालिका की चौड़ाई बहुत अधिक हो गई। क्या हम टेबल की चौड़ाई तय कर सकते हैं?
— मैवरिक
1
क्षमा करें, मेरे पास उदाहरण नहीं है। यदि हम आपके द्वारा प्रदान किए गए कोड के बारे में बात करते हैं, तो उपरोक्त कोड में परिभाषित चौड़ाई का मतलब नहीं है: तालिका {चौड़ाई: 400px; }
— मैवरिक
1
बहुत बहुत धन्यवाद @GCyrillus यह महान काम करता है! क्या मुझे एक सुझाव देना चाहिए? बदलें overflow:autoद्वारा overflow-y: scroll1em भी जब शरीर स्क्रॉलबार की जरूरत नहीं है छोड़ा रहने के लिए से बचने के हेडर को।
— बल्डवर्फ
3
आखिरकार! मैं अब एक निश्चित ऊँचाई, स्क्रॉलिंग टेबल बॉडी, फिक्स्ड हेडर, एडजस्टेबल कॉलम चौड़ाई .... सभी को जावास्क्रिप्ट के बिना कर सकता हूँ! धन्यवाद!!
— मैट हैनकॉक
4
चेतावनी: यह समाधान थ्रेड और टीडो सेल ग्रिड को काट देता है; जिसका अर्थ है कि अधिकांश व्यावहारिक मामलों में, आपके पास तालिकाओं से अपेक्षित सेल संरेखण नहीं होगा। ध्यान दें कि यह सॉल्यूशन उन्हें संरेखित करने के लिए एक हैक का उपयोग करता है: thead {चौड़ाई: 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>
स्निपेट का विस्तार करें

— दिनेश वैटरेट
स्रोत
21
एकदम सही, सभी स्तंभों को एक ही चौड़ाई के लिए मजबूर करता है
— स्टैकरर्स
क्या शरीर की ऊंचाई निर्धारित किए बिना ऐसा करने का कोई तरीका है?
— शिंज़ो
1
मैं इस पर काम करूंगा ... लेकिन अगर हमने ऊंचाई का उपयोग नहीं किया है, तो सभी रिकॉर्ड एक समय में प्रदर्शित होंगे कोई ऊर्ध्वाधर स्क्रॉल बार नहीं होगा। धन्यवाद @ शिनज़ोउ
— दिनेश वैटरेट
@stackers आप जोड़कर स्तंभ चौड़ाई निर्धारित कर सकते हैं width: 100pxकरने के लिए td, thअंदरtbody, thead
— दारिउज़ सिकोर्स्की
मैं इस पद्धति पर एक समस्या का सामना कर रहा हूं। जब मैं डिस्प्ले लगाता हूं: टेबल के लिए ब्लॉक करें जिससे गड़बड़ हो रही है। लेकिन मुझे डिस्प्ले डाले बिना स्क्रॉल व्यू नहीं मिल सका: ब्लॉक। इसके लिए कोई उपाय ??
— अहमद सफनाज
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>
स्निपेट का विस्तार करें

— brandonkal
स्रोत
8
महान विचार! यह तालिका लेआउट को गड़बड़ नहीं करता है जैसे अन्य विकल्प करते हैं।
— एंड्रे
2
किसी और को याद दिलाएं कि आपको यह सुनिश्चित करने की आवश्यकता है कि कोई पूर्वज तत्व अतिप्रवाह का उपयोग नहीं कर रहे हैं। चिपचिपा नहीं काम करने के लिए: स्थिति का कारण बन सकता stackoverflow.com/questions/43707076/...
— cboston
इस समाधान का एक और शांत पहलू यह है कि यह साथ काम करता हैheight: 100%
— पियर ल्यूक Gendreau
1
IE स्थिति का समर्थन नहीं करता है: चिपचिपा
— ariel_556
1
FWIW आप tfoot0 के एक चिपचिपा नीचे की स्थिति के साथ भी जोड़ सकते हैं और यह एक आकर्षण की तरह काम करता है। बहुत बढ़िया जवाब!
— मैटी जे
11

डिफ़ॉल्ट रूप overflowसे टेबल समूह के तत्वों पर लागू नहीं होता है जब तक कि आप एक display:blockको <tbody> भी नहीं देते हैं आपको एक position:relativeऔर एक को देना display: blockहै <thead>। 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;
}
— खेमा पांडे
स्रोत
1
क्या शरीर की ऊंचाई निर्धारित किए बिना ऐसा करने का कोई तरीका है?
— शिंज़ो
2
पूरी तरह से काम नहीं करता है। यदि स्तंभ का नाम स्तंभ की सामग्री से अधिक व्यापक है, तो यह उसे गलत बताता है।
— क्रिस्टियानो Maia
6

सभी समाधानों में सबसे सरल:

सीएसएस में नीचे कोड जोड़ें:

.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 एम स्क्रॉल बार की औसत चौड़ाई है, कृपया यदि आवश्यक हो तो इसे संशोधित करें।

— गिल बग्गियो
स्रोत
1
2 नियम पर वाक्यविन्यास गलत है, क्योंकि यह tbody trपृष्ठ पर सभी तत्वों का चयन करता है। इसमें बदलाव करें:.tableClassName thead, .tableClassName tbody tr {...}
— हारून हडोन
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 DEMO

— सुरेश पोन्नुकलाई
स्रोत
क्या शरीर की ऊंचाई निर्धारित किए बिना ऐसा करने का कोई तरीका है?
— शिंज़ो
2

मेरे मामले में मैं पिक्सल में निश्चित ऊंचाई के बजाय उत्तरदायी तालिका ऊंचाई रखना चाहता था क्योंकि अन्य उत्तर दिखा रहे हैं। ऐसा करने के लिए कि मैं दृश्यमान ऊँचाई की प्रतिशतता का उपयोग करता हूं और तालिका वाले div पर अतिप्रवाह करता हूं:

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

इस तरह तालिका का आकार बदलने के साथ-साथ तालिका का विस्तार होगा।

— kazuar
स्रोत
1

यदि आप पहले से ही बूटस्ट्रैप का उपयोग कर रहे हैं, तो इस उत्तर के आधार पर , यहां एक न्यूनतम समाधान है:

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>

बूटस्ट्रैप v3 पर परीक्षण किया गया

— ErJab
स्रोत
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>

सीएसएस:

.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

वेबकिट टैग के display: table-row-groupलिए आंतरिक रूप से उपयोग करने लगता है tbody। वर्तमान में इसकी ऊंचाई निर्धारित करने के साथ एक बग है: https://github.com/w3c/csswg-drafts/issues/476

आशा है कि यह जल्द ही हल हो जाएगा।

— कार्ल एडलर
स्रोत
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>

सीएसएस:

#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 (अन्य पंक्तियों के अनुसार अनुकूलित)

.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>
स्निपेट का विस्तार करें

— जोर्जेन रुडोल्फ लैकर
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.