Highlighted
Super Contributor.
Super Contributor.
1010 views

Borders in HTMLs with WEB-BROWSER

I have a very simple html with css and the web-browser doesn't show the border:

<html>
    <head>
        <STYLE TYPE="text/css">
            table{
                border-collapse:collapse;
            }
            tr.border_bottom {
                border-bottom: 1px solid #000;
            }
        </STYLE>
    </head>

    <body>
        <table>
            <thead>
                <tr>
                    <th align="center" valign="top">Header1</th>
                    <th align="center" valign="top">Header2</th>
                </tr>
             </thead>
             <tbody>
                 <tr  class='border_bottom'>
                     <td>Data1-1</td>
                     <td>Data1-2</td>
                 </tr>
                 <tr  class='border_bottom'>
                     <td>Data2-1</td>
                     <td>Data2-2</td>
                 </tr>
             </tbody>
        </table>
    </body>
</html>

web-browser
IE

I have tested several browsers (IE, Edge, Opera, Firefox, Chrome) and all show the file perfectly ... only the web-browser control does not show the borders.

Any ideas ?

Windows10, Windows Runtime v9.2

0 Likes
2 Replies
Highlighted
Absent Member.
Absent Member.

RE: Borders in HTMLs with WEB-BROWSER

The web browser control seems to use an older IE rendering engine - version 7 I believe.  You should take this into consideration when developing pages to be rendered in the browser control.

Your page in IE 7 and 8:

In this case IE 7 and 8 do not do borders on <tr> elements.  You can apply the border to the <td> elements though:

<html>
<head>
<STYLE TYPE="text/css">
table{
border-collapse:collapse;
}
td.border_bottom {
border-bottom: 1px solid #000;
}
</STYLE>
</head>

<body>
  <table>
  <thead>
    <tr>
    <th align="center" valign="top">Header1</th>
    <th align="center" valign="top">Header2</th>
  </tr>
  </thead>
  <tbody>
    <tr>
    <td class='border_bottom'>Data1-1</td>
<td class='border_bottom'>Data1-2</td>
</tr>
<tr>
<td class='border_bottom'>Data2-1</td>
<td class='border_bottom'>Data2-2</td>
</tr>
</tbody>
</table>
</body>
</html>

Quick little reference - http://csarven.ca/tr-border-trick-for-ie

The result:

0 Likes
Highlighted
Super Contributor.
Super Contributor.

RE: Borders in HTMLs with WEB-BROWSER

Thanks - works lika a charm !
0 Likes
The opinions expressed above are the personal opinions of the authors, not of Micro Focus. By using this site, you accept the Terms of Use and Rules of Participation. Certain versions of content ("Material") accessible here may contain branding from Hewlett-Packard Company (now HP Inc.) and Hewlett Packard Enterprise Company. As of September 1, 2017, the Material is now offered by Micro Focus, a separately owned and operated company. Any reference to the HP and Hewlett Packard Enterprise/HPE marks is historical in nature, and the HP and Hewlett Packard Enterprise/HPE marks are the property of their respective owners.