Yuvarlak masa köşeleri yalnızca CSS

Aradım ve araştırdım, ancak ihtiyacım için bir çözüm bulamadım.

Düz bir HTML tablom var. Ben, bunun için yuvarlak köşeler istiyorum olmadan , görüntüleri veya JS kullanarak saf yani sadece CSS . Bunun gibi:

Köşe hücreler için yuvarlatılmış köşeler 1pxve hücreler için kalın kenarlık.

Şimdiye kadar şuna sahibim:

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
}

Ama bu beni hücreler için sınır tanımıyor. Kenarlıklar eklersem, bunlar yuvarlak değildir!

Herhangi bir çözüm var mı?

FF ve Chrome'da (başka hiçbirini test etmemiş) ayrı sınırlarla iyi çalışıyor gibi görünüyor: http://jsfiddle.net/7veZQ/3/

Düzenleme: İşte eskizinizin nispeten temiz bir uygulaması:

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/

Benim için Twitter Önyükleme Çözümü iyi görünüyor. IE <9'u hariç tutar (IE 8'de yuvarlak köşeler yoktur), ancak sorun değil, eğer ileriye dönük Web Uygulamaları geliştirirseniz.

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>

Bununla burada oynayabilirsiniz (jsFiddle'da)

Öncelikle, -moz-border-radiustüm tarayıcıları desteklemek istemenizden daha fazlasına ihtiyacınız olacak. Sade dahil tüm çeşitleri border-radiusaşağıdaki gibi belirtmelisiniz :

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

İkinci olarak, sorunuzu doğrudan yanıtlamak, border-radiusaslında bir sınır göstermez; sadece eğer varsa köşelerin sınırın nasıl görüneceğini belirler.

Sınırı açmak ve böylece yuvarlatılmış köşeleri elde etmek için, ayrıca ve elemanlarınızdaki borderözniteliğe de ihtiyacınız var .tdth

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

Bir arka plan renginiz (veya grafiğiniz) varsa yuvarlatılmış köşeleri de göreceksiniz, ancak elbette yuvarlatılmış köşelerin kenarlıksız görünmesi için çevreleyen öğeden farklı bir arka plan rengi olması gerekir.

Bazı eski tarayıcıların border-radiustablo / tablo hücreleri koymayı sevmediğini belirtmek gerekir . <div>Her hücrenin içine bir tane koyup bunun yerine onu şekillendirmeye değer olabilir . Ancak bu, herhangi bir tarayıcının mevcut sürümlerini etkilememelidir (yuvarlatılmış köşeleri hiç desteklemeyen IE hariç - aşağıya bakın)

Son olarak, border-radiusIE'nin hiç desteklemediğinden değil (IE9 beta desteklemektedir , ancak çoğu IE kullanıcısı IE8 veya daha azını kullanacaktır). Sınır yarıçapını desteklemek için IE'yi kesmek istiyorsanız, http://css3pie.com/ adresine bakın.

[DÜZENLE]

Tamam, bu beni rahatsız ediyordu, bu yüzden bazı testler yaptım.

İşte oynadığım bir JSFiddle örneği

Görünüşe göre kaçırdığınız kritik şey border-collapse:separate;masa öğesindeydi. Bu, hücrelerin sınırlarını birbirine bağlamasını durdurur ve bu da onların sınır yarıçapını almalarına olanak tanır.

Umarım yardımcı olur.

Seçilen cevap korkunç. Bunu, köşe tablo hücrelerini hedefleyerek ve ilgili kenarlık yarıçapını uygulayarak gerçekleştirirdim.

Üst köşeleri almak için, birinci ve türüne son sınır yarıçapı ayarlamak inci elemanlarının, daha sonra ilk son sınır yarıçapı ayarlayarak bitirmek ve td tipi son on tip tr alt köşeleri alır.

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;
}

Yuvarlatılmış köşeler ve IE <9 için diğer CSS3 davranışları için bulduğum en iyi çözüm burada bulunabilir: http://css3pie.com/

Eklentiyi indirin, çözüm yapınızdaki bir dizine kopyalayın. Ardından stil sayfanızda, eklentiyi çekebilmesi için davranış etiketine sahip olduğunuzdan emin olun.

Masam için bana yuvarlatılmış köşeler, renk gradyanı ve kutu gölgesi veren projemden basit bir örnek:

.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;
}

Visual Studio CSS intellisense, bilinmeyen özellikler için size yeşil alt çizgi veriyorsa endişelenmeyin, çalıştırdığınızda yine de çalışır. Bazı unsurlar çok açık bir şekilde belgelenmemiştir, ancak örnekler özellikle ön sayfada oldukça iyidir.

Kişisel deneyimim sayesinde, bir HTML tablo hücresinin köşelerini saf CSS ile yuvarlamanın mümkün olmadığını anladım . Bir tablonun en dış kenarlığını yuvarlamak mümkündür.

Bu öğreticide açıklanan resimleri veya benzerlerini kullanmak zorunda kalacaksınız :)

Biraz kaba ama burada tamamen CSS ve HTML'den oluşan bir araya getirdiğim bir şey var.

• Dış köşeler yuvarlatılmış
• Üst bilgi satırı
• Birden çok veri satırı

Bu örnek aynı zamanda :hoverher veri hücresi için sözde sınıftan da yararlanır <td>. Öğeler ihtiyaçlarınızı karşılayacak şekilde kolayca güncellenebilir ve fareyle üzerine gelme hızla devre dışı bırakılabilir.

(Bununla birlikte, :hovertam satırlar için düzgün çalışmayı henüz almadım <tr>. Son vurgulu satır, altta yuvarlatılmış köşeler ile görüntülenmiyor. Eminim gözden kaçan basit bir şey vardır.)

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>

<div>Tablonun etrafına bir sarmalayıcı ekleyin ve aşağıdaki CSS'yi uygulayın

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

bu paketleyiciye.

@Luke flournoy'un parlak cevabını uyarlamak için - ve masanızda kullanmıyorsanız th, yuvarlak bir masa yapmak için ihtiyacınız olan tüm CSS'ler burada:

.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;
}

Sınırlı ve kaydırılabilir bir tablo için bunu kullanın (değişkenleri, $başlangıç ​​metinlerini değiştirin )

Eğer kullanırsanız thead, tfootya thsadece değiştirin tr:first-childve tr-last-childve tdonlarla.

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

Hücrelere dokunmadan masanın her iki yanındaki yuvarlatılmış köşeleri istiyorsanız bunu deneyebilirsiniz: 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>

Örnek 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, kolayca CSS'ye dönüştürülür, sassmeister.com'u kullanın

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

Aşağıdakiler, tarayıcılarda benim için işe yarayan kullandığım bir şeydir, bu nedenle gelecekte birine yardımcı olacağını umuyorum:

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

Açıkçası, #contentblockbölüm gerektiği gibi değiştirilebilir / düzenlenebilir ve border-radius.htcdosyayı Google'da veya favori web tarayıcınızda bir arama yaparak bulabilirsiniz .

Bu css3, yalnızca yeni IE <9 olmayan tarayıcı bunu destekleyecektir.

Buraya göz atın , mevcut tüm tarayıcılar için round özelliğini türetir.

<head>Etiketler arasına ekleyin:

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

ve vücutta:

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

Hücre rengi, içeriği ve biçimlendirmesi elbette örneğin;
bir div içindeki renk dolu hücrelerin aralanması ile ilgilidir. Bunu yaparken, siyah hücre kenarlıkları / tablo kenarlığı gerçekte div arka plan rengidir.
Düzgün bir yuvarlak köşe efekti elde etmek için div-border-radius'u ayrı hücre köşe kenarlık yarıçapından yaklaşık 2 değer daha büyük ayarlamanız gerektiğini unutmayın.

Tablo Kenarlıkları ile İlgili Ders ...

NOT: Aşağıdaki HTML / CSS kodu yalnızca IE'de görüntülenmelidir. Kod, Chrome'da doğru şekilde oluşturulmayacaktır!

Bunu hatırlamamız gerekiyor:

1. Bir tablonun bir sınırı vardır: dış sınırı (aynı zamanda bir kenarlık yarıçapına sahip olabilir).

2. Hücrelerin kendilerinin de sınırları vardır (ki bu da bir sınır yarıçapına sahip olabilir.)

3. Tablo ve hücre kenarlıkları birbiriyle çakışabilir:

   Hücre sınırı, tablo sınırını (yani: tablo sınırı) delebilir.

   Bu etkiyi görmek için, aşağıdaki kodda bulunan CSS stil kurallarını aşağıdaki gibi değiştirin:
   i. tablo {border-collapse: ayrı;}
   ii. Tablonun köşe hücrelerini çevreleyen stil kurallarını silin.
   iii. Ardından paraziti görebilmek için sınır aralığı ile oynayın.

4. Bununla birlikte, tablo sınırı ve hücre kenarlıkları DARALTILABİLİR (kullanılarak: border-collapse: collapse;).

5. Daraltıldıklarında hücre ve tablo kenarlıkları farklı bir şekilde karışır:

   ben. Tablo kenarlığı yuvarlatılmış ancak hücre kenarlıkları kare kalırsa, hücrenin şekli öncelik kazanır ve tablonun eğimli köşeleri kaybolur.

   ii. Tersine, köşe hücreleri kavisliyse ancak tablo sınırı kare ise, o zaman köşe hücrelerinin eğriliğini çevreleyen çirkin bir kare köşe göreceksiniz.

6. Hücrenin özniteliğinin öncelikli olduğu göz önüne alındığında, tablonun dört köşesini yuvarlamanın yolu şudur:

   ben. Tablodaki daraltılmış kenarlıklar (kullanarak: border-collapse: collapse;).

   ii. Tablonun köşe hücrelerinde istediğiniz eğriliği ayarlamak.
   iii. Tablonun köşelerinin yuvarlatılmış olması önemli değildir (yani: Sınır yarıçapı sıfır olabilir).

			.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;
}