I'm trying to make a table with rounded corners on all 4 sides. I've been mostly successful, except in order for the radius property to work, I must remove the table border property.
This leaves the td border sticking out of the right hand side. What I want to accomplish is to create a smooth even border on both the right and left side with a width of somewhere between 1-5 pixels.
I have tried a border-box div outside my table, but I couldn't seem to get that to work either. Here is what I have. Note the right border sticks out 1px:
<html>
<style>
table {
border-collapse: collapse;
max-width: 560;
}
th.top_curved{
border-top-right-radius: 20px;
border-top-left-radius: 20px;
}
th.bottom_curved{
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
th{
background-color: purple;
color: white;
}
td{
border: 1px solid purple;
}
</style>
<body>
<table style="table-layout: fixed; width: 100%">
<colgroup>
<col style="width: 80px;">
<col style="width: 80px;">
<col style="width: 80px;">
<col style="width: 80px">
<col style="width: 80px">
<col style="width: 80px">
<col style="width: 80px">
</colgroup>
<tr>
<th class="top_curved" colspan="7">
HEADER ROW
</th>
</tr>
<tr>
<th class="sub_header">Course</th>
<th class="sub_header">Assignment</th>
<th class="sub_header">Assigned</th>
<th class="sub_header">Due</th>
<th class="sub_header">Status</th>
<th class="sub_header">Grade</th>
<th class="sub_header">Comments</th>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<th class="bottom_curved" colspan="7">
HEADER ROW
</th>
</tr>
</table>
</body>
</html>
Figured this out.
Answer is to turn off the border-collapse property and turn border spacing to 0:
table {
border-spacing: 0;
max-width: 560;
}