Wie erstelle ich eine HTML/CSS-Tabelle mit Doppelrahmen?

Question

Wie kann ich eine mit einer doppelten Umrandung erstellen, so?

Ich habe versucht, eine 1px solid schwarz Grenze für <table> und <tbody> Einstellung, und fügen Sie Abstand/padding zwischen ihnen, aber es hat nicht funktioniert. Die Seite wird auch auf SharePoint ausgeführt, die standardmäßig border-collapse auf collapse zu allen Tabellen setzt.

Answer 1

Dies könnte für Sie gearbeitet

table { 
 
    border: 1px solid #000; 
 
} 
 

 
table tbody { 
 
    display: block; 
 
    border: 1px solid red; 
 
}

<table> 
 
    <tbody> 
 
     <tr><td>some text</td><td>some text</td></tr> 
 
     <tr><td>some text</td><td>some text</td></tr> 
 
     <tr><td>some text</td><td>some text</td></tr> 
 
    </tbody> 
 
</table>

Answer 2

Die CSS-Eigenschaft border-style kann auf double festgelegt werden, erfordert jedoch mindestens 3px Rahmenbreite. Der allgemeine Fehler besteht darin, 1px Rahmenbreite festzulegen, die zum Erstellen eines doppelten Rahmens nicht funktionieren wird.

Beispiel, die funktionieren würde:

table { 
    border: 3px double black; 
} 

Eine andere, kompliziertere Trick, der funktioniert auch anders Styling für und für verwenden. Die äußere Tabelle verwendet einen 1px solid black Rahmen, während die <tbody> einen inset Schatten anstelle des Rahmens verwendet.

HTML:

<table> 
    <tbody> 
     <tr><td>That's a test!</td></tr> 
    <tbody> 
</table> 

CSS:

table { 
    border: 1px solid black; 
    padding: 2px; 
    border-collapse: separate; 
} 

tbody { 
    border-spacing: 3px; 
    box-shadow: inset 1px 1px 0 black, inset -1px -1px 0 black; 
    border-collapse: separate; 
} 

Hinweis gibt es zwei Einsatz Schatten: eine für oben/links, eine für unten/rechts.

Answer 3

Sie können dies tun, indem Sie Ihre <table> Tag in einem <div> Tag hinzufügen und einige Padding auf <div> Tag.Ich habe das Snippet unten hinzugefügt.

table{ 
 
    border:1px solid #000; 
 
    width:100%; 
 
    height:100%; 
 
    } 
 
div{ 
 
    border:1px solid green; 
 
    padding:2px; 
 
    } 
 

<div> 
 
    <table> 
 
    <tr><td>one</td><td>two</td></tr> 
 
    </table> 
 
</div>

Answer 4

Try this ...

.tbl-bdr { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: #fff; 
 
    position: relative; 
 
    border: 1px solid blue; 
 
    margin: 20px; 
 
} 
 
.tbl-bdr:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: -10px; 
 
    left: -10px; 
 
    right: -10px; 
 
    bottom: -10px; 
 
    border: 1px solid green; 
 
    z-index: -1; 
 
}

<table class="tbl-bdr"> 
 

 
</table>