Difference width for thead and tbody

1

Hi,

I want to make a table having differnce width of thead and tbody.thead is more wider than tbody ,tbody is center of table.I have tried to add padding to left and right of tbody but it doesnt work.Preformatted text So let me know if you can tell me any suggesions.
My codes are like this sample,

<style>
table{
border-collapse:collapse;
}
thead{
background-color:red;
}
tbody{
background-color:yellow;
padding-left:20px;
padding-right:20px;
}
</style>
<table>
    <thead>
        <tr>

	<th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thu</th>
            <th>Fri</th>
            <th>Sat</th>
            <th>Sun</th>

</tr>
    </thead>
    <tbody>

        <tr>

            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>

        </tr>
        <tr>

            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>

        </tr>
        <tr>

            <td>15</td>
            <td>16</td>
            <td>17</td>
            <td>18</td>
            <td>19</td>
            <td>20</td>
            <td>21</td>

        </tr>
        
    </tbody>
</table>

Thanks,
BayCora

2

You can set position of table to relative and positions of thead and tbody to absolute and do whatever you want with them in theory… the only question “why”? :slight_smile: