I've got a table that's inside a div element. The problem is I don't want the table cells to go across the entire div, but I don't know how how
shorten the length of the table. I tried making the table's width 90%, but that didn't work. Can someone give me a hand?
0 Kudo
Div and Table Help
| Author | Comment | |||||
|---|---|---|---|---|---|---|
 Joseph Witchard |
Div and Table Help |
Lead | ||||
|
Posts: 75 6 Aug, 2008 20:33 |
|
|||||
|
|
||||||
 Arizona |
#1 | |||||
|
super helper
Posts: 1474 6 Aug, 2008 22:23 |
Hi Joe
 . Because the board css has the table width set already you have to add your width like this:
<table style="width: 90%;"> or: <table style="width: 850px;"> etc. |
|||||
|
|
||||||
|
Joseph Witchard |
#2 | |||||
|
Posts: 75 7 Aug, 2008 11:09 |
That did it. Thanks!
|
|||||
|
|
||||||
|
Joseph Witchard |
#3 | |||||
|
Posts: 75 7 Aug, 2008 14:11 |
Hi, it's me again :p
How do I add space between my
|
|||||
|
|
||||||
|
Arizona |
#4 | |||||
|
super helper
Posts: 1474 7 Aug, 2008 14:34 |
You mean the little search tags at the top of the board? If so this should work:
.tags-list a { padding-right: 5px; } Just change the 5 to what you like, .
|
|||||
|
|
||||||
|
exstreamuser |
#5 | |||||
|
Posts: 866 7 Aug, 2008 14:36 Helper |
To do that, use the first of the following two lines. If you want to move the first tag back to it's original position, use the second line as well.
.post-tags a { margin-left: 5px; } .post-tags strong { margin-right: -5px; } |
|||||
|
|
||||||
|
Joseph Witchard |
#6 | |||||
|
Posts: 75 9 Aug, 2008 12:45 |
That's not what I meant (sorry, it didn't post right above). What I mean is the cellspacing between my <td> tags.
|
|||||
|
|
||||||
|
Arizona |
#7 | |||||
|
super helper
Posts: 1474 10 Aug, 2008 02:07 |
Hm, cellspacing is not available in CSS. Just cell padding. But there is usually a way to get the effect you want. Can you describe what you are trying to do?
|
|||||
|
|
||||||
|
Joseph Witchard |
#8 | |||||
|
Posts: 75 10 Aug, 2008 10:42 |
I'm trying to move the table cells (the things that look like boxes on the table row) away from each other, so it doesn't look like they're all
connected. Like they're sitting there by themselves
|
|||||
|
|
||||||
|
Arizona |
#9 | |||||
|
super helper
Posts: 1474 10 Aug, 2008 11:20 |
Did you already try border-spacing?
|
|||||
|
|
||||||
|
Joseph Witchard |
#10 | |||||
|
Posts: 75 10 Aug, 2008 15:32 |
No I didn't. To tell you the truth, I would rather not have borders on the table cells.
|
|||||
|
|
||||||
|
Arizona |
#11 | |||||
|
super helper
Posts: 1474 11 Aug, 2008 01:34 |
Hi Joe
. Can you post me a link to where you are trying to do this? Or PM me with it if you'd rather not post .
|
|||||
|
|
||||||
|
Joseph Witchard |
#12 | |||||
|
Posts: 75 11 Aug, 2008 12:38 |
http://witchardstestboard.yuku.com
It's a div in the footer. There's one table inside of it. I'm going to try something someone suggested to me (I'll post here if it's successful), but I'd still like your two cents 
**EDIT: Nope, didn't work.
Last Edited By: Joseph Witchard 11 Aug, 2008 12:44.
Edited 1 time.
|
|||||
|
|
||||||
|
Arizona |
#13 | |||||
|
super helper
Posts: 1474 11 Aug, 2008 13:04 |
Ok if you don't mind working with div's instead of tables, you might try this. Change your html to this:
<div class="footer" align="center" style="border: 8px outset; background-color: #2d2d38; text-align: center;"> <p>BLAH BLAH BLAH</p> <div class="tfoot"> <div>Gryffindor</div> <div>Ravenclaw</div> <div>Hufflepuff</div> <div>Slytherin</div> </div> and then add this to your CSS: .tfoot { padding-bottom: 20px; } .tfoot div { display: inline; padding: 5px; border: 1px solid; margin-right: 20px;} The margin right you can switch out to an amount you like. I wasn't sure if you wanted the border off or not...but if so just delete the "border: 1 px solid" from the tfoot div. |
|||||
|
|
||||||
|
Joseph Witchard |
#14 | |||||
|
Posts: 75 11 Aug, 2008 14:06 |
That part worked, but now there's a new problem >_< Sorry!
Go back to the URL I posted and look at how it is now. See "100" under where the table cells were? Well, the reason I've been testing this is because I'm going to have a small image under those names, along with their current point total under the image. I need those to be centered under the names. What would I need to do in order to accomplish that? |
|||||
|
|
||||||
|
Arizona |
#15 | |||||
|
super helper
Posts: 1474 11 Aug, 2008 14:33 |
Ok try this:
Custom Footer: <div class="footer1" align="center" style="border: 8px outset; background-color: #2d2d38; text-align: center;"> <p>BLAH BLAH BLAH</p> <div class="tfoot"> <div>Gryffindor<p>100</p></div> <div>Ravenclaw<p>100</p></div> <div>HUfflepuff<p>100</p></div> <div>Slytherin<p>100</p></div> </div> </div> Advanced CSS: .tfoot { padding-bottom: 20px; } .tfoot div { display: inline-table; padding: 5px; margin-right: 20px; } |
|||||
|
|
||||||
|
Joseph Witchard |
#16 | |||||
|
Posts: 75 11 Aug, 2008 15:53 |
It worked. Thanks!
|
|||||
|
|
||||||
|
Arizona |
#17 | |||||
|
super helper
Posts: 1474 12 Aug, 2008 00:36 |
yw
|
|||||
|
|
||||||
