Prozentbreite auf td/th funktioniert nicht (jsfiddle)

Ich möchte eine Tabelle von reinem css stylen, deren Header behoben werden konnte, während Körper vertikal scrollbar sein kann.
Das ist mein demo Prozentbreite auf td/th funktioniert nicht (jsfiddle)

/*css for fixed header, vertically scrollable body*/ 
 

 
.fixedHeader { 
 
    width: 100%; 
 
} 
 

 
.fixedHeader thead { 
 
    display: block; 
 
    width: cal(100% - 17px); 
 
} 
 

 
.fixedHeader tbody { 
 
    display: block; 
 
    width: 100%; 
 
    max-height: 200px; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
} 
 

 

 
/*custom appearance for your table*/ 
 

 
.fixedHeader { 
 
    border: 1px solid gray; 
 
    border-collapse: collapse; 
 
} 
 

 
.fixedHeader th, 
 
.fixedHeader td { 
 
    border: 1px solid gray; 
 
}

<table class="fixedHeader"> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Color</th> 
 
     <th>Description</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Apple</td> 
 
     <td>Red</td> 
 
     <td>These are red.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Pear</td> 
 
     <td>Green</td> 
 
     <td>These are green.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Grape</td> 
 
     <td>Purple/Green</td> 
 
     <td>These are purple and green.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Orange</td> 
 
     <td>Orange</td> 
 
     <td>These are orange.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Banana</td> 
 
     <td>Yellow</td> 
 
     <td>These are yellow.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Kiwi</td> 
 
     <td>Green</td> 
 
     <td>These are green.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Plum</td> 
 
     <td>Purple</td> 
 
     <td>These are Purple</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Watermelon</td> 
 
     <td>Red</td> 
 
     <td>These are red.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Tomato</td> 
 
     <td>Red</td> 
 
     <td>These are red.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cherry</td> 
 
     <td>Red</td> 
 
     <td>These are red.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cantelope</td> 
 
     <td>Orange</td> 
 
     <td>These are orange inside.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Honeydew</td> 
 
     <td>Green</td> 
 
     <td>These are green inside.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Papaya</td> 
 
     <td>Green</td> 
 
     <td>These are green.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Raspberry</td> 
 
     <td>Red</td> 
 
     <td>These are red.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Blueberry</td> 
 
     <td>Blue</td> 
 
     <td>These are blue.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Mango</td> 
 
     <td>Orange</td> 
 
     <td>These are orange.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Passion Fruit</td> 
 
     <td>Green</td> 
 
     <td>These are green.</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Was mich verwirrt ist das, was das Element (vielleicht mein Verständnis völlig falsch sind, bitte korrigieren Sie mich), dass die prozentuale Breite auf td/th bezieht sich auf auf der Erde?

Quelle

2017-03-27 xiyu

Typo in Ihrer 'Breite: cal (100% - 17px);'. Es muss "calc" nicht "cal" sein. – divy3993

Mögliches Duplikat von [HTML-Tabelle mit 100% Breite, mit vertikalem Scroll in tbody] (http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody) –

@shubhamagrawalal Danke für Ihre Bereitstellung. Der Schlüssel hier ist, die Breite von th (s) gleich der Breite der entsprechenden Spalte anzupassen. Aber ich verstehe immer noch nicht, warum die relative Breite (Prozent) auf th/td nicht funktioniert? – xiyu

Dieser Link: JS Fiddle sollte funktionieren. Versuchen Sie es mit dem CSS in dieser Tabelle. Hier ist die CSS:

table.scroll { 
width: 100%; /* Optional */ 
/* border-collapse: collapse; */ 
border-spacing: 0; 
border: 2px solid black; 
} 

table.scroll tbody, 
table.scroll thead { display: block; } 

thead tr th { 
height: 30px; 
line-height: 30px; 
/*text-align: left;*/ 
} 

table.scroll tbody { 
height: 100px; 
overflow-y: auto; 
overflow-x: hidden; 
} 

tbody { border-top: 2px solid black; } 

tbody td, thead th { 
width: 20%; /* Optional */ 
border-right: 1px solid black; 
} 

tbody td:last-child, thead th:last-child { 
border-right: none; 
}

EDIT

Die Javascript ist der wichtigste Schlüssel dazu:

// Adjust the width of thead cells when window resizes 
$(window).resize(function() { 
// Get the tbody columns width array 
colWidth = $bodyCells.map(function() { 
    return $(this).width(); 
}).get(); 

// Set the width of thead columns 
$table.find('thead tr').children().each(function(i, v) { 
    $(v).width(colWidth[i]); 
});  
}).resize(); // Trigger resize handler

Hoffe, es hilft.

Quelle

2017-03-27 06:01:36 Sank6

Sie können die feste Breite td und th verwenden und auch position:fixed bis thead angeben. So thead wird oben in der Tabelle bleiben und tbody wird blättern.

.fixedHeader{ 
 
    width:480px; 
 
    max-height:200px; 
 
    overflow-y:auto; 
 
    overflow-x:hidden; 
 
    display:block; 
 
} 
 
.fixedHeader thead{ 
 
    position:fixed; 
 
    background:blue; 
 
    color:white 
 
} 
 
/*custom appearance for your table*/ 
 
.fixedHeader{ 
 
    border:1px solid gray; 
 
    border-collapse:collapse; 
 
} 
 

 
.fixedHeader th, .fixedHeader td{ 
 
    border:1px solid gray; 
 
    width:150px 
 
}

<table class="fixedHeader"> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Color</th> 
 
     <th>Description</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Apple</td> 
 
     <td>Red</td> 
 
     <td>These are red.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Pear</td> 
 
     <td>Green</td> 
 
     <td>These are green.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Grape</td> 
 
     <td>Purple/Green</td> 
 
     <td>These are purple and green.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Orange</td> 
 
     <td>Orange</td> 
 
     <td>These are orange.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Banana</td> 
 
     <td>Yellow</td> 
 
     <td>These are yellow.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Kiwi</td> 
 
     <td>Green</td> 
 
     <td>These are green.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Plum</td> 
 
     <td>Purple</td> 
 
     <td>These are Purple</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Watermelon</td> 
 
     <td>Red</td> 
 
     <td>These are red.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Tomato</td> 
 
     <td>Red</td> 
 
     <td>These are red.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cherry</td> 
 
     <td>Red</td> 
 
     <td>These are red.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cantelope</td> 
 
     <td>Orange</td> 
 
     <td>These are orange inside.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Honeydew</td> 
 
     <td>Green</td> 
 
     <td>These are green inside.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Papaya</td> 
 
     <td>Green</td> 
 
     <td>These are green.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Raspberry</td> 
 
     <td>Red</td> 
 
     <td>These are red.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Blueberry</td> 
 
     <td>Blue</td> 
 
     <td>These are blue.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Mango</td> 
 
     <td>Orange</td> 
 
     <td>These are orange.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Passion Fruit</td> 
 
     <td>Green</td> 
 
     <td>These are green.</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Quelle

2017-03-27 06:30:47 aje

Prozentbreite auf td/th funktioniert nicht (jsfiddle)

Antwort

Verwandte Themen