Padding between divs but not before or after

I'm building a table out of divs. Yes, I know I could just use the <table> element but this needs to be responsive and work with screen readers and <table> elements don't do that very well.

My question is how do I modify the code below so that I can include white space between cells but not before or after them?

I could just add margin-right: 5px but then I get a 5px margin to the right of the last element also. I can always add a class like "lastColumn" which removes the margin for the last element but I'm hoping there's a more elegant solution.

CSS: (background colors are just there for debugging purposes)

div.section
{
    min-width: 100%;
    background-color: aliceblue;
}

div.section div.table
{
    display: table;
    width: auto;
    background-color: aliceblue;
    border-spacing: 5px;
}

div.section div.table div.tr
{
    display: table-row;
    width: auto;
    clear: both;

    min-height: 20px;
    background-color: yellow;
}

div.section div.table div.tr div.td
{
    display: table-cell;
    float: left;
    background-color: fuchsia;
}

Select allOpen in new window

Markup:

<div class="table">
    <div class="tr">
        <div class="td">
            <asp:TextBox runat="server" ID="txtName" placeholder="Name"></asp:TextBox>
        </div>
        <div class="td">
            <asp:TextBox runat="server" ID="txtValue" placeholder="Value"></asp:TextBox>
        </div>
        <div class="td">
            <asp:TextBox runat="server" ID="txtComment" placeholder="Comment"></asp:TextBox>
        </div>
    </div>
</div>

Select allOpen in new window