Các góc bảng tròn chỉ CSS

Tôi đã tìm kiếm và tìm kiếm, nhưng không thể tìm thấy giải pháp cho yêu cầu của tôi.

Tôi có một bảng HTML đơn giản. Tôi muốn các góc tròn cho nó, mà không sử dụng hình ảnh hoặc JS, tức là chỉ CSS thuần túy . Như thế này:

Các góc được làm tròn cho các ô góc và 1pxđường viền dày cho các ô.

Cho đến nay tôi có cái này:

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
}

Nhưng điều đó khiến tôi không có bất kỳ biên giới nào cho các ô. Nếu tôi thêm đường viền, chúng không được làm tròn!

Bất kỳ giải pháp?

Có vẻ hoạt động tốt trong FF và Chrome (chưa thử nghiệm bất kỳ cái nào khác) với các đường viền riêng biệt: http://jsfiddle.net/7veZQ/3/

Chỉnh sửa: Đây là một triển khai tương đối rõ ràng cho bản phác thảo của bạn:

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/

Đối với tôi, Giải pháp Twitter Bootstrap có vẻ tốt. Nó không bao gồm IE <9 (không có góc tròn trong IE 8 trở xuống), nhưng tôi nghĩ điều đó không sao, nếu bạn phát triển các Ứng dụng Web tiềm năng.

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>

Bạn có thể chơi với nó tại đây (trên jsFiddle)

Thứ nhất, bạn sẽ cần nhiều hơn -moz-border-radiusnếu bạn muốn hỗ trợ tất cả các trình duyệt. Bạn nên chỉ định tất cả các biến thể, bao gồm cả biến thể thuần túy border-radius, như sau:

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

Thứ hai, để trả lời trực tiếp câu hỏi của bạn, border-radiuskhông thực sự hiển thị đường viền; nó chỉ thiết lập các góc trông như thế nào của đường viền, nếu có.

Để bật đường viền và do đó có được các góc tròn của bạn, bạn cũng cần borderthuộc tính trên các phần tử tdvà của bạn th.

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

Bạn cũng sẽ thấy các góc tròn nếu bạn có màu nền (hoặc đồ họa), mặc dù tất nhiên nó sẽ cần phải có màu nền khác với phần tử xung quanh để các góc tròn có thể nhìn thấy mà không có đường viền.

Cần lưu ý rằng một số trình duyệt cũ hơn không thích đặt border-radiusbảng / ô bảng. Có thể đáng để đặt một <div>bên trong mỗi ô và thay vào đó tạo kiểu. Tuy nhiên, điều này sẽ không ảnh hưởng đến các phiên bản hiện tại của bất kỳ trình duyệt nào (ngoại trừ IE, không hỗ trợ các góc tròn - xem bên dưới)

Cuối cùng, không phải IE hoàn toàn không hỗ trợ border-radius(IE9 beta thì có, nhưng hầu hết người dùng IE sẽ sử dụng IE8 trở xuống). Nếu bạn muốn hack IE để hỗ trợ bán kính đường viền, hãy xem tại http://css3pie.com/

[BIÊN TẬP]

Được rồi, điều này khiến tôi khó chịu, vì vậy tôi đã thực hiện một số thử nghiệm.

Đây là một ví dụ về JSFiddle mà tôi đã chơi cùng

Có vẻ như điều quan trọng mà bạn đã thiếu border-collapse:separate;nằm ở phần tử bảng. Điều này ngăn các ô liên kết các đường viền của chúng với nhau, cho phép chúng chọn bán kính đường viền.

Hy vọng rằng sẽ giúp.

Câu trả lời được chọn là khủng khiếp. Tôi sẽ thực hiện điều này bằng cách nhắm mục tiêu các ô góc của bảng và áp dụng bán kính đường viền tương ứng.

Để có được các góc trên cùng, hãy đặt bán kính đường viền trên loại đầu tiên và cuối cùng của phần tử thứ , sau đó kết thúc bằng cách đặt bán kính đường viền trên loại cuối cùng và đầu tiên của loại td trên loại cuối cùng là tr để có được các góc dưới cùng.

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

Giải pháp tốt nhất mà tôi đã tìm thấy cho các góc tròn và hành vi CSS3 khác cho IE <9 có thể được tìm thấy tại đây: http://css3pie.com/

Tải xuống trình cắm thêm, sao chép vào một thư mục trong cấu trúc giải pháp của bạn. Sau đó, trong biểu định kiểu của bạn, hãy đảm bảo có thẻ hành vi để thẻ kéo vào trình cắm.

Ví dụ đơn giản từ dự án của tôi cung cấp cho tôi các góc tròn, gradient màu và bóng hộp cho bảng của tôi:

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

Đừng lo lắng nếu Visual Studio CSS intellisense của bạn cung cấp cho bạn dấu gạch dưới màu xanh lá cây cho các properites không xác định, nó vẫn hoạt động khi bạn chạy nó. Một số yếu tố không được ghi chép rõ ràng, nhưng các ví dụ khá tốt, đặc biệt là ở trang đầu.

Qua kinh nghiệm cá nhân, tôi nhận thấy rằng không thể làm tròn các góc của ô bảng HTML bằng CSS thuần túy. Có thể làm tròn đường viền ngoài cùng của bảng.

Bạn sẽ phải sử dụng hình ảnh như được mô tả trong hướng dẫn này hoặc bất kỳ hình ảnh nào tương tự :)

Nó hơi thô, nhưng đây là thứ mà tôi tổng hợp lại bao gồm hoàn toàn là CSS và HTML.

• Các góc ngoài bo tròn
• Dòng tiêu đề
• Nhiều hàng dữ liệu

Ví dụ này cũng sử dụng :hoverlớp giả cho mỗi ô dữ liệu <td>. Có thể dễ dàng cập nhật các phần tử để đáp ứng nhu cầu của bạn và di chuột có thể nhanh chóng bị vô hiệu hóa.

(Tuy nhiên, tôi vẫn chưa :hovercó cách làm việc đúng cho các hàng đầy đủ <tr>. Hàng được di chuột qua cuối cùng không hiển thị với các góc tròn ở phía dưới. Tôi chắc chắn rằng có điều gì đó đơn giản đang bị bỏ qua.)

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>

Thêm một <div>trình bao bọc xung quanh bảng và áp dụng CSS sau

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

vào trình bao bọc này.

Để điều chỉnh câu trả lời tuyệt vời của @luke flournoy - và nếu bạn không sử dụng thtrong bảng của mình, đây là tất cả CSS bạn cần để tạo một bảng tròn:

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

Đối với bảng có viền và có thể cuộn, hãy sử dụng điều này (thay thế các biến, $văn bản bắt đầu)

Nếu bạn sử dụng thead, tfoothoặc th, chỉ cần thay thế tr:first-childvà tr-last-childvà tdvới họ.

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

Bạn có thể thử điều này nếu bạn muốn các góc tròn ở mỗi cạnh của bảng mà không chạm vào các ô: 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>

HTML mẫu

<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, dễ dàng chuyển đổi sang CSS, sử dụng 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/

Sau đây là thứ mà tôi đã sử dụng phù hợp với tôi trên các trình duyệt, vì vậy tôi hy vọng nó sẽ giúp ích cho ai đó trong tương lai:

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

Rõ ràng là #contentblockphần này có thể được thay thế / chỉnh sửa khi cần và bạn có thể tìm thấy border-radius.htctệp bằng cách thực hiện tìm kiếm trong Google hoặc trình duyệt web yêu thích của mình.

Điều này css3, chỉ trình duyệt không phải IE <9 mới hỗ trợ nó.

Kiểm tra tại đây , nó lấy thuộc tính vòng cho tất cả các trình duyệt có sẵn

Thêm giữa <head>các thẻ:

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

và trong cơ thể:

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

Tất nhiên là màu, nội dung và định dạng của ô;
nó là về khoảng cách giữa các ô tô màu trong một div. Làm như vậy, đường viền ô / đường viền bảng màu đen thực sự là màu nền của div.
Lưu ý rằng bạn sẽ cần đặt bán kính đường viền div lớn hơn khoảng 2 giá trị so với bán kính đường viền góc ô riêng biệt, để tạo hiệu ứng góc tròn trơn.

Bài học về Đường viền bảng ...

LƯU Ý: Chỉ nên xem mã HTML / CSS dưới đây trong IE. Mã sẽ không được hiển thị chính xác trong Chrome!

Chúng ta cần nhớ rằng:

1. Một bảng có đường viền: đường biên bên ngoài của nó (cũng có thể có bán kính đường viền.)

2. Bản thân các ô CŨNG có đường viền (cũng có thể có bán kính đường viền.)

3. Đường viền bảng và ô có thể ảnh hưởng lẫn nhau:

   Đường viền ô có thể xuyên qua đường viền bảng (nghĩa là: đường viền bảng).

   Để xem hiệu ứng này, hãy sửa đổi các quy tắc kiểu CSS trong đoạn mã dưới đây như sau:
   i. bảng {border-sập: riêng biệt;}
   ii. Xóa các quy tắc kiểu làm tròn các ô góc của bảng.
   iii. Sau đó, chơi với khoảng cách biên để bạn có thể nhìn thấy sự giao thoa.

4. Tuy nhiên, đường viền bảng và đường viền ô có thể được CẬP NHẬT (sử dụng: border-sập: thu gọn;).

5. Khi chúng được thu gọn, các đường viền ô và bảng sẽ can thiệp theo một cách khác:

   Tôi. Nếu đường viền bảng được làm tròn nhưng các đường viền ô vẫn hình vuông, thì hình dạng của ô sẽ được ưu tiên và bảng sẽ mất các góc cong của nó.

   ii. Ngược lại, nếu ô góc cong nhưng đường biên bảng là hình vuông, thì bạn sẽ thấy một góc hình vuông xấu xí bao quanh độ cong của ô góc.

6. Với thuộc tính của ô được ưu tiên, cách để làm tròn bốn góc của bảng sau đó là:

   Tôi. Thu gọn các đường viền trên bảng (sử dụng: border-sập: thu gọn;).

   ii. Đặt độ cong mong muốn của bạn trên các ô góc của bảng.
   iii. Không quan trọng nếu các góc của bảng được làm tròn (nghĩa là: Bán kính đường viền của nó có thể bằng 0).

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