putting spacing between the leftmost and rightmost cells and the table border

Question

Hi

I am making a table in HTML and I do not want the borders of the leftmost and right most cells to extend all the way till the table border. For example:

| ____ |

So as in the above example, while the cells themselves have a contiguous top border this border does not extend all the way till the outer table border. It would be great if you can give me some tips on how to do this.

Answer 1

Put a DIV in the cell and style the border/padding on the DIV instead of the table.

Answer 2

I'm not sure which of these examples is what you want. Your description seemed to be the opposite of your drawing, but try these out.

<div style="width:250px;padding:10px; border-left: solid black 1px;border-right: solid black 1px;">
<table width="100%" style="border-top: solid black 1px;border-bottom: solid black 1px;">
    <tr>
        <td>cell 1:1</td>
        <td>cell 1:2</td>
        <td>cell 1:3</td>
    <tr>
    <tr>
        <td>cell 2:1</td>
        <td>cell 2:2</td>
        <td>cell 2:3</td>
    <tr>
</table>
</div>
<br /><br />
<div style="width:250px;padding:10px; border-top: solid black 1px;border-bottom: solid black 1px;">
<table width="100%" style="border-left: solid black 1px;border-right: solid black 1px;">
    <tr>
        <td>cell 1:1</td>
        <td>cell 1:2</td>
        <td>cell 1:3</td>
    <tr>
    <tr>
        <td>cell 2:1</td>
        <td>cell 2:2</td>
        <td>cell 2:3</td>
    <tr>
</table>
</div>