HTML Table Rounded Corners

**DMT Dave** · 06-25-2023, 08:23 AM

Hi Guy's I am trying work out how to add the HTML table with rounded corners ?

When checked HTML School site, it looks like 'border-radius'

I have tried replacing the structure of my table but can't get the rounded corners, anyone know where border-radius needs adding or replacing ?

Code:

strHTML = "<HTML><head><style>" & _                    
"table{border-collapse:collapse; width: 40%} td,th{text-align:left}  table,td,th{border: 2px solid blue;}" & _
                    "</style></head><Body><table>" & _
                "</tr></td>" & _
                "</table>"

**isladogs** · 06-25-2023, 11:29 AM

Are you really trying to do this in Access? If so, why?

**DMT Dave** · 06-25-2023, 11:39 AM

Hi Colin, i have a quote system set up on email, includes 4 HTML mail bodies and generated a table to add the 4 bodies in

so 4 tables are inside 1 table effectively, so it looks kind of like a document on the mail body, a clean up would have to be round the corners off which I have looked at examples but can't get it to work....

**isladogs** · 06-25-2023, 11:54 AM

OK I understand. It may not be possible as VBA only accepts a subset of HTML commands

**Welshgasman** · 06-25-2023, 12:01 PM

Why not create something with rounded corners and inspect the html?

**DMT Dave** · 06-25-2023, 12:11 PM

WGM, yes so i can even do that in word i guess and inspect.....

Will have a look

**isladogs** · 06-25-2023, 12:15 PM

This is the W3 Schools code to add borders around each 'cell' but not the table itself

Code:

th, td {
  border: 1px solid black;
  border-radius: 10px;
}

**Edgar** · 06-25-2023, 02:21 PM

Do the testing.

If you add border-radius only to the table, nothing happens
table{border-collapse:collapse; width: 40%; border-radius: 20px;}
td,th{text-align:left}
table,td,th{border: 2px solid blue;}

If you add border-radius only to the cells, it rounds the corners of every cell
table{border-collapse:collapse; width: 40%; }
td,th{text-align:left; border-radius: 20px;}
table,td,th{border: 2px solid blue;}

If you add border-radius to the table and its cells at the same time, it only applies rounding to the cells, not the table
table{border-collapse:collapse; width: 40%; }
td,th{text-align:left; border-radius: 20px;}
table,td,th{border: 2px solid blue;}

So we need another approach here. Wrap your table in a div with a class like this (divs allow you to add round corners)
<div class='my-tbl-wrapper'><table>children</table></div>

Then comes the tricky styling. First declare your wrapper with a visible border and a border radius, your table used to take 40% of the space when it was a the wrapper, but since now the wrapper is a div, the div must have that width.
.my-tbl-wrapper{border: 2px solid blue; border-radius: 20px; width: 40%;}

Give your cells a border (and a padding, or it'll look bad), now everything has borders, we need border-collapse
td,th{border: 2px solid blue; padding:10px}

So, collapse the borders, make it take 100% of the available width of the div and remove the perimeter border because the div already has a border
table{width: 100%; border-collapse:collapse; border-style: hidden}

It should look like this:

Code:

<HTML><head><style>
    .my-tbl-wrapper{border: 2px solid blue; border-radius: 20px; width: 40%;}
    td,th{border: 2px solid blue; padding:10px}
    table{width: 100%; border-collapse:collapse; border-style: hidden}
</style></head><body><div class="my-tbl-wrapper"><table>
<tr><td>some data</td><td>more data</td></tr>
<tr><td>some data2</td><td>more data2</td></tr>
</table></div>

**DMT Dave** · 06-26-2023, 12:04 AM

Hi Edgar, thank you, i am going check each suggestion, yes it is the main table (outer table i am trying to round off)

I will check what you have written and compare to mine, i think you have reasons here why i couldn't get the radius to work

here is my outer table with inner tables inside it

Code:

sFH = "<font size='4' face='Verdana' style=text-align=center; vertical-align=middle>" 'FONT HEADER    
sFHEnd = "</font>"
    
    strFS = "<font size='3' face='Arial' style=text-align=center; vertical-align=middle>" 'TABLE FONT
    strFE = "</font>"


    sDMTHTML = "<HTML><head><style>" & _
                    "table{border-collapse:collapse; width: 40%} td,th{text-align:left}  table,td,th{border: 2px solid blue;}" & _
                    "</style></head><Body><table>" & _
                    "<tr><td><P><IMG border=0 hspace=0 alt='' src='file://T:/DMT Ltd/Logo Media/" & SigFile & "' align=baseline></P></td></tr>" & _
                    "<tr><td>" & strFS & "Quotation Date: " & Format(dtQuoteDate, "dddd-dd-mmmm-yyyy") & "<br><br>" & _
                    "Quotation Ref: " & rs3.Fields("QuoteRef") & strFE & "<br><br>" & _
                    "<tr><td><br>" & sFH & "CUSTOMER DETAILS:" & sFHEnd & "<br>" & _
                            strFS & strBody & strFE & "</tr></td><br>" & _
                    "<tr><td><br>" & sFH & "DELIVERY LOCATION:" & sFHEnd & "<br>" & _
                            strFS & strBody2 & strFE & "</tr></td><br>" & _
                    "<tr><td><br>" & sFH & "QUOTE OPTION 1 (DEDICATED):" & sFHEnd & "<br>" & _
                            strFS & strBody3 & strFE & "</tr></td><br>" & _
                    "<tr><td><br>" & sFH & "QUOTE OPTION 2 (PART LOAD):" & sFHEnd & "<br>" & _
                            strFS & strBody4 & strFE & "</tr></td><br>" & _
                "</tr></td>" & _
                "</table>"
        
    sDMTBody = sDMTHTML

strBody to strBody4 are different recordsets into their own table

strDMTHTML is the outer table to round off, will check out your suggestions though as mentioned, it looks like there are padding issues with my attempts.

**Edgar** · 06-26-2023, 12:58 AM

It is actually only one suggestion where I explain how to reach it. Do the following modifications to the code you posted, it should work, but I didn't test. So do it and let me know.

Code:

sFH = "<font size='4' face='Verdana' style=text-align=center; vertical-align=middle>" 'FONT HEADER    
sFHEnd = "</font>"
    
    strFS = "<font size='3' face='Arial' style=text-align=center; vertical-align=middle>" 'TABLE FONT
    strFE = "</font>"


    sDMTHTML = "<HTML><head><style>" & _
                    ".my-tbl-wrapper{border: 2px solid blue; border-radius: 20px; width: 40%;} td,th{border: 2px solid blue; padding:10px} " & _
                    "table{width: 100%; border-collapse:collapse; border-style: hidden}" & _
                    "</style></head><Body><div class="my-tbl-wrapper"><table>" & _
                    "<tr><td><P><IMG border=0 hspace=0 alt='' src='file://T:/DMT Ltd/Logo Media/" & SigFile & "' align=baseline></P></td></tr>" & _
                    "<tr><td>" & strFS & "Quotation Date: " & Format(dtQuoteDate, "dddd-dd-mmmm-yyyy") & "<br><br>" & _
                    "Quotation Ref: " & rs3.Fields("QuoteRef") & strFE & "<br><br>" & _
                    "<tr><td><br>" & sFH & "CUSTOMER DETAILS:" & sFHEnd & "<br>" & _
                            strFS & strBody & strFE & "</tr></td><br>" & _
                    "<tr><td><br>" & sFH & "DELIVERY LOCATION:" & sFHEnd & "<br>" & _
                            strFS & strBody2 & strFE & "</tr></td><br>" & _
                    "<tr><td><br>" & sFH & "QUOTE OPTION 1 (DEDICATED):" & sFHEnd & "<br>" & _
                            strFS & strBody3 & strFE & "</tr></td><br>" & _
                    "<tr><td><br>" & sFH & "QUOTE OPTION 2 (PART LOAD):" & sFHEnd & "<br>" & _
                            strFS & strBody4 & strFE & "</tr></td><br>" & _
                "</tr></td>" & _
                "</table></div>"
        
    sDMTBody = sDMTHTML

**DMT Dave** · 06-26-2023, 02:00 AM

Edgar, silly me, you terminated the Rounded table at the end of code, i didn't, lack of thought on my side!!

made some adaptions, still can't appear to round the outer table off!!!

Code:

 sDMTHTML = "<HTML><head><style>" & _    ".my-tbl-wrapper{border: 2px solid blue; border-radius: 20px; width: 40%;} td,th{border: 2px solid blue; padding:10px}" & _
                    "table{width: 100%; border-collapse:collapse; border-style: hidden}" & _
                    "</style></head><Body><div class=""my-tbl-wrapper""><table>" & _
        "</style></head><body><div class='my-tbl-wrapper'><table>" & _
        "<tr><td><P><IMG border=0 hspace=0 alt='' src='file://T:/DMT Ltd/Logo Media/" & SigFile & "' align=baseline></P></td></tr>" & _
                    "<tr><td>" & strFS & "Quotation Date: " & Format(dtQuoteDate, "dddd-dd-mmmm-yyyy") & "<br><br>" & _
                    "Quotation Ref: " & rs3.Fields("QuoteRef") & strFE & "<br><br>" & _
                    "<tr><td><br>" & sFH & "CUSTOMER DETAILS:" & sFHEnd & "<br>" & _
                            strFS & strBody & strFE & "</tr></td><br>" & _
                    "<tr><td><br>" & sFH & "DELIVERY LOCATION:" & sFHEnd & "<br>" & _
                            strFS & strBody2 & strFE & "</tr></td><br>" & _
                    "<tr><td><br>" & sFH & "QUOTE OPTION 1 (DEDICATED):" & sFHEnd & "<br>" & _
                            strFS & strBody3 & strFE & "</tr></td><br>" & _
                    "<tr><td><br>" & sFH & "QUOTE OPTION 2 (PART LOAD):" & sFHEnd & "<br>" & _
                            strFS & strBody4 & strFE & "</tr></td><br>" & _
                "</tr></td>" & _
                "</table></div>"

Click image for larger version.

Name: Capture.JPG
Views: 21
Size: 86.5 KB
ID: 50415

**Edgar** · 06-26-2023, 11:11 AM

Code:

 sDMTHTML = "<HTML><head><style>" & _    ".my-tbl-wrapper{border: 2px solid blue; border-radius: 20px; width: 40%;} td,th{border: 2px solid blue; padding:10px}" & _
                    "table{width: 100%; border-collapse:collapse; border-style: hidden}" & _
                    "</style></head><Body><div class=""my-tbl-wrapper""><table>" & _
        "</style></head><body><div class='my-tbl-wrapper'><table>" & _
        "<tr><td><P><IMG border=0 hspace=0 alt='' src='file://T:/DMT Ltd/Logo Media/" & SigFile & "' align=baseline></P></td></tr>" & _
                    "<tr><td>" & strFS & "Quotation Date: " & Format(dtQuoteDate, "dddd-dd-mmmm-yyyy") & "<br><br>" & _
                    "Quotation Ref: " & rs3.Fields("QuoteRef") & strFE & "<br><br>" & _
                    "<tr><td><br>" & sFH & "CUSTOMER DETAILS:" & sFHEnd & "<br>" & _
                            strFS & strBody & strFE & "</tr></td><br>" & _
                    "<tr><td><br>" & sFH & "DELIVERY LOCATION:" & sFHEnd & "<br>" & _
                            strFS & strBody2 & strFE & "</tr></td><br>" & _
                    "<tr><td><br>" & sFH & "QUOTE OPTION 1 (DEDICATED):" & sFHEnd & "<br>" & _
                            strFS & strBody3 & strFE & "</tr></td><br>" & _
                    "<tr><td><br>" & sFH & "QUOTE OPTION 2 (PART LOAD):" & sFHEnd & "<br>" & _
                            strFS & strBody4 & strFE & "</tr></td><br>" & _
                "</tr></td>" & _
                "</table></div>"

Check if removing the html code marked in red fixes it. It's repeating:

Code:

                    "</style></head><Body><div class=""my-tbl-wrapper""><table>" & _
        "</style></head><body><div class='my-tbl-wrapper'><table>" & _

**DMT Dave** · 06-26-2023, 12:42 PM

Hi Edgar, no still the same, i also found this, tried collapse; seperate instead of collapse; collapse

https://stackoverflow.com/questions/...le-without-css

Kindest

It's not mega important but once you start investigating when it can be done then it's good to follow it through and save the method.....

**Edgar** · 06-26-2023, 02:46 PM

Did the method in the link work for you? If not, you could also write your table with divs without needing the table tag, maybe try to see if something like this works first without any data, just make it the output of your email to see if it works:

Code:

sDMTHTML = _
"<html><head><style>" & _
"    .table { width: 100%; border: 1px solid #ccc; border-radius: 10px; overflow: hidden; }" & _
"    .row { display: flex; border-bottom: 1px solid #ccc; }" & _
"    .row:last-child { border-bottom: none; }" & _
"    .cell { flex: 1; padding: 10px; border-right: 1px solid #ccc; }" & _
"    .cell:last-child { border-right: none; }" & _
"</style></head><body>  <div class="table">" & _
"    <div class="row"><div class="cell">Cell R1C1</div><div class="cell">Cell R1C2</div></div>" & _
"    <div class="row"><div class="cell">Cell R2C1</div><div class="cell">Cell R2C2</div></div>" & _
"    <div class="row"><div class="cell">Cell R3C1</div><div class="cell">Cell R3C2</div></div>" & _
"</div></body></html>"

Let me know if it does produce a result you could use.

**Welshgasman** · 06-26-2023, 03:06 PM

Lot of work here for a fancy corner?

HTML Table Rounded Corners

Thread Tools

HTML Table Rounded Corners

Similar Threads

Calculated field should not be rounded off the third(3) number after the decimal (thousandths)....

Calculating both Rounded Time and rounded Elapsed Time in a Query

Rounded number inside of text

Rounded Numbers

output of queries like to have rounded numbers

Posting Permissions