CODEWITHSUNDEEP
htmlcss
Andy Brooke
Andy Brooke

Reputation: 77

Unable to change the border radius of <thead>, <tr> elements

How can I change the radius of thead and tr element? I want my table to have rounded corners but border-radius is not working for thead and tr but its works for the element itself. Here is the CSS.

table{
    width:100%;
    border-radius:5px;
    background:gray;
}
thead {
    border-radius:5px;
    text-align:left;
    background:blue;
}
tr{
    border-radius:5px;
}
th,td{
    padding:5px;
}

Here is the HTML.

   <table>
     <thead>
        <tr>
        <th>No</th>
        <th>Name</th>
        <th>Country</th>
        <th>Age</th>
        </tr>
     </thead>
     <tbody>
        <tr>
        <td>1</td>
        <td>Andy</td>
        <td>UK</td>
        <td>40</td>
        </tr>
      </tbody>
      <tbody> 
    </table>

Upvotes: 1

Views: 2599

Answers (3)

dianis801
dianis801

Reputation: 61

You need to add "th" in the css. Then you have to use "border-radius".

thead th{
border-radius: 10px 10px 10px 10px;
text-align:left;
background:blue;
}

Add "border-radius" in td too.

td{
border-radius: 10px 10px 10px ;
background-color: red;
}

Upvotes: 0

Manny Sanchez
Manny Sanchez

Reputation: 123

radius needs to be in a th or td so i'd do something like this:

table{
    width:100%;
    border-radius:5px;
    background:gray;
    border-collapse: separate;
}

table th {

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    text-align:left;
    background:blue;
}

table td{
    border-radius:5px;
}
th,td{
    padding:5px;   
}

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; 
}
<table>
     <thead>
        <tr>
        <th>No</th>
        <th>Name</th>
        <th>Country</th>
        <th>Age</th>
        </tr>
     </thead>
     <tbody>
        <tr>
        <td>1</td>
        <td>Andy</td>
        <td>UK</td>
        <td>40</td>
        </tr>
      </tbody>
      <tbody> 
    </table>

Upvotes: 1

Mike Poole
Mike Poole

Reputation: 2055

This is fairly easy to do. You need to add the border radius to the correct corners of the first and last th in the row rather than the thead like this:

th:nth-child(1) {
    border-radius: 5px 0px 0px 0px;
}

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

Here is a full code snippet:

table{
    width:100%;
    border-radius:5px;
    background:gray;
}
tr{
    border-radius:5px;
}
th,td{
    padding:5px;
}
th{
text-align:left;
    background:blue;
    color: #fff;
}
th:nth-child(1) {
    border-radius: 5px 0px 0px 0px;
}

th:nth-last-child(1) {
    border-radius: 0px 5px 0px 0px;
}
   <table>
     <thead>
        <tr>
        <th>No</th>
        <th>Name</th>
        <th>Country</th>
        <th>Age</th>
        </tr>
     </thead>
     <tbody>
        <tr>
        <td>1</td>
        <td>Andy</td>
        <td>UK</td>
        <td>40</td>
        </tr>
      </tbody>
      <tbody> 
    </table>

Upvotes: 7

Related Questions