Manipulate cell borders in a table using only in-line css

Question

I need to change the border properties of a table that I've built, but I'm operating behind a Content Management System that doesn't allow me to edit the stylesheets, only the page's HTML.

So I am able to manipulate some table properties using <table style="....">, but when I use the border attribute it only affects the outer border and not the border that exists between individual cells.

Obviously I can add HTML rules to the <table> tag i.e. <table border="1px"> but these don't overwrite the external stylesheet which influencing the border so I need an in-line CSS solution.

Is the only way to change the inter-cell border really to manually add a border property to each td or have I missed something?

Thanks for your help,

Answer 1

I am yet to find a truly in-line solution, but the scoped HTML5 attribute comes really close.

In particular, with this feature you don't have to invent a new ID / class for the table and hope it does not conflict with anything else.

Example:

<table>
    <style scoped>td {padding:1px;}</style>
    <tr>
        <td>0</td>
        <td>1</td>
    </tr>
</table>

Unfortunately at the time of writing it is only supported by Firefox.

Edit 2019: the features it was then later abandoned before adoption: https://developer.mozilla.org/en-US/docs/Web/API/HTMLStyleElement/scoped and is now marked as "Obsolete"