CODEWITHSUNDEEP
csscss-tables
Kozzy1
Kozzy1

Reputation: 71

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

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,

Upvotes: 7

Views: 11934

Answers (5)

Ciro Santilli OurBigBook.com
Ciro Santilli OurBigBook.com

Reputation: 384014

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"

Upvotes: 2

jadeallencook
jadeallencook

Reputation: 686

Are you trying to overwrite an external stylesheet? If your inline CSS isn't working, you might want to try using - 

!important

So you could do something like this - 

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

Upvotes: 1

Bhushan wagh
Bhushan wagh

Reputation: 197

<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>

Upvotes: -1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196217

Since you can use html you can insert a stylesheet and target the td elements.
You should add a class to avoid messing other tables in the page

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

and

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

Upvotes: 0

isherwood
isherwood

Reputation: 61114

"Is the only way to change the inter-cell border really to manually add a border property to each td...?"

Yes.

Unless you can add a style tag: 

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

Of course, there's always JavaScript. jQuery: 

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

Upvotes: 0

Related Questions