Table's title row's rounded corners border

HTML & CSS
1

Hi everyone
Here is my table’s css disign:

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

2

You have 8 th cells but only 7 td cells. This may not be the entire problem but fixing it will be a step in the right direction…

2 Likes
3

Hi there deopit,

try it like this…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>To forum</title>

<style media="screen">
body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }

table {
    width: 80%;
    margin: auto;
    border-spacing: 0;	
    background-color: #fefefe;		
 }

th, td {
    padding: 0.4em 0;
 }

th { 
    border-top: 0.2em solid #6b8e23;;
    border-bottom: 0.2em solid #6b8e23;;
 }

th:first-of-type {
    border-left: 0.2em solid #6b8e23;;
    border-radius: 1em 0 0 0;
 }

th:last-of-type {
    border-right: 0.2em solid #6b8e23;;
    border-radius: 0 1em  0 0;
 }

td {
    border-bottom: 0.2em solid #6b8e23;
    border-right: 0.2em solid #6b8e23;
    text-align: center;
 }

td:first-of-type {
    border-left: 0.2em solid #6b8e23;
 }
  </style>
</head>
<body>

 <table>
  <thead>
   <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
    <th>E</th>
    <th colspan="3">F</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
    <td>f</td>
    <td>g</td>
    <td>h</td>
   </tr>
  </tbody>
 </table>

</body>		
</html>

coothead

3 Likes
4

Border-radius does not apply to tr elements and only applies to table and table-cell elements (td and th) and then only in the border-collapse:separate model (the default).

https://www.w3.org/TR/css-backgrounds-3/#border-radius-tables

Also borders on tr elements only apply in the border-collapse:collapse model anyway.

See the post by @coothead for the solution :slight_smile:

3 Likes
5

Thank you so much Coothead !

6

You are right !
This happened due to confusion rather then ignorance,
The original code is complicated :slight_smile:

7

 
 
        No problem, you’re very welcome. :winky:
 
 
        coothead

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.