Format HTML table

(0) Share

Report

Posted on by Talko

Hi!

I need help with formatting an HTML table.

This is how the result looks right now:

So two things -

First, there's no spacing between the table headers and it's bothering me!

And second, how can I change the font (which is for some strange reason - Time new Roman, instead of Arial)?

This is my current code in Compose action -

<style>
table {
 border: 5px solid #1C6EA4;
 background-color: #EEEEEE;
 width: 100%;
 text-align: center;
 border-collapse: collapse;
}
table td, table th {
 border: 1px solid #AAAAAA;
 padding: 3px 2px;
}
table tbody td {
 font-size: 16px;
}
table thead {
 background: #1C6EA4;
 border-bottom: 2px solid #444444;
}
table thead th {
 font-size: 20px;
 font-weight: bold;
 color: #FFFFFF;
 border-left: 2px solid #D0E4F5;
}
table thead th:first-child {
 border-left: none;
}
</style>
@{body('Create_HTML_table')}

Can anyone help?
Thanks!

Categories:

Building flows

I have the same question (0)

All responses (2)

Answers (1)

Verified answer

annetoal 1,934 Moderator on at

Like (0)

Report
Have a look at this and see if it gives you a start:
<style> Table { font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; } Table td, Table th { border: 1px solid #ddd; padding: 3px 3px; word-wrap: break-word; } Table th { font-size: 15px; font-weight: bold; padding-top: 12px; padding-bottom: 12px; text-align: left; } </style>

If this helps, please mark it as a solution.
Anne

Was this reply helpful? Yes No
Talko 90 on at

Like (1)

Report

@annetoal Thank you, it works!
I now understand the "Padding" is the responsible for the spaces.
Thanks again

Was this reply helpful? Yes No