Skip to main content

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

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

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:

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

Thanks - works lika a charm !
Terms & ConditionsAccessibility statement