After much trial and error, I have almost successfully created a table with rounded corners on all four sides. The only issue is that in order for the radius property to work, I had to remove the table border property.
This resulted in the td border sticking out on the right-hand side. My goal is to achieve a smooth, even border on both the right and left sides with a width between 1-5 pixels.
I attempted to use a border-box div outside of my table, but unfortunately, I couldn't get it to work as intended. Here is what I currently have - note the right border sticks out by 1 pixel:
<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>