CODEWITHSUNDEEP
htmlcssborder-spacing
Steve
Steve

Reputation: 14912

Preventing indent of tables with border-collapse, separate

I have some very basic html:

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<table>
    <tr>
        <th>Addressed to</th>
        <th>Sender</th>
        <th>Price</th>
        <th>Comments</th>
    </tr>
    <tr>
        <td>Joe smith</td>
        <td>Ralph Lauren</td>
        <td>$200</td>
        <td>Lorem ipsum dolor sit amer</td>
    </tr>
    <tr>
        <td>Joe smith</td>
        <td>Ralph Lauren</td>
        <td>$200</td>
        <td>Lorem ipsum dolor sit amer</td>
    </tr>
</table>
<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

Now, I'd like to add spacing between my table rows and columns, so I add this css:

table {
border-collapse: separate;
border-spacing: 20px 10px;
}

Great. Except now the table itself is no longer flush left with the 2 paragraphs.

enter image description here

My question is how can the table get the needed spacing but NOT the indent, or how can apply the least CSS to overcome the indent?

See this code at http://jsfiddle.net/smlombardi/9mzzdsrn/1/

Upvotes: 0

Views: 784

Answers (3)

Mr_vasu
Mr_vasu

Reputation: 98

table {
    border-collapse: separate;
    margin-right:20px;
}
td {
    padding:10px;
}

Upvotes: 0

Mark
Mark

Reputation: 564

Instead of using border-spacing you can just set the margin on the table and then also set padding to each row to achieve the same effect with the text flush left

table {
    border-collapse: separate;
    margin-right:20px;
}
td {
    padding-top:10px;
}

Upvotes: 0

HelloWorld
HelloWorld

Reputation: 2330

For a quick solution (especially if it's a static site) just knock the margin back by 20px (the same as the indent on the table)

margin-left:-20px;

here is a working example

Upvotes: 2

Related Questions