vb.net - How to add alternate row color in html table? -
i have function converting datatable html table in vb.net, want add alternate row color in each row. added css on code didn't work. how make happen?
below code:
public function converttohtml(byval targettable datatable) string dim myhtmlfile string = "" 'get worker object. dim strbuilder new stringbuilder() 'open tags , write top portion. strbuilder.append("<html xmlns='http://www.w3.org/1999/xhtml'>") strbuilder.append("<head>") strbuilder.append("<title>") strbuilder.append("page-") strbuilder.append(guid.newguid().tostring()) strbuilder.append("</title>") strbuilder.append("<style type='text/css'>") strbuilder.append(".tr:nth-child(even){") strbuilder.append("background-color: #dae5f4}") strbuilder.append("</style>") strbuilder.append("</head>") strbuilder.append("<body>") strbuilder.append("<table border='1px' cellpadding='5' cellspacing='0' ") strbuilder.append("style='border: solid 1px silver; font-family:franklin gothic book; font-size: 14px;'>") 'font-size: x-small 'add headings row. strbuilder.append("<tr align='left' valign='top' bgcolor='#006699'>") '("<tr align='left' valign='top'>") each mycolumn datacolumn in targettable.columns strbuilder.append("<td align='center' valign='top' style='color:#ffffff'>") strbuilder.append(mycolumn.columnname) strbuilder.append("</td>") next strbuilder.append("</tr>") 'add data rows. each myrow datarow in targettable.rows strbuilder.append("<tr align='left' valign='top'>") each mycolumn datacolumn in targettable.columns strbuilder.append("<td align='left' valign='top' style='font-size:12px'>") strbuilder.append(myrow(mycolumn.columnname).tostring()) strbuilder.append("</td>") next strbuilder.append("</tr>") next 'close tags. strbuilder.append("</table>") strbuilder.append("</body>") strbuilder.append("</html>") 'get string return. myhtmlfile = strbuilder.tostring() return myhtmlfile end function *********update******
here's program's output suggested
your css has small syntax error causing problem. want have:
strbuilder.append("<style type='text/css'>") strbuilder.append("tr:nth-child(even){background-color: #dae5f4}") strbuilder.append("</style>") notice removed "." in front of tr -- makes element "tr" instead of items have css class of "tr".
i remove inline background in tr - changing to:
strbuilder.append("<tr align='left' valign='top'>") and move bgcolor css, leaving with:
strbuilder.append("<style type='text/css'>") strbuilder.append("tr{background-color: #006699;}") strbuilder.append("tr:nth-child(even){background-color: #dae5f4}") strbuilder.append("</style>") i've included example html output, showing functional css.
<html xmlns='http://www.w3.org/1999/xhtml'> <head> <title> page- strbuilder.append(guid.newguid().tostring()) </title> <style type='text/css'> tr{background-color: #006699} tr:nth-child(even){background-color: #dae5f4} </style> </head> <body> <table border='1px' cellpadding='5' cellspacing='0' style='border: solid 1px silver; font-family:franklin gothic book; font-size: 14px;'> <tr align='left' valign='top' style='background-color:black'> <td align='center' valign='top' style='color:#ffffff'> sample </td> <td align='center' valign='top' style='color:#ffffff'> sample </td> </tr> <tr align='left' valign='top'> <td align='left' valign='top' style='font-size:12px'> sample </td> <td align='left' valign='top' style='font-size:12px'> sample </td> </tr> <tr align='left' valign='top'> <td align='left' valign='top' style='font-size:12px'> sample </td> <td align='left' valign='top' style='font-size:12px'> sample </td> </tr> <tr align='left' valign='top'> <td align='left' valign='top' style='font-size:12px'> sample </td> <td align='left' valign='top' style='font-size:12px'> sample </td> </tr> </table> </body> </html>
Comments
Post a Comment