Scrollable tbody td Breite nicht vollen Platz nach der Bereitstellung Breite

Ich habe Scrollable tbody mit einem festen Header. Die Spalte wird nicht richtig ausgerichtet, auch nachdem die Breite in td angegeben wurde. Ich muss kein extra Div hinzufügen, um dasselbe zu erreichen.Scrollable tbody td Breite nicht vollen Platz nach der Bereitstellung Breite

table.tables { 
 
    width:590px; 
 
    position: relative; 
 
    height: 200px; 
 
} 
 
table.tables thead { 
 
    display: table; 
 
} 
 
table.tables tbody { 
 
    display: block; 
 
} 
 
table.tables thead { 
 
    position: relative; 
 
    width: 100%; 
 
    background: aqua; 
 
} 
 
.tables tbody { 
 
    height: 200px;  
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
} 
 
table.tables tbody tr { 
 
    display:table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
} 
 
table.tables thead tr { 
 
    display:table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
}

<div class="wrap"> 
 
    <table class="tables"> 
 
    <thead> 
 
     <tr> 
 
     <th width="40%">Header1</th> 
 
     <th width="40%">Header2</th> 
 
     <th width="20%">Header3</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td width="40%">Value1</td> 
 
     <td width="40%">Value2</td> 
 
     <td width="20%">Value3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Value1</td> 
 
     <td>Value2</td> 
 
     <td>Value2</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Value1</td> 
 
     <td>Value2</td> 
 
     <td>Value2</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Value1</td> 
 
     <td>Value2</td> 
 
     <td>Value2</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Value1</td> 
 
     <td>Value2</td> 
 
     <td>Value2</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Value1</td> 
 
     <td>Value2</td> 
 
     <td>Value2</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Value1</td> 
 
     <td>Value2</td> 
 
     <td>Value2</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Value1</td> 
 
     <td>Value2</td> 
 
     <td>Value2</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Value1</td> 
 
     <td>Value2</td> 
 
     <td>Value2</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Value1</td> 
 
     <td>Value2</td> 
 
     <td>Value2</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Value1</td> 
 
     <td>Value2</td> 
 
     <td>Value2</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Value1</td> 
 
     <td>Value2</td> 
 
     <td>Value2</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Value1</td> 
 
     <td>Value2</td> 
 
     <td>Value2</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Value1</td> 
 
     <td>Value2</td> 
 
     <td>Value2</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Quelle

2017-10-23 Mike Phils

Ich glaube nicht, dass es ein 'Breite' Problem gibt. Sowohl Header- als auch Body-Spalten haben jeweils die gleiche Breite, aber aufgrund von Unterschieden in der Ausrichtung scheinen sie ein wenig aus. – Narxx

@SanchitPatiyal Ich brauche Spalte der ersten Zeile und alle Zeile Spalte muss mit der Spalte address ausgerichtet werden. Kein Zentrum. –

@Narxx nein es ist nicht alligning –

Sie können es wie folgt tun:

table.tables { 
 
    width: 590px; 
 
    position: relative; 
 
    height: 200px; 
 
} 
 

 
table.tables > thead{display: table;} 
 
table.tables > tbody{display: block;} 
 

 
table.tables > thead { 
 
    position: relative; 
 
    width: calc(100% - 17px); /* 17px scroll-bar width */ 
 
    background: aqua; 
 
} 
 

 
table.tables > thead > tr > th { 
 
    text-align: left; /* the default value for 'th' is center */ 
 
} 
 

 
.tables tbody { 
 
    height: 200px;  
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
} 
 

 
table.tables > tbody > tr { 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
} 
 

 
table.tables > thead > tr > th:first-child {width: 40%} 
 
table.tables > thead > tr > th:nth-child(2) {width: 40%} 
 
table.tables > thead > tr > th:nth-child(3) {width: 20%} /* can also use :last-child */ 
 

 
table.tables > tbody > tr > td:first-child {width: 40%} 
 
table.tables > tbody > tr > td:nth-child(2) {width: 40%} 
 
table.tables > tbody > tr > td:nth-child(3) {width: 20%} /* can also use :last-child */ 
 

 
table.tables > thead > tr { 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
} 
 

 
/* Still here just in case you make up your mind. 
 
tbody > tr > td { 
 
    text-align: center; 
 
} 
 
*/

<div class="wrap"> 
 
    <table class="tables"> 
 
    <thead> 
 
     <tr> 
 
     <th>Header1</th> 
 
     <th>Header2</th> 
 
     <th>Header3</th> 
 
     </tr> 
 
    </thead> 
 
    
 
    <tbody> 
 
     <tr> 
 
     <td>Value1</td> 
 
     <td>Value2</td> 
 
     <td>Value3</td> 
 
     </tr> 
 

 
     <tr> 
 
     <td>Value1</td> 
 
     <td>Value2</td> 
 
     <td>Value2</td> 
 
     </tr> 
 

 
     <tr> 
 
     <td>Value1</td> 
 
     <td>Value2</td> 
 
     <td>Value2</td> 
 

 
     </tr><tr> 
 
     <td>Value1</td> 
 
     <td>Value2</td> 
 
     <td>Value2</td> 
 

 
     </tr><tr> 
 
     <td>Value1</td> 
 
     <td>Value2</td> 
 
     <td>Value2</td> 
 

 
     </tr><tr> 
 
     <td>Value1</td> 
 
     <td>Value2</td> 
 
     <td>Value2</td> 
 

 
     </tr><tr> 
 
     <td>Value1</td> 
 
     <td>Value2</td> 
 
     <td>Value2</td> 
 

 
     </tr><tr> 
 
     <td>Value1</td> 
 
     <td>Value2</td> 
 
     <td>Value2</td> 
 

 
     </tr><tr> 
 
     <td>Value1</td> 
 
     <td>Value2</td> 
 
     <td>Value2</td> 
 

 
     </tr><tr> 
 
     <td>Value1</td> 
 
     <td>Value2</td> 
 
     <td>Value2</td> 
 

 
     </tr><tr> 
 
     <td>Value1</td> 
 
     <td>Value2</td> 
 
     <td>Value2</td> 
 

 
     </tr><tr> 
 
     <td>Value1</td> 
 
     <td>Value2</td> 
 
     <td>Value2</td> 
 

 
     </tr><tr> 
 
     <td>Value1</td> 
 
     <td>Value2</td> 
 
     <td>Value2</td> 
 

 
     </tr><tr> 
 
     <td>Value1</td> 
 
     <td>Value2</td> 
 
     <td>Value2</td> 
 

 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

standardmäßig td 's Text links ausrichten und th ist es Mitte auszurichten. Um beide vertikal auszurichten, müssen Sie die Breite der Bildlaufleiste von 100% abziehen und die Position th links ausrichten.

Quelle

2017-10-23 12:37:07 VXp

Scrollable tbody td Breite nicht vollen Platz nach der Bereitstellung Breite

Antwort

Verwandte Themen