it-swarm.com.de

Abgerundete Tischecken nur CSS

Ich habe gesucht und gesucht, konnte aber keine Lösung für meine Anforderung finden.

Ich habe eine einfache alte HTML-Tabelle. Ich möchte runde Ecken dafür, ohne mit Bildern oder JS, d. H. Nur reines CSS. So was:

Table layout sketch

Abgerundete Ecken für Eckzellen und 1px dicker Rahmen für die Zellen.

Bisher habe ich folgendes:

table {
  -moz-border-radius: 5px !important;
  border-collapse: collapse !important;
  border: none !important;
}
table th,
table td {
  border: none !important
}
table th:first-child {
  -moz-border-radius: 5px 0 0 0 !important;
}
table th:last-child {
  -moz-border-radius: 0 5px 0 0 !important;
}
table tr:last-child td:first-child {
  -moz-border-radius: 0 0 0 5px !important;
}
table tr:last-child td:last-child {
  -moz-border-radius: 0 0 5px 0 !important;
}
table tr:hover td {
  background-color: #ddd !important
}

Aber das lässt mir keine Grenzen für die Zellen. Wenn ich Ränder hinzufüge, werden sie nicht gerundet!

Irgendwelche Lösungen?

67
Vishal Shah

Scheint in FF und Chrome (hat keine anderen getestet) mit separaten Grenzen gut zu funktionieren: http://jsfiddle.net/7veZQ/3/

Bearbeiten: Hier ist eine relativ saubere Implementierung Ihrer Skizze: 

table {
    border-collapse:separate;
    border:solid black 1px;
    border-radius:6px;
    -moz-border-radius:6px;
}

td, th {
    border-left:solid black 1px;
    border-top:solid black 1px;
}

th {
    background-color: blue;
    border-top: none;
}

td:first-child, th:first-child {
     border-left: none;
}
<table>
    <thead>
    <tr>
        <th>blah</th>
        <th>fwee</th>
        <th>spoon</th>
    </tr>
    </thead>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
</table>

http://jsfiddle.net/MuZzz/3577/

66
RoToRa

Erstens benötigen Sie mehr als nur -moz-border-radius, wenn Sie alle Browser unterstützen möchten. Sie sollten alle Varianten einschließlich plain border-radius wie folgt angeben:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

Zweitens, um Ihre Frage direkt zu beantworten, zeigt border-radius tatsächlich keinen Rahmen an. es legt nur fest, wie die Ecken der Grenze aussehen, falls vorhanden.

Um den Rand einzuschalten und somit abgerundete Ecken zu erhalten, benötigen Sie das border-Attribut für Ihre td- und th-Elemente.

td, th {
   border:solid black 1px;
}

Sie können auch die abgerundeten Ecken sehen, wenn Sie eine Hintergrundfarbe (oder Grafik) haben, obwohl dies natürlich eine andere Hintergrundfarbe als das umgebende Element sein muss, damit die abgerundeten Ecken ohne Rahmen sichtbar sind.

Es ist erwähnenswert, dass einige ältere Browser border-radius nicht gerne in Tabellen/Tabellenzellen einfügen. Es kann sich lohnen, einen <div> in jede Zelle einzufügen und stattdessen das zu gestalten. Dies sollte sich jedoch nicht auf die aktuellen Versionen eines Browsers auswirken (außer IE, der keine abgerundeten Ecken unterstützt - siehe unten).

Nicht, dass IE border-radius überhaupt nicht unterstützt (die Betaversion von IE9 tut dies, aber die meisten IE - Benutzer sind auf IE8 oder weniger). Wenn Sie IE hacken möchten, um den Grenzradius zu unterstützen, schauen Sie unter http://css3pie.com/ nach.

[BEARBEITEN]

Okay, das hat mich gestört, also habe ich ein paar Tests gemacht.

Hier ist ein JSFiddle-Beispiel, mit dem ich gespielt habe

Es scheint, als sei das kritische Element, das Sie vermisst haben, border-collapse:separate; im Tabellenelement. Dadurch werden die Zellen daran gehindert, ihre Grenzen miteinander zu verknüpfen, sodass sie den Grenzradius erfassen können.

Hoffentlich hilft das.

17
Spudley

Für mich sieht die Twitter Bootstrap Solution gut aus. Es schließt IE <9 aus (keine runden Ecken in IE 8 und darunter), aber das ist OK. Ich denke, wenn Sie prospektive Web-Apps entwickeln. 

CSS/HTML:

table { 
    border: 1px solid #ddd;
    border-collapse: separate;
    border-left: 0;
    border-radius: 4px;
    border-spacing: 0px;
}
thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    border-collapse: separate;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
th, td {
    padding: 5px 4px 6px 4px; 
    text-align: left;
    vertical-align: top;
    border-left: 1px solid #ddd;    
}
td {
    border-top: 1px solid #ddd;    
}
thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
    border-radius: 4px 0 0 0;
}
thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
    border-radius: 0 0 0 4px;
}
<table>
  <thead>
    <tr><th>xxx</th><th>xxx</th><th>xxx</th></tr>
  </thead>
  <tbody>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
  </tbody>
</table>

Sie können mit diesem hier (auf jsFiddle) spielen.

15
Lars Schinkel

Durch persönliche Erfahrung habe ich festgestellt, dass es nicht möglich ist, Ecken einer HTML-Tabelle cell mit reinem CSS abzurunden. Es ist möglich, die äußerste Grenze eines Tisches abzurunden.

Sie müssen Bilder verwenden, wie in dieses Tutorial oder Ähnliches beschrieben. :)

6
Kyle

Die beste Lösung, die ich für abgerundete Ecken und anderes CSS3-Verhalten für IE <9 gefunden habe, kann hier gefunden werden: http://css3pie.com/

Laden Sie das Plug-In herunter und kopieren Sie es in ein Verzeichnis in Ihrer Lösungsstruktur. Vergewissern Sie sich dann in Ihrem Stylesheet, dass das Verhaltens-Tag vorhanden ist, damit es das Plug-in zieht.

Ein einfaches Beispiel aus meinem Projekt, das mir abgerundete Ecken, Farbverlauf und Box-Schatten für meinen Tisch gibt:

.table-canvas 
{
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    overflow:hidden;
    border-radius: 10px;
    -pie-background: linear-gradient(#ece9d8, #E5ECD8);   
    box-shadow: #666 0px 2px 3px;
    behavior: url(Include/PIE.htc);
    overflow: hidden;
}

Machen Sie sich keine Sorgen, wenn Ihr Visual Studio-CSS-Intellisense die grüne Unterstreichung für unbekannte Eigenschaften anzeigt. Es funktioniert auch, wenn Sie es ausführen. Einige Elemente sind nicht sehr klar dokumentiert, aber die Beispiele sind ziemlich gut, besonders auf der Titelseite.

5

Die ausgewählte Antwort ist schrecklich. Ich würde dies implementieren, indem ich die Ecktabellenzellen anvisiere und den entsprechenden Grenzradius anwende. 

Um die oberen Ecken zu erhalten, stellen Sie den Grenzradius auf den ersten und letzten Typ des Elements th ein, und beenden Sie den Grenzradius auf den letzten und den ersten td Typ auf den letzten Typ tr um die unteren Ecken zu erhalten.

th:first-of-type {
  border-top-left-radius: 10px;
}
th:last-of-type {
  border-top-right-radius: 10px;
}
tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}
tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}
3
Luke Flournoy

Es ist ein bisschen grob, aber hier habe ich etwas zusammengestellt, das ausschließlich aus CSS und HTML besteht.

  • Außenecken abgerundet
  • Kopfzeile
  • Mehrere Datenzeilen

In diesem Beispiel wird auch die :hover-Pseudoklasse für jede Datenzelle <td> verwendet. Elemente können einfach an Ihre Bedürfnisse angepasst werden, und der Schwebeflug kann schnell deaktiviert werden.

(Allerdings habe ich den :hover noch nicht erhalten, um für vollständige Zeilen <tr> richtig zu funktionieren. Die letzte angehängte Zeile wird nicht mit abgerundeten Ecken an der Unterseite angezeigt. Ich bin sicher, dass etwas einfaches übersehen wird.)

table.dltrc {
  width: 95%;
  border-collapse: separate;
  border-spacing: 0px;
  border: solid black 2px;
  border-radius: 8px;
}

tr.dlheader {
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  padding: 2px
}

td.dlheader {
  background: #d9d9d9;
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  border-radius: 0px;
  padding: 2px
}

tr.dlinfo,
td.dlinfo {
  text-align: center;
  border-left: solid black 1px;
  border-top: solid black 1px;
  padding: 2px
}

td.dlinfo:first-child,
td.dlheader:first-child {
  border-left: none;
}

td.dlheader:first-child {
  border-radius: 5px 0 0 0;
}

td.dlheader:last-child {
  border-radius: 0 5px 0 0;
}


/*===== hover effects =====*/


/*tr.hover01:hover,
tr.hover02:hover {
  background-color: #dde6ee;
}*/


/* === ROW HOVER === */


/*tr.hover02:hover:last-child {
  background-color: #dde6ee;
  border-radius: 0 0 6px 6px;
  }*/


/* === CELL HOVER === */

td.hover01:hover {
  background-color: #dde6ee;
}

td.hover02:hover {
  background-color: #dde6ee;
}

td.hover02:first-child {
  border-radius: 0 0 0 6px;
}

td.hover02:last-child {
  border-radius: 0 0 6px 0;
}
<body style="background:white">
  <br>
  <center>
    <table class="dltrc" style="background:none">
      <tbody>
        <tr class="dlheader">
          <td class="dlheader">Subject</td>
          <td class="dlheader">Title</td>
          <td class="dlheader">Format</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">One</td>
          <td class="dlinfo hover01">Two</td>
          <td class="dlinfo hover01">Three</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Four</td>
          <td class="dlinfo hover01">Five</td>
          <td class="dlinfo hover01">Six</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Seven</td>
          <td class="dlinfo hover01">Eight</td>
          <td class="dlinfo hover01">Nine</td>
        </tr>
        <tr class="dlinfo2 hover02">
          <td class="dlinfo hover02">Ten</td>
          <td class="dlinfo hover01">Eleven</td>
          <td class="dlinfo hover02">Twelve</td>
        </tr>
      </tbody>
    </table>
  </center>
</body>

1
K. Parker

Beispiel-HTML

<table class="round-corner" aria-describedby="caption">
    <caption id="caption">Table with rounded corners</caption>
    <thead>
        <tr>
            <th scope="col">Head1</th>
            <th scope="col">Head2</th>
            <th scope="col">Head3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
        </tr>
    </tfoot>
</table>

SCSS, leicht in CSS konvertiert, verwenden Sie sassmeister.com

// General CSS
table,
th,
td {
    border: 1px solid #000;
    padding: 8px 12px;
}

.round-corner {
    border-collapse: collapse;
    border-style: hidden;
    box-shadow: 0 0 0 1px #000; // fake "border"
    border-radius: 4px;

    // Maybe there's no THEAD after the caption?
    caption + tbody {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:first-child {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:last-child {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    thead {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tfoot {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    // Reset tables inside table
    table tr th,
    table tr td {
        border-radius: 0;
    }
}

http://jsfiddle.net/MuTLY/xqrgo466/

0
Leandro Barbosa

Lektion in Tabellenrahmen ...

HINWEIS: Der folgende HTML/CSS-Code sollte nur in IE angezeigt werden. Der Code wird in Chrome nicht korrekt gerendert!

Wir müssen uns daran erinnern: 

  1. Eine Tabelle hat eine Umrandung: ihre äußere Umrandung (die auch einen Umrandungsradius haben kann).

  2. Die Zellen selbst haben auch Grenzen (die ebenfalls einen Grenzradius haben können.)

  3. Die Tabellen- und Zellengrenzen können sich gegenseitig beeinflussen: 

    Die Zellengrenze kann die Tabellengrenze durchdringen (dh Tabellengrenze). 

    Um diesen Effekt zu sehen, ändern Sie die CSS-Stilregeln im folgenden Code wie folgt:
    ich. table {border-collapse: separate;}
    ii. Löschen Sie die Stilregeln, die die Eckzellen der Tabelle umgeben.
    iii. Spielen Sie dann mit dem Randabstand, damit Sie die Interferenz sehen können.

  4. Der Tabellenrahmen und der Zellenrahmen können jedoch COLLAPSED sein (using: border-collapse: collapse;).

  5. Wenn sie zusammengeklappt werden, stören die Zellen- und Tabellenränder auf unterschiedliche Weise:

    ich. Wenn der Tabellenrand abgerundet ist, die Zellenränder jedoch quadratisch bleiben, hat die Form der Zelle Vorrang und der Tisch verliert seine gekrümmten Ecken. 

    ii. Wenn umgekehrt die Eckzellen gekrümmt sind, die Tabellengrenze jedoch quadratisch ist, wird eine hässliche quadratische Ecke angezeigt, die an die Krümmung der Eckzellen grenzt. 

  6. Da das Attribut dieser Zelle Vorrang hat, können Sie die vier Ecken der Tabelle abrunden. 

    ich. Rahmen in der Tabelle reduzieren (mit: border-collapse: collapse;). 

    ii. Legen Sie die gewünschte Krümmung in den Eckzellen der Tabelle fest.
    iii. Es spielt keine Rolle, ob die Ecken des Tisches abgerundet sind (dh der Randradius kann Null sein). 

			.zui-table-rounded {
				border: 2px solid blue;
				/*border-radius: 20px;*/
				
				border-collapse: collapse;
				border-spacing: 0px;
			}
						
			.zui-table-rounded thead th:first-child {
				border-radius: 30px 0 0 0;
			}
			
			.zui-table-rounded thead th:last-child {
				border-radius: 0 10px 0 0;
			}
			
			.zui-table-rounded tbody tr:last-child td:first-child {
				border-radius: 0 0 0 10px;
			}
			
			.zui-table-rounded tbody tr:last-child td:last-child {
				border-radius: 0 0 10px 0;
			}
			
			
			.zui-table-rounded thead th {
				background-color: #CFAD70;
			}
			
			.zui-table-rounded tbody td {
				border-top: solid 1px #957030;
				background-color: #EED592;
			}
			<table class="zui-table-rounded">
			<thead>
				<tr>
					<th>Name</th>
					<th>Position</th>
					<th>Height</th>
					<th>Born</th>
					<th>Salary</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>DeMarcus Cousins</td>
					<td>C</td>
					<td>6'11"</td>
					<td>08-13-1990</td>
					<td>$4,917,000</td>
				</tr>
				<tr>
					<td>Isaiah Thomas</td>
					<td>PG</td>
					<td>5'9"</td>
					<td>02-07-1989</td>
					<td>$473,604</td>
				</tr>
				<tr>
					<td>Ben McLemore</td>
					<td>SG</td>
					<td>6'5"</td>
					<td>02-11-1993</td>
					<td>$2,895,960</td>
				</tr>
				<tr>
					<td>Marcus Thornton</td>
					<td>SG</td>
					<td>6'4"</td>
					<td>05-05-1987</td>
					<td>$7,000,000</td>
				</tr>
				<tr>
					<td>Jason Thompson</td>
					<td>PF</td>
					<td>6'11"</td>
					<td>06-21-1986</td>
					<td>$3,001,000</td>
				</tr>
			</tbody>
		</table>

0
IqbalHamid

Das Folgende ist etwas, das ich für Browser verwendet habe. Ich hoffe, es hilft in Zukunft jemandem:

#contentblock th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 6px 0 0 0;
}

#contentblock th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 6px 0 0;
}
#contentblock tr:last-child td:last-child {
     border-radius: 0 0 6px 0;
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 6px 0;
 }

#contentblock tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 0 6px;
}

Natürlich kann der #contentblock-Teil bei Bedarf ersetzt/bearbeitet werden, und Sie können die border-radius.htc-Datei finden, indem Sie eine Suche in Google oder in Ihrem bevorzugten Webbrowser durchführen.

0
Ansipants

Verwenden Sie dies für eine umrandete und scrollbare Tabelle (ersetzen Sie Variablen, $-Starttexte).

Wenn Sie thead, tfoot oder th verwenden, ersetzen Sie einfach tr:first-child und tr-last-child und td durch diese.

#table-wrap {
  border: $border solid $color-border;
  border-radius: $border-radius;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
table td { border: $border solid $color-border; }
table td:first-child { border-left: none; }
table td:last-child { border-right: none; }
table tr:first-child td { border-top: none; }
table tr:last-child td { border-bottom: none; }
table tr:first-child td:first-child { border-top-left-radius: $border-radius; }
table tr:first-child td:last-child { border-top-right-radius: $border-radius; }
table tr:last-child td:first-child { border-bottom-left-radius: $border-radius; }
table tr:last-child td:last-child { border-bottom-right-radius: $border-radius; }

HTML:

<div id=table-wrap>
  <table>
    <tr>
       <td>1</td>
       <td>2</td>
    </tr>
    <tr>
       <td>3</td>
       <td>4</td>
    </tr>
  </table>
</div>
0
brauliobo

Sie können dies versuchen, wenn Sie die abgerundeten Ecken auf jeder Seite des Tisches wünschen, ohne die Zellen zu berühren: http://jsfiddle.net/7veZQ/3983/

<table>
    <tr class="first-line"><td>A</td><td>B</td></tr>
    <tr class="last-line"><td>C</td><td>D</td></tr>
</table>
0
Younes Hadry

Dies ist css3. Nur aktuelle Nicht-IE <9-Browser unterstützen es.

Check out here , leitet die Round-Eigenschaft für alle verfügbaren Browser ab

0
BiAiB

Fügen Sie zwischen <head>-Tags hinzu:

<style>
  td {background: #ffddaa; width: 20%;}
</style>

und im Körper:

<div style="background: black; border-radius: 12px;">
  <table width="100%" style="cell-spacing: 1px;">
    <tr>
      <td style="border-top-left-radius: 10px;">
        Noordwest
      </td>
      <td>&nbsp;</td>
      <td>Noord</td>
      <td>&nbsp;</td>
      <td style="border-top-right-radius: 10px;">
        Noordoost
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>West</td>
      <td>&nbsp;</td>
      <td>Centrum</td>
      <td>&nbsp;</td>
      <td>Oost</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td style="border-bottom-left-radius: 10px;">
        Zuidwest
      </td>
      <td>&nbsp;</td>
      <td>Zuid</td>
      <td>&nbsp;</td>
      <td style="border-bottom-right-radius: 10px;">
        Zuidoost
      </td>
    </tr>
  </table>
</div>

Die Zellenfarbe, der Inhalt und die Formatierung sind zum Beispiel selbstverständlich;
Es geht um das Beabstanden von farbgefüllten Zellen innerhalb eines div . Dabei sind die schwarzen Zellenränder/Tabellenränder tatsächlich die div-Hintergrundfarbe.
Beachten Sie, dass Sie den div-border-radius um etwa 2 Werte größer als die separaten Radien der Zelleneckränder einstellen müssen, um einen glatten abgerundeten Eckeneffekt zu erzielen.

0