Remove border on far left and far right

Question

I have this code: http://jsfiddle.net/mVX93/48/

Is it possible to remove the border from the far left side and far right hand side of the table?

I want to align it to either side of the page, and you can see it doesn't align with the test text. My idea would be to use nth item to apply border-left: 0px; to the first item and border-right: 0px to the last item however this doesn't seem to work.

Can anyone show me if this is possible and how it should be implemented please?

Answer 1

Since you have border-spacing:10px; there will be space remaining on the right and left side to separate the td. However, you could put a div around the table and change it's margin-left and margin-right.

Try this:

body {
    background-color: gray;
    overflow: hidden;
}

.grid {
    margin-left: -20px;
    margin-right: -20px;
}

You cell 4's text is overflowing but it is because you have a lot of . or dots without a space so when you enter text it should be fine.

DEMO