Draw <tr> rounded border - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:tr

  1. HOME
  2. HTML CSS
  3. HTML Tag
  4. tr

Description

Draw <tr> rounded border

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>CSS Tables: Rounded corners</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.zui-table {<!--from   ww  w  .j  a  v  a2 s . c o m-->
   border: solid 1px #DDEEEE;
   border-collapse: collapse;
   border-spacing: 0;
}
.zui-table thead th {
   background-color: #DDEFEF;
   border: solid 1px #DDEEEE;
   color: #336B6B;
   padding: 10px;
   text-align: left;
   text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
   border: solid 1px #DDEEEE;
   color: #333;
   padding: 10px;
   text-shadow: 1px 1px 1px #fff;
}
.zui-table-rounded {
   border: none;
}
.zui-table-rounded thead th {
   background-color: #CFAD70;
   border: none;
   text-shadow: 1px 1px 1px #ccc;
   color: #333;
}
.zui-table-rounded thead th:first-child {
   border-radius: 10px 0 0 0;
}
.zui-table-rounded thead th:last-child {
   border-radius: 0 10px 0 0;
}
.zui-table-rounded tbody td {
   border: none;
   border-top: solid 1px #957030;
   background-color: #EED592;
}
.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;
}
      </style> 
 </head> 
 <body> 
  <table class="zui-table 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>Data</td> 
     <td>C</td> 
     <td>6'11"</td> 
     <td>08-13-1990</td> 
     <td>$2,917,000</td> 
    </tr> 
    <tr> 
     <td>Jack</td> 
     <td>Tester</td> 
     <td>5'9"</td> 
     <td>02-07-1989</td> 
     <td>$4,373,604</td> 
    </tr> 
    <tr> 
     <td>Java</td> 
     <td>Developer</td> 
     <td>6'5"</td> 
     <td>02-11-1953</td> 
     <td>$5,895,960</td> 
    </tr> 
    <tr> 
     <td>Mike</td> 
     <td>Tester</td> 
     <td>6'4"</td> 
     <td>05-05-1977</td> 
     <td>$9,000,000</td> 
    </tr> 
    <tr> 
     <td>Jason</td> 
     <td>PF</td> 
     <td>6'11"</td> 
     <td>06-21-1986</td> 
     <td>$7,001,000</td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials