Html formatting help

(0) Share

Report

Posted on by Pradeepm93

my output of the html table in a email is like the below

but i want it to be shown as below

Below is the table compose i used. Please help what i have to change

Categories:

General topics

I have the same question (0)

All responses (6)

Answers (1)

Ajinder31 530 on at

Like (0)

Report

Hi @Pradeepm93, may we know what problem you're facing in achieving the expected output. The expected output seems not to contain the column headers. Are you facing issue with removing column headers or with css styling?

Was this reply helpful? Yes No
Pradeepm93 10 on at

Like (0)

Report

Sorry about the poor screenshot. Below is my expected output of the html table in the email body

So i think i need help with the css styling.

Was this reply helpful? Yes No
Ajinder31 530 on at

Like (0)

Report

Hi @Pradeepm93, please try the below styling

<style>
table {
border: 1px solid #1C6EA4;
background-color: #EEEEEE;
width: 100%;
text-align: center;
border-collapse: collapse;
table-layout: auto;
}
table td, table th {
border: 1px solid #000000;
padding: 10px;
}
table tbody td {
font-size: 13px;
}
table thead {
background: #D0E4F5;
border-bottom: 2px solid #444444;
}
table thead th {
font-size: 15px;
font-weight: bold;
text-align: center;
color: #000000;
border-left: 2px solid #D0E4F5;
}
table thead th:first-child {
border-left: none;
}
</style>

Was this reply helpful? Yes No
Pradeepm93 10 on at

Like (0)

Report

My output has become like this

I am trying to not wrap the text in the cell and display is a single line in my html generated table, ex like the below image. What and where do i put the nowrap code line in the code i have given as input.

Like this i want

Was this reply helpful? Yes No
Ajinder31 530 on at

Like (0)

Report

Hi @Pradeepm93, try adding styles to below to section to update the no-wrap. I think adding width: 100% might but haven't tried it yet.

table tbody td {
font-size: 13px;
width: 100%;
}

Was this reply helpful? Yes No
Verified answer

David_MA 12,970 Super User 2025 Season 2 on at

Like (0)

Report
The following CSS should give you what you are looking for:
<style> Table { font-family: Arial, Helvetica, sans-serif; background-color: ; #ffffff; border-collapse: collapse; width: 100%; } Table td, Table th { border: 1px solid #000000; padding: 3px 3px; } Table th { font-size: 15px; font-weight: bold; padding-top: 12px; padding-bottom: 12px; text-align: center; background-color: #bad8f2; color: #000000; } </style>

It produces this for me:
I used PhotoShop to get the background color for the table header. If you know your specific HEX color for the blue, replace it in the background-color: #bad8f2; under Table th in the styles.

Was this reply helpful? Yes No