Css html table -

Hi,
I am trying to get a round borders HTML table.
For Some reason it ignores my radius setting: border-radius:9px;

table {
  width: 100%;
  border-radius:9px;
  height: 200px;
  text-align: center;
direction:rtl;
}
th {
  padding: 3px 2px;
    border-left:solid white 1px;
   border-right:solid white 1px;
    border-top:solid white 1px;
background: url(https://jackrugile.com/images/misc/noise-diagonal.png), linear-gradient(#777, #444);
	position: relative;
font-size: 15px;
font-weight: 500;
border-radius:9px;
}
td {
	padding: 5px 2px;
	position: relative;
font-size: 14px;
border:solid white 1px;
border-radius:6px;
}
table tr:hover td {
  background-color: #ff7560 !important
}


I think it’s because you also have a padding placed on it. The border radius might be affecting the table itself and is outside of the visible borders of the table.

Best I can do is this, actually you need to make the change on the table level.

<pre><span><style>

table {
width: 100%;
height: 200px;
text-align: center;
direction:rtl;
border-collapse: collapse;
border-radius: 9px;
overflow: hidden;
}

th {
padding: 3px 2px;
background: url(https://jackrugile.com/images/misc/noise-diagonal.png), linear-gradient(#777, #444);
position: relative;
font-size: 15px;
font-weight: 500;
border: solid white 3px;
}

td {
padding: 5px 2px;
position: relative;
font-size: 14px;
border: solid white 3px;
}

table tr:hover td {
  background-color: #ff7560 !important
}

3 Likes

Thank you,

Could you explain please?

<table class="darkTable">
<thead>
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
<th>H4</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:40%">cell1</td>
<td style="width:18%">cell2</td>
<td style="width:19%">cell3</td>
<td style="width22:%">cell4</td>
</tr>
</tbody>
</table>

I mean your border-radius should only be on the table level, you were using it on the header and row level as well, in your original code.

2 Likes