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

Question

I need to change the border properties of the table that I created, but I work for a Content Management System that does not allow me to edit style sheets, but only HTML pages.

Therefore, I can manipulate some properties of the table using <table style="...."> , but when I use the border attribute, it only affects the outer border, not the border that exists between the individual cells.

Obviously, I can add HTML rules to the <table> ie <table border="1px"> , but they do not overwrite the external stylesheet that affects the border, so I need an inline CSS solution.

Is the only way to change the border between cells to manually add a border property for each td or am I missing something?

Thank you for your help,

Answer 1

Are you trying to overwrite the external stylesheet? If your inline CSS doesn't work, you can try using -

 !important 

So you can do something like this -

 <table style="border: none!important;"> 

Answer 2

"Is the only way to change the border between cells to manually add a border property for each td ...?"

Yes.

If you cannot add a style tag:

 <style> table td {...} </style> 

Of course, there is always JavaScript. jQuery:

 $('table td').css('border', '1px solid red'); 

Answer 3

Since you can use html, you can insert a stylesheet and specify td elements.
You must add a class to avoid using other tables on the page.

 <table class="some-class">.. 

and

 <style type="text/css"> table.some-class td{ border:1px solid black; } </style> 

Answer 4

I still need to find a really built-in solution, but the scoped HTML5 attribute is really close.

In particular, with this function you do not need to invent a new ID / class for the table and hope that 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.

Answer 5

 <style> table { border: 1px solid red; } td { border: 1px solid red; } </style> <table border="1" cellpadding="2" cellspacing="0" width="50%"> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table>