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!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Table's title row's rounded corners border 1

Status
Not open for further replies.

lupidol

Programmer
Apr 23, 2008
125
IL
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
 
 https://files.engineering.com/getfile.aspx?folder=110145b2-472d-4718-9c06-d2a39d50b2ad&file=to_forum.gif
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
 
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.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top