So fügen Sie einen Randradius zur Tabellenzeile hinzu

Weiß jemand, wie man tr nach Belieben stylt?

Ich habe Border-Collapse für Tabelle verwendet. Danach kann tr 1px Solid Border anzeigen, den ich ihnen gebe.

Wenn ich es jedoch versucht habe -moz-border-radius, funktioniert es nicht. Selbst ein einfacher Rand funktioniert nicht.

Sie können den Randradius nur auf td anwenden, nicht auf tr oder table. Ich habe dies für abgerundete Ecktische mithilfe der folgenden Stile umgangen:

table { border-collapse: separate; }
td { border: solid 1px #000; }
tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-right-radius: 10px; }
tr:last-child td:first-child { border-bottom-left-radius: 10px; }
tr:last-child td:last-child { border-bottom-right-radius: 10px; }

Stellen Sie sicher, dass Sie alle Herstellerpräfixe angeben. Hier ist ein Beispiel dafür in Aktion .

Tatsächlicher Abstand zwischen Zeilen

Dies ist ein alter Thread, aber ich habe bemerkt, dass ich die Kommentare des OP zu anderen Antworten gelesen habe, die das ursprüngliche Ziel anscheinend in border-radiusden Zeilen und Lücken zwischen den Zeilen hatte. Es scheint nicht, dass die aktuellen Lösungen genau das tun. Die Antwort von theazureshadow geht in die richtige Richtung, scheint aber etwas mehr zu brauchen.

Für diejenigen, die daran interessiert sind, ist hier eine Geige, die die Zeilen trennt und den Radius auf jede Zeile anwendet. (HINWEIS: Firefox hat derzeit einen Fehler beim Anzeigen / Ausschneiden background-coloran den Randradien .)

Der Code lautet wie folgt (und wie im folgenden Schatten erwähnt, wurden für die frühere Browserunterstützung die verschiedenen Herstellerpräfixe border-radiushinzugefügt , die benötigt werden).

table { 
    border-collapse: separate; 
    border-spacing: 0 10px; 
    margin-top: -10px; /* correct offset on first border spacing if desired */
}
td {
    border: solid 1px #000;
    border-style: solid none;
    padding: 10px;
    background-color: cyan;
}
td:first-child {
    border-left-style: solid;
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px;
}
td:last-child {
    border-right-style: solid;
    border-bottom-right-radius: 10px; 
    border-top-right-radius: 10px; 
}

Bonusinfo: border-radiushat keine Auswirkung auf Tabellen mit border-collapse: collapse;und auf gesetztem Rahmen td. Und es spielt keine Rolle , wenn border-radiusgesetzt auf table, troder td-e ist ignoriert.

http://jsfiddle.net/Exe3g/

Das tr-Element berücksichtigt den Randradius. Kann reines HTML und CSS verwenden, kein Javascript.

JSFiddle-Link: http://jsfiddle.net/pflies/zL08hqp1/10/

tr {
    border: 0;
    display: block;
    margin: 5px;
}
.solid {
    border: 2px red solid;
    border-radius: 10px;
}
.dotted {
    border: 2px green dotted;
    border-radius: 10px;
}
.dashed {
    border: 2px blue dashed;
    border-radius: 10px;
}

td {
    padding: 5px;
}

<table>
    <tr>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
    </tr>
    <tr class='dotted'>
        <td>07</td>
        <td>08</td>
        <td>09</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
    <tr class='solid'>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td>17</td>
        <td>18</td>
    </tr>
    <tr class='dotted'>
        <td>19</td>
        <td>20</td>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
    </tr>
    <tr class='dashed'>
        <td>25</td>
        <td>26</td>
        <td>27</td>
        <td>28</td>
        <td>29</td>
        <td>30</td>
    </tr>
</table>

Ich denke, dass es in diesem Fall falsch ist, Ihre Grenzen zu stürzen. Das Reduzieren bedeutet im Grunde, dass die Grenze zwischen zwei benachbarten Zellen geteilt wird. Dies bedeutet, dass unklar ist, in welche Richtung die Kurve bei einem Radius gebogen werden soll.

Stattdessen können Sie den beiden linken Ecken des ersten TD und den beiden rechten Ecken des letzten TD einen Randradius zuweisen. Sie können first-childund last-childSelektoren verwenden, wie von theazureshadow vorgeschlagen, aber diese werden möglicherweise von älteren Versionen des IE schlecht unterstützt. Es ist möglicherweise einfacher, nur Klassen zu definieren, z. B. .first-columnund .last-columndiesem Zweck zu dienen.

Laut Opera definiert der CSS3-Standard nicht die Verwendung von border-radiusTDs. Ich habe die Erfahrung gemacht, dass Firefox und Chrome dies unterstützen, Opera jedoch nicht (ich weiß nichts über IE). Die Problemumgehung besteht darin, den td-Inhalt in ein div zu verpacken und das dann border-radiusauf das div anzuwenden .

Da ich hier nicht versuche, Credits aufzunehmen, geht das gesamte Credit an @theazureshadow für seine Antwort, aber ich musste es persönlich für eine Tabelle anpassen, die einige <th>anstelle der <td>Zellen der ersten Zeile enthält.

Ich poste nur die modifizierte Version hier, falls einige von Ihnen die Lösung von @ theazureshadow verwenden möchten, aber wie ich einige <th>in der ersten haben <tr>. Die Klasse "reportTable" muss nur auf die Tabelle selbst angewendet werden:

table.reportTable {
    border-collapse: separate;
    border-spacing: 0;
}

table.reportTable td {
    border: solid gray 1px;
    border-style: solid none none solid;
    padding: 10px;
}

table.reportTable td:last-child {
    border-right: solid gray 1px;
}

table.reportTable tr:last-child td{
    border-bottom: solid gray 1px;
}

table.reportTable th{
    border: solid gray 1px;
    border-style: solid none none solid;
    padding: 10px;
}

table.reportTable th:last-child{
    border-right: solid gray 1px;
    border-top-right-radius: 10px;
}

table.reportTable th:first-child{
    border-top-left-radius: 10px;
}

table.reportTable tr:last-child td:first-child{
    border-bottom-left-radius: 10px;
}   

table.reportTable tr:last-child td:last-child{
    border-bottom-right-radius: 10px;
}

Sie können die Polster, Radien usw. jederzeit an Ihre Bedürfnisse anpassen. Hoffe das hilft den Leuten!

Ich habe festgestellt, dass das Hinzufügen eines Rahmenradius zu Tabellen, trs und tds in den neuesten Versionen von Chrome, FF und IE nicht zu 100% funktioniert. Stattdessen wickle ich die Tabelle mit einem Div ein und setze den Randradius darauf.

<div class="tableWrapper">
  <table>
    <tr><td>Content</td></tr>
  <table>
</div>

.tableWrapper {
  border-radius: 4px;
  overflow: hidden;
}

Wenn dies nicht der Fall ist width: 100%, können Sie Ihren Wrapper erstellen float: left. Denken Sie daran, ihn zu löschen.

Verwenden Sie Border-Collapse: Separat; und Randabstand: 0; Verwenden Sie jedoch nur border-right und border-bottom für die tds, wobei border-top auf th und border-left nur auf tr td: nth-child (1) angewendet werden.

Sie können dann den Randradius auf die Ecke tds anwenden (indem Sie das n-te Kind verwenden, um sie zu finden).

https://jsfiddle.net/j4wm1f29/

<table>
  <tr>
    <th>title 1</th>
    <th>title 2</th>
    <th>title 3</th>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
</table>

table {
  border-collapse: seperate;
  border-spacing: 0;
}

tr th,
tr td {
  padding: 20px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}

tr th {
  border-top: 1px solid #000;
}

tr td:nth-child(1),
tr th:nth-child(1) {
  border-left: 1px solid #000;
}

/* border radius */
tr th:nth-child(1) {
  border-radius: 10px 0 0 0;
}

tr th:nth-last-child(1) {
  border-radius: 0 10px 0 0;
}

tr:nth-last-child(1) td:nth-child(1) {
  border-radius: 0 0 0 10px;
}

tr:nth-last-child(1) td:nth-last-child(1) {
  border-radius: 0 0 10px 0;
}

Oder verwenden Sie Box-Shadow, wenn die Tabelle zusammengebrochen ist

Alle Antworten sind viel zu lang. Der einfachste Weg, einem Tabellenelement, das Rahmen als Eigenschaft akzeptiert, einen Rahmenradius hinzuzufügen, besteht darin, einen Rahmenradius mit Überlauf auszuführen: versteckt.

border: xStyle xColor xSize;
border-collapse: collapse;
border-radius: 1em;
overflow: hidden;