Table's title row's rounded corners border 1

lupidol · Sep 11, 2018

Hi everyone
Here is my table's css disign:

Code:

<!DOCTYPE html>
<html>
<head>
  <title>To forum</title>
  <style>
    table
    {
	width: 80%;
	margin: auto;
	border-collapse: collapse;
			
    }
    tr.title 
    { 
      border-radius: 15px 15px 0px 0px;
      border: 3px solid #6b8e23;; 
    }	
  </style>
</head>
<body>
  <table>
    <tr class="title">
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
      <th colspan="3">F</th>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>e</td>
      <td>d</td>
      <td>e</td>
      <td>f</td>
    </table>
</body>		
</html>

Why do I not get rounded corners?
Why table's cell's borders has been vanished ?
Thanks

feherke · Sep 11, 2018

Hi

If I get your intentions right, this is the only way I know :

CSS:

table {
  width: 80%;
  margin: auto;
  border-spacing: 0;
}
tr.title th {
  border-top: 3px solid #6b8e23;
  border-bottom: 3px solid #6b8e23;
}
tr.title th:first-child {
  border-left: 3px solid #6b8e23;
  border-top-left-radius: 15px;
}
tr.title th:last-child {
  border-right: 3px solid #6b8e23;
  border-top-right-radius: 15px;
}

Feherke.
feherke.github.io

lupidol · Sep 12, 2018

Thanks a lot Feherke !
Title header is exactly what I want as for the rest of the table's borders, I'll try to see if I can make progress.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Table's title row's rounded corners border 1

lupidol

Programmer

feherke

Programmer

lupidol

Programmer

Similar threads

Part and Inventory Search

Sponsor