Rand oben und Box Schatten funktioniert nicht in tbody

Meine CSS-und HTML-Code in das Code-Snippet unten zur Verfügung gestellt. Ich habe versucht, Box-Schatten auf alle row meiner tbody anzuwenden, aber es funktioniert nicht.Rand oben und Box Schatten funktioniert nicht in tbody

Auch funktioniert box-shadow funktioniert nicht, auch margin-top funktioniert nicht.

Ich wollte einige Leerzeichen zwischen den thead und tbody erstellen. Hab ich etwas verpasst?

#myList { 
 
    background: #fff; 
 
    text-align: left; 
 
    width: 100%; 
 
    margin-top: 10%; 
 
    margin-left: 6%; 
 
} 
 
#myList thead { 
 
    font-size: 18px; 
 
    font-weight: bold; 
 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
 
    margin-bottom: 50%; 
 
} 
 
#myList tbody { 
 
    margin-top: 20%; 
 
} 
 
#myList tbody td:first-child { 
 
    display: none; 
 
} 
 
#myList tbody tr { 
 
    box-shadow: 10px 10px 5px #888888; 
 
} 
 
#myList tbody td:nth-child(2) { 
 
    width: 50%; 
 
} 
 
#myList tbody td { 
 
    color: #00496B; 
 
    font-size: 15px; 
 
    font-weight: normal; 
 
}

<table id="myList"> 
 
    <thead> 
 
    <tr> 
 
     <td>Product Name</td> 
 
     <td>Qty</td> 
 
     <td>Price</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>P1</td> 
 
     <td>Adidas Superstar</td> 
 
     <td>1</td> 
 
     <td>$50</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

aktualisieren

Ist es möglich, wenn ich so etwas erreichen wollen, was in der Tabelle unten ist? Jeder Artikel, zum Beispiel Item 1 und Item 2 ist jeweils eine Zeile des tbody.

------------------- 
|  Item 1  | 
------------------ 

------------------- 
|  Item 2  | 
------------------

Quelle

2016-08-06 Alvin

Mit Pseudoklasse in CSS kann dies erreicht werden. Sehen Sie sich das Beispiel-Snippet unter – jerry

an, um das aktualisierte Snippet zu überprüfen. Ist es etwas, das du willst? – jerry

Hinzufügen von Pseudoklasse kann

#myList { 
 
    background: #fff; 
 
    text-align: left; 
 
    width: 100%; 
 
    margin-top: 10%; 
 
    margin-left: 6%; 
 
    border-collapse:separate; 
 
    border-spacing:0px 10px; 
 
} 
 
#myList thead { 
 
    font-size: 18px; 
 
    font-weight: bold; 
 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
 
    margin-bottom: 50%; 
 
} 
 
#myList tbody { 
 
    margin-top: 20%; 
 
} 
 
#myList tbody td:first-child { 
 
    display: none; 
 
} 
 
#myList tbody tr { 
 
    box-shadow: 10px 10px 5px #888888; 
 
} 
 
#myList tbody td:nth-child(2) { 
 
    border-left:1px solid; 
 
    width: 50%; 
 
} 
 
#myList tbody td { 
 
    color: #00496B; 
 
    font-size: 15px; 
 
    font-weight: normal; 
 
    border-top:1px solid; 
 
    border-bottom:1px solid; 
 
} 
 

 

 

 
#myList tbody:before { 
 
    content: "-"; 
 
    display: block; 
 
    line-height: 1em; 
 
    color: transparent; 
 
} 
 
#myList tbody td:last-child { 
 
    border-right:1px solid; 
 
}

<table id="myList"> 
 
    <thead> 
 
    <tr> 
 
     <td>Product Name</td> 
 
     <td>Qty</td> 
 
     <td>Price</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>P1</td> 
 
     <td>Adidas Superstar</td> 
 
     <td>1</td> 
 
     <td>$50</td> 
 
    </tr> 
 
    <tr> 
 
     <td>P1</td> 
 
     <td>Superstar</td> 
 
     <td>2</td> 
 
     <td>$60</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Quelle

2016-08-06 15:20:38 jerry

Können Sie den Fehler beim Hinzufügen von 'box-shadow' ebenfalls lösen? Weil ich versucht habe, aber ich kann es einfach nicht erscheinen – Alvin

Sie müssen Grenze Box-Schatten für td .. Ich glaube nicht, dass es auf tr angewendet werden kann – jerry

Sie können

tbody:before { 
    content: "-"; 
    display: inline-block; 
    color: transparent; 
}

#myList { 
 
    background: #fff; 
 
    text-align: left; 
 
    width: 100%; 
 
    margin-top: 10%; 
 
    margin-left: 6%; 
 
} 
 
#myList thead { 
 
    font-size: 18px; 
 
    font-weight: bold; 
 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
 
    margin-bottom: 50%; 
 
} 
 
tbody:before { 
 
    content: "-"; 
 
    display: inline-block; 
 
    color: transparent; 
 
} 
 
#myList tbody { 
 
    margin-top: 20%; 
 
} 
 
#myList tbody td:first-child { 
 
    display: none; 
 
} 
 
#myList tbody tr { 
 
    box-shadow: 10px 10px 5px #888888; 
 
} 
 
#myList tbody td:nth-child(2) { 
 
    width: 50%; 
 
} 
 
#myList tbody td { 
 
    color: #00496B; 
 
    font-size: 15px; 
 
    font-weight: normal; 
 
}

<table id="myList"> 
 
    <thead> 
 
    <tr> 
 
     <td>Product Name</td> 
 
     <td>Qty</td> 
 
     <td>Price</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>P1</td> 
 
     <td>Adidas Superstar</td> 
 
     <td>1</td> 
 
     <td>$50</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

hinzufügen helfen

Quelle

2016-08-06 15:23:57

Rand oben und Box Schatten funktioniert nicht in tbody

Antwort

Verwandte Themen