CODEWITHSUNDEEP
htmlcss
Doug
Doug

Reputation: 55

Can I include td { } in an inline style attribute of my table?

I'm working with a content management system that doesn't allow me to alter the head of the pages I'm working with. The page I'm creating will be edited by others using a WYSIWYG editor and will include a table where users can upload new documents. I want to style this with CSS so that I can give one command to put a line between each row (and this won't need to be done every time by each user - since they likely won't know how), but every time I do this it doesn't show anything. My code attempt is below, is this possible?

<table width=600px cellSpacing=2 cellPadding=2 style="td {border-bottom: solid 1px black;" }">

Upvotes: 4

Views: 3475

Answers (2)

Lukas Eder
Lukas Eder

Reputation: 221106

Not that I'm aware of. But you can do this

<style type="text/css">
  .specialtable td {
    border-bottom: 1px solid black;
  }
</style>
<table width=600px cellSpacing=2 cellPadding=2 class="specialtable">
  ...
</table>

This will ensure that only this specific table's <td/> elements will be styled according to your needs. Note: according to the w3c specs, <style/> is only allowed within the <head/> element of your document. But in many browsers, it still works if you put it anywhere in the <body/>. Since you're looking for a kind of hack, this may be a viable solution for you

Upvotes: 3

Mr Lister
Mr Lister

Reputation: 46589

You can use frame and rules, two lesser-known attributes of the table element.

<table cellpadding="3" cellspacing="0" frame="below" rules="rows">
    <tr><td>one</td><td>two</td></tr>
    <tr><td>three</td><td>four</td></tr>
    <tr><td>five</td><td>six</td></tr>
</table>

See jsFiddle.

Or if you only want lines in between the rows and not below the bottom one, leave out frame="below".

This won't work in all browsers though.

Upvotes: 1

Related Questions