Halbe Grenze für HTML-Tabelle

Ich habe eine Tabelle in meiner Webseite, die ich nur halbe Grenzen haben möchte.Halbe Grenze für HTML-Tabelle

Beispiel:

Die Tabelle, die ich habe:

A | B | C 
    | | 
A | B | C 
    | | 
A | B | C

Hinweis:

td { padding-bottom: 5%; } 
td#B { border-left: 1px solid black; border-right: 1px solid black} 
/* Assuming alphabets A , B and C are ids of each td */

Die Tabelle, die ich will:

A | B | C 

A | B | C 

A | B | C

Wie kann ich das erreichen ?

Ich verwende angularjs 'ng-repeat, um die Daten aus einer JSON-Datenbank für die Tabelle anzuzeigen.

Quelle

2017-05-12 Ernest Soo

Willkommen bei Stack Overflow! Fragen, die Code-Hilfe benötigen, müssen den kürzesten Code enthalten, der notwendig ist, um ihn ** in der Frage selbst zu reproduzieren ** vorzugsweise in einem [** Stack Snippet **] (https://blog.stackoverflow.com/2014/09/introducing-runnable -javascript-css-und-html-code-snippets /). Siehe [** So erstellen Sie ein minimales, vollständiges und verifizierbares Beispiel **] (http://stackoverflow.com/help/mcve) –

Verwenden Sie den Rand anstelle des Auffüllens – Pete

statt des Auffüllens, versuchen Sie, transparente Rahmen hinzuzufügen, wenn dies nicht der Fall ist. t Arbeit, setze einen Snippet oder HTML/CSS-Code in deine Frage, um zu zeigen, was du gemacht hast und wo du versagt hast :) –

Einer kleinen Tisch Eigenschaft entfernen kann den Trick. Verwenden Sie diese CSS in der Tabelle CSS:

table { 
    border-collapse: separate; 
    border-spacing: 0 2em; 
}

Arbeits Snippet:

table { 
 
    border-collapse: separate; 
 
    border-spacing: 0 2em; 
 
} 
 

 
td { 
 
    border-right: 1px solid #000; 
 
    padding: 0 10px; 
 
} 
 

 
tr td:last-child { 
 
    border-right: 0px solid #000; 
 
}

<table> 
 
    <tr> 
 
    <td>A</td> 
 
    <td>B</td> 
 
    <td>C</td> 
 
    </tr> 
 
    <tr> 
 
    <td>A</td> 
 
    <td>B</td> 
 
    <td>C</td> 
 
    </tr> 
 
    <tr> 
 
    <td>A</td> 
 
    <td>B</td> 
 
    <td>C</td> 
 
    </tr> 
 

 

 

 

 
</table>

Quelle

2017-05-12 10:21:32

Statt den Stil der td die Anwendung versuchen, es auf die tr
anzuwenden und die Polsterung auf der td

tr { 
    margin: 10px 0; 
    display: block; 
}

Quelle

2017-05-12 10:15:31

Du solltest ein Snippet setzen um dies in Aktion zu zeigen;) –

Sie entweder eine zusätzliche Grenze auf tr oder border-spacing verwenden können.

Der Unterschied gesehen werden kann, während eine Grenze oder im Hintergrund Tabelle angewandt wird:

table { 
 
/* demo purpose mainly */ 
 
    float:left; 
 
    margin:1em; 
 
    background:lightgray; 
 
    box-shadow: 0 0 0 2px green;; 
 
} 
 
.bdtr { 
 
border-collapse:collapse; 
 
} 
 
td {padding:0 1em;} 
 
td + td { 
 
    border-left:1px solid; 
 
} 
 
.bdtr tr + tr{ 
 
    border-top:1em lightgray solid; /* use background-color */ 
 
} 
 
    
 
.bdtd { 
 
    border-spacing:0 1em; 
 
    margin:0 1em; 
 
}

<table class="bdtr"> 
 
<caption>border on tr</caption> 
 
    <tr> 
 
    <td>A</td><td>B</td><td>C</td> 
 
    </tr> 
 
    <tr> 
 
    <td>A</td><td>B</td><td>C</td> 
 
    </tr> 
 
    <tr> 
 
    <td>A</td><td>B</td><td>C</td> 
 
    </tr> 
 
</table> 
 
<table class="bdtd"> 
 
<caption> border-spacing</caption> 
 
    <tr> 
 
    <td>A</td><td>B</td><td>C</td> 
 
    </tr> 
 
    <tr> 
 
    <td>A</td><td>B</td><td>C</td> 
 
    </tr> 
 
    <tr> 
 
    <td>A</td><td>B</td><td>C</td> 
 
    </tr> 
 
</table>

Auch Sie transparent Grenze und Schatten einem nicht einfachen Hintergrund auf dem Tisch zu ermöglichen, verwenden können, oder dahinter:

.bdtr { 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    padding: 0 1em; 
 
} 
 

 
.bdtr.bis { 
 
    background: linear-gradient(60deg, gray, yellow, purple, pink, lime); 
 
} 
 

 
.bdtr.bis tr+tr { 
 
    border-top: 1em transparent solid; 
 
} 
 

 
.bdtr.bis tr td+td { 
 
    border: none;/* reset from previous demo */ 
 
    box-shadow: inset 2px 0; 
 
}

<table class="bdtr bis"> 
 
    <tr> 
 
    <td>A</td> 
 
    <td>B</td> 
 
    <td>C</td> 
 
    </tr> 
 
    <tr> 
 
    <td>A</td> 
 
    <td>B</td> 
 
    <td>C</td> 
 
    </tr> 
 
    <tr> 
 
    <td>A</td> 
 
    <td>B</td> 
 
    <td>C</td> 
 
    </tr> 
 
</table>

Quelle

2017-05-12 10:27:36

Halbe Grenze für HTML-Tabelle

Antwort

Verwandte Themen