Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Setting table border using CSS 3

Status
Not open for further replies.
Nithos

Nithos

Programmer
May 8, 2003
9
US
For some reason this is eluding me, what i want is instead of having <table border=&quot;2&quot;> ... </table> i want to use a CSS to do the border width and color but if i have

table { border=&quot;2&quot;; color=&quot;red&quot;;} in the CSS nothing happens.

Any ideas why?


--Computable or not Computable that is not the question
char *p=&quot;char *p=%c%s%c;main(){printf(p,34,p,34);}&quot;;main(){printf(p,34,p,34);}
 
Sort by date Sort by votes
ya for starters your syntax is wrong

table {border: 2px; color: #i like to use hex;}

Secondly i dont use table borders like that i usually make one table say 400x400 and make that background the color i want the border to be. Then i make my alignment middle and center in the one cell in the table and then make another table 398x398 to give me a 2px border all around.

So basically you have all your css syntax as such

style: value;

so you have what you want to add followed by a colon then the value followed by a semicolon.

[Hammer]
Nike Failed Slogans -- &quot;Just Don't Do It!&quot;
 
Upvote 0 Downvote
I have a follow up question to the same thread, I am using the stylesheet syntax as suggested - but with that I just get an outside border...how do I get the inside borders also to show up, so it looks like a grid?

TIA!
 
Upvote 0 Downvote
that would be with cells...try this ... this will give you a 3x3 table.

<html>
<style>

table, td {border: 2px; color: #cccccc;}

</style>

<body>
<table>
<tr>
<td> hi </td>
<td> hi </td>
<td> hi </td>
</tr>
<tr>
<td> hi </td>
<td> hi </td>
<td> hi </td>
</tr>
<tr>
<td> hi </td>
<td> hi </td>
<td> hi </td>
</tr>
</table>
</body>
</html>

[Hammer]
Nike Failed Slogans -- &quot;Just Don't Do It!&quot;
 
Upvote 0 Downvote
td{border:2px solid #000;}

thats some short hand for you, its the same as this:

td{
border-width:2px;
border-style:solid;
border-color:#000;
}

Either way, the &quot;grid&quot; is made by putting a border on the td tags, and not the table tag. you see thast how css works, it borders the tag, and doesn't operate the same way as the html args.
 
Upvote 0 Downvote
Thanks for the quick response!!!!

I have three questions..

1- Will this make the table look like a grid - because that is the effect I want.

2- I have other tables also on the same page, so I would not want to give the td classification for all the cells on that page..

I am using an external style sheet so I guess I could use something like td2 and go with..

<td class =&quot;td2&quot;> hi </td>

would that work?
 
Upvote 0 Downvote
Wow!

These forums must have ESP! Just a couple of follow up..
1- I have a little gap between each of my cells now, how can I get rid of that?

The stylesheet I am using is:
.tablecell {
border:1px solid #C6C6FF;
}

Look forward to your input!
 
Upvote 0 Downvote
oh, and with no margin, your borders will look like 4px borders, because they will be up against each other. I sudject declaring 1px borders for a 2px grid.
 
Upvote 0 Downvote
try the table pading:
table.tableClass{padding:0px;}

and for ipx borders, you could try this:

td.tds{background:#fff;}
table.righttable{background:#000;padding:1px;}
 
Upvote 0 Downvote
Extras: I guess it would not be possible to have single lines between the cells?

Of course it's possible! [smile]

Give all your cells a border-right and border-bottom value of 1px. Make border-left and border-top 0px. Then, on your top row only , make border-top value = 1px. On your leftmost column only make border-left = 1px.

Voila -- single borders all 'round.

Cheers,



[monkey] Edward [monkey]

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
658
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
340
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
270
PeDa
PeDa
198709km
  • Locked
  • Question
Grouping XML key value using XSLT
Replies
0
Views
286
198709km
198709km
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
300
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top