HTML custom column width

Question

_{Friday, March 24, 2017 11:08 AM}

Hello again,

trying to get nice html report into outlook, using

## HTML settings
$Header = @"
<style>
TABLE {border-width: 1px;border-style: solid;border-color: black;border-collapse: collapse;}
TH {border-width: 1px;padding: 3px;border-style: solid;border-color: black;background-color: white;font-size:100%;}
TD {border-width: 1px;padding: 3px;border-style: solid;border-color: black;width: 330px;font-size:85%}
</style>
"@


## Missing in AD
    $ADMissing = $mycol | ?{!$_.AD_number}
    $body += "<br>" 
    $body += "<b><font color=blue> Missing in AD </font></b><br>" 
    $body += ($ADMissing |ConvertTo-Html -Head $header)
#>

## Missing in VEMA
    $Vemamissing = $mycol | ?{!$_.V_number -and $_.AD_Enabled -eq $true}
    $body += "<br>" 
    $body += "<b><font color=blue>Missing in VEMA </font></b><br>"
    $body += ($Vemamissing |ConvertTo-Html -Head $header)

Send-MailMessage @messageParameters -body $body -subject " AD" -BodyAsHtml -Encoding UTF8

... howewer, I'm not satisfied with the output, as columns have random width, and table border isn't the same. The first one its collapsed, the second one isn't.    If I remove "Missing in AD" table, the second would have has single borders. I'm not sure why..

Is there any way to have custom fixed column size?
Adding

td:nth-child(1) {
    text-align: center;
    width:10%;
  }
  td:nth-child(2) {
    text-align: left;
     width:90%;
  }

does not have any effect in the output.

All replies (6)

_{Friday, March 24, 2017 3:30 PM ✅Answered}

You can set column size in CSS.

See: https://www.w3schools.com/css/css_table.asp

\(ツ)_/

_{Monday, March 27, 2017 6:27 AM | 1 vote}

You can set column size in CSS.

See: https://www.w3schools.com/css/css_table.asp

\(ツ)_/

Ye, well,  sending the output directly via mailmessage is buggy as hell (Outlook has problems with CSS or what?), when I output it into file, I get nice table...

Outlook seems like ignore nth-child code ..

.. and, to get collapsed border in second table, i had to

body += ($Vemamissing |ConvertTo-Html -Head $header)

=>

body += ($Vemamissing |ConvertTo-Html)

Just removing $header on second table did the trick..

_{Monday, March 27, 2017 6:47 AM}

Outlook does not support CSS3.

Using standard column width settings wok just fine.

\(ツ)_/

_{Friday, March 31, 2017 6:13 AM}

Outlook does not support CSS3.

Using standard column width settings wok just fine.

\(ツ)_/

Yea. I just created .html attachment via CSS style (as u suggested) and got pretty nice table. And learned some basic CSS stuff :)  Exciting and well spent few hours ...

_{Friday, March 31, 2017 6:16 AM}

Visual Studio Community edition has a nice CSS editor that can generate custom CSS.

\(ツ)_/

_{Thursday, November 7, 2019 9:31 AM}

check this...CSS Table Styling