HTML Draw table with borders only for <tbody> and <tr>

Question

I have an HTML table which looks like:

<table >
        <thead >
                <tr><th align="center" colspan="7" style="font-weight: bold; text-decoration: underline;">TEMP</th></tr>
                <tr><th align="right" colspan="7">In Lieu of XXXX(P)-28(L)</th></tr>
                <tr><th align="center" colspan="7">RECIEPT - HQ XYZ</th></tr>
                <tr>
                    <th align="left" colspan="6">To    : 93 SDO</th>
                    <th align="left" colspan="5">Date : ________<?php ?></th>
                    </tr>
                <tr>
                    <th align="left" colspan="6">From : 993 FPO</th>
                    <th align="left" colspan="5">Sheet No:________</th>
                </tr>
            </thead>
            <tfoot>
                <tr><td  align="center" colspan="7" style="font-weight: bold; text-decoration: underline;">TEMP</td></tr>
            </tfoot>
        <tbody border="2" cellpadding="2" >
            <tr>
                <th>First Name</th>
                <th>Last Name</th>      
                <th>Points</th>
                <th>First Name</th>
                <th>Last Name</th>      
                <th>Points</th>
                <th>First Name</th>
            </tr>
            <tr>
                <td>Jill</td>
                <td>Smith</td>      
                <td>50</td>
                <td>Jill</td>
                <td>Smith</td>      
                <td>50</td>
                <td>Smith</td>
            </tr>
            <tr>
                <td>Jill</td>
                <td>Smith</td>      
                <td>50</td>
                <td>Jill</td>
                <td>Smith</td>      
                <td>50</td>
                <td>Smith</td>
            </tr>
            <tr>
                <td>Jill</td>
                <td>Smith</td>      
                <td>50</td>
                <td>Jill</td>
                <td>Smith</td>      
                <td>50</td>
                <td>Smith</td>
            </tr>
            <tr>
                <td>Jill</td>
                <td>Smith</td>      
                <td>50</td>
                <td>Jill</td>
                <td>Smith</td>      
                <td>50</td>
                <td>Smith</td>
            </tr>

        </tbody>
    </table>

The CSS for the table is like this

<style>
    table { 
            page-break-inside:auto;
            border= 0px;
          }
    tr    { page-break-inside:avoid; 
            page-break-after:auto 
            border=1px solid black;
          }
    thead { display:table-header-group;
            border=1px solid black;
          }
    tfoot { display:table-footer-group;
            border= 0px;
          }
</style>

I am trying to achieve borders only for <tbody> and <tr> but it's not happening. I have tried making border property for the table, thead and foot as 0px and collapsed . But I am unable to achieve. Is it not possible to declare the border properties for individual tags such as tbody, tr, thead, tfoot etc.

Answer 1

try border : none; instead of border : 0px;

Answer 2

Add this to your CSS definition:

th {
     border: 2px solid #ff0000;
}

(of course, later you adjust size and color)

BUT, all those td s after the first row of tbody must be converted do th to display the border around them.