Nur abgerundete Tischecken 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 Bilder oder JS zu verwenden, dh nur reines CSS . So was:

Abgerundete Ecken für Eckzellen und 1pxdicker Rand 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 mich ohne Grenzen für die Zellen. Wenn ich Rahmen hinzufüge, werden diese nicht gerundet!

Irgendwelche Lösungen?

Scheint in FF und Chrome (haben keine anderen getestet) mit separaten Rahmen 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/

Für mich sieht die Twitter Bootstrap Solution gut aus. Es schließt IE <9 aus (keine runden Ecken in IE 8 und niedriger), aber das ist in Ordnung, denke ich, wenn Sie potenzielle 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>

Damit kannst du hier spielen (auf jsFiddle)

Erstens benötigen Sie mehr als nur, -moz-border-radiuswenn 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 wird zur direkten Beantwortung Ihrer Frage border-radiuskein Rand angezeigt. Es wird nur festgelegt, wie die Ecken des Randes aussehen, falls vorhanden.

Um den Rand einzuschalten und so Ihre abgerundeten Ecken zu erhalten, benötigen Sie auch das borderAttribut für Ihre tdund thElemente.

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

Sie werden auch die abgerundeten Ecken sehen, wenn Sie eine Hintergrundfarbe (oder Grafik) haben, obwohl es natürlich eine andere Hintergrundfarbe als das umgebende Element geben müsste, damit die abgerundeten Ecken ohne Rand sichtbar sind.

Es ist erwähnenswert, dass einige ältere Browser nicht gerne border-radiusTabellen / Tabellenzellen anlegen. Es kann sich lohnen, <div>in jede Zelle eine zu setzen und diese stattdessen zu stylen. Dies sollte jedoch keine Auswirkungen auf aktuelle Versionen von Browsern haben (außer IE, das abgerundete Ecken überhaupt nicht unterstützt - siehe unten).

Schließlich nicht, dass IE überhaupt nicht unterstützt border-radius(IE9 Beta, aber die meisten IE-Benutzer werden auf IE8 oder weniger sein). Wenn Sie den IE hacken möchten, um den Randradius zu unterstützen, besuchen Sie http://css3pie.com/

[BEARBEITEN]

Okay, das hat mich nervt, also habe ich einige Tests durchgeführt.

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

Es scheint, als ob das Kritische, das Sie vermisst haben, border-collapse:separate;im Tabellenelement war. Dies verhindert, dass die Zellen ihre Ränder miteinander verbinden, wodurch sie den Randradius erfassen können.

Hoffentlich hilft das.

Die ausgewählte Antwort ist schrecklich. Ich würde dies implementieren, indem ich auf die Eckentabellenzellen ziele und den entsprechenden Randradius anwende.

Um die oberen Ecken zu erhalten, legen Sie den Randradius für das erste und letzte vom Typ des th- Elements fest. Stellen Sie zum Abschluss den Randradius für das letzte und das erste vom Typ td am letzten vom Typ tr ein , 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;
}

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

Laden Sie das Plug-In herunter und kopieren Sie es in ein Verzeichnis in Ihrer Lösungsstruktur. Stellen Sie dann in Ihrem Stylesheet sicher, dass das Behaviour-Tag vorhanden ist, damit das Plug-In eingezogen wird.

Einfaches Beispiel aus meinem Projekt, das mir abgerundete Ecken, Farbverlauf und Kastenschatten für meine Tabelle 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 Ihnen die grüne Unterstreichung für unbekannte Eigenschaften gibt. Es funktioniert immer noch, wenn Sie es ausführen. Einige der Elemente sind nicht sehr klar dokumentiert, aber die Beispiele sind ziemlich gut, insbesondere auf der Titelseite.

Durch persönliche expeirence habe ich festgestellt , dass es zu runde Ecken einer HTML - Tabelle nicht möglich Zelle mit reinem CSS. Das Abrunden des äußersten Randes eines Tisches ist möglich.

Sie müssen auf die Verwendung von Bildern wie in diesem Tutorial oder ähnlichem zurückgreifen :)

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

• Äußere Ecken abgerundet
• Kopfzeile
• Mehrere Datenzeilen

In diesem Beispiel wird auch die :hoverPseudoklasse für jede Datenzelle verwendet <td>. Elemente können einfach aktualisiert werden, um Ihren Anforderungen zu entsprechen, und der Hover kann schnell deaktiviert werden.

(Ich habe es jedoch noch nicht geschafft :hover, ordnungsgemäß für vollständige Zeilen zu arbeiten <tr>. Die letzte schwebende Zeile wird nicht mit abgerundeten Ecken am unteren Rand 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>

Fügen Sie einen <div>Wrapper um die Tabelle hinzu und wenden Sie das folgende CSS an

border-radius: x px;
overflow: hidden;
display: inline-block;

zu diesem Wrapper.

Um die brillante Antwort von @luke flournoy anzupassen - und wenn Sie sie nicht thin Ihrer Tabelle verwenden, finden Sie hier das gesamte CSS, das Sie zum Erstellen einer abgerundeten Tabelle benötigen:

.my_table{
border-collapse: separate;
border-spacing: 0;
border: 1px solid grey;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

.my_table tr:first-of-type {
  border-top-left-radius: 10px;
}

.my_table tr:first-of-type td:last-of-type {
  border-top-right-radius: 10px;
}

.my_table tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}

.my_table tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}

Verwenden Sie diese Option für eine umrandete und scrollbare Tabelle (Variablen ersetzen, $Texte starten)

Wenn Sie verwenden thead, tfootoder th, ersetzen Sie einfach tr:first-childund tr-last-childund tdmit ihnen.

#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>

Sie können dies versuchen, wenn Sie die abgerundeten Ecken auf jeder Seite der Tabelle möchten, 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>

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, einfach 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/

Folgendes habe ich verwendet, das für mich in allen Browsern funktioniert hat, und ich hoffe, es hilft jemandem in der Zukunft:

#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 #contentblockTeil nach Bedarf ersetzt / bearbeitet werden, und Sie können die border-radius.htcDatei finden, indem Sie eine Suche in Google oder Ihrem bevorzugten Webbrowser durchführen.

Dies bedeutet css3, dass dies nur von aktuellen Nicht-IE <9-Browsern unterstützt wird.

Schauen Sie hier nach , es leitet die runde Eigenschaft für alle verfügbaren Browser ab

Zwischen <head>Tags hinzufügen:

<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 natürlich zum Beispiel;
Es geht darum, farbgefüllte Zellen innerhalb eines Divs zu beabstanden. Dabei sind die schwarzen Zellenränder / Tabellenränder tatsächlich die div-Hintergrundfarbe.
Beachten Sie, dass Sie den Div-Rand-Radius um etwa 2 Werte größer als die Radien der separaten Zelleneckränder festlegen müssen, um einen glatten Effekt für abgerundete Ecken zu erzielen.

Lektion in Tabellengrenzen ...

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

Wir müssen uns daran erinnern:

1. Eine Tabelle hat einen Rand: ihre äußere Grenze (die auch einen Randradius haben kann).

2. Die Zellen selbst haben AUCH Ränder (die auch einen Randradius haben können).

3. Die Tabellen- und Zellenränder können sich gegenseitig stören:

   Der Zellenrand kann den Tabellenrand durchdringen (dh: Tabellengrenze).

   Um diesen Effekt zu sehen, ändern Sie die CSS-Stilregeln im folgenden Code wie folgt:
   i. Tabelle {Border-Collapse: Separat;}
   ii. Löschen Sie die Stilregeln, die die Eckzellen der Tabelle abrunden.
   iii. Spielen Sie dann mit dem Randabstand, damit Sie die Interferenz sehen können.

4. Der Tabellenrand und die Zellenränder können jedoch KOLLAPSIERT werden (unter Verwendung von: border-Collapse: Collapse;).

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

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

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

6. Da das Attribut der Zelle Vorrang hat, können Sie die vier Ecken des Tisches dann wie folgt abrunden:

   ich. Reduzieren von Rändern in der Tabelle (mit: border-Collapse: Collapse;).

   ii. Stellen Sie die gewünschte Krümmung in den Eckzellen der Tabelle ein.
   iii. Es spielt keine Rolle, ob die Ecken des Tisches abgerundet sind (dh sein 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>

CSS:

table {
  border: 1px solid black;
  border-radius: 10px;
  border-collapse: collapse;
  overflow: hidden;
}

td {
  padding: 0.5em 1em;
  border: 1px solid black;
}