dslreports logo
site
 
    All Forums Hot Topics Gallery
spc

spacer




how-to block ads


Search Topic:
uniqs
713
share rss forum feed


ProtusMose
Immortal. Eternal.
Premium
join:2001-10-03
Bellevue, NE
kudos:4
Reviews:
·ooma

Formatting a table width

I'm designing a site using the Skeleton framework.

The site is for a mutual fund so there's a lot of data tables in place. I'm having a hard time getting the tables to automatically adjust the width properly. There's gotta be a better way than how I'm doing.

Here's what I've got going on right now.

The framework only has this assigned to tables:
table {
border-collapse: collapse;
border-spacing: 0; }
 

For my formatting:

.divtab {
width: 585px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
overflow: auto;
background-color: #69665c;
border: 5px solid #cac6a3;
border-radius: 5px;
-webkit-border-radius 5px;
-moz-border-radius: 5px;
}
.fundlabel {
color: #cac6a3;
height: 20px;
}
.col1 {
margin: 5px 0px 5px 5px;
float:left;
text-align: right;
}
.col2 {
margin: 5px 5px 5px 0px;
text-align: left;
float:right;
}
.trtn {
background-color: #cac6a3;
 
}
.trwh {
color: #69665c;
background-color: #ffffff;
}
 
.td1 {
font-weight: bold;
 
}
.td2 {
text-align: center;
}
 

and the table itself:

<div class="divtab">
<h2 class="fundlabel">Fund Statistics</h2>
<table class="col1">
<tr class="trtn"><td class="td1">Ticker Symbol:</td><td class="td2">LFTAX</td></tr>
<tr class="trwh"><td class="td1">CUSIP Number:</td><td class="td2">66538E101</td></tr>
<tr class="trtn"><td class="td1">Inception Date:</td><td class="td2">&nbspJuly 5, 2000&nbsp</td></tr>
<tr class="trwh"><td class="td1">Total Net Asets (in millions):</td><td class="td2">169.6</td></tr>
<tr class="trtn"><td class="td1">&nbspNet Asset Value (NAV) 9/5/2012:</td><td class="td2">$20.97</td></tr>
<tr class="trwh"><td class="td1">Expense Ratio:</td><td class="td2">2.35%</td></tr>
<tr class="trtn"><td class="td1">Portfolio Turnover:</td><td class="td2">20%</td>
</table>
<table class="col2">
<tr class="trtn"><td class="td1">&nbspMinimum Initial Purchase:</td><td class="td2">$10,000</td></tr>
<tr class="trwh"><td class="td1">&nbspMinimum Subsequent Purchase:</td><td class="td2">$500</td></tr>
<tr class="trtn"><td class="td1">&nbspMinimum Purchase IRA:</td><td class="td2">$5,000</td></tr>
<tr class="trwh"><td class="td1">&nbspSales Charge:</td><td class="td2">Value</td></tr>
<tr class="trtn"><td class="td1">&nbspRedemption Charge:</td><td class="td2">Value</td></tr>
<tr class="trwh"><td class="td1">&nbspNumber of Holdings:</td><td class="td2">19</td></tr>
<tr class="trtn"><td class="td1">&nbsp<a href="files/LFTAX-FactSheet-2012.pdf">Fact Sheet</a></td><td class="td2"></td></tr>
</table>
</div>
 

That width declaration is what's throwing me. I'd rather it not be statically declared. I'd love for the table to just look at the content and adjust the table to account for declared margins and make the table the correct width.

What am I doing wrong here?

--
Blogsaus "Everyone bows to something. Everyone answers to someone. Wherever your treasure lies, there your heart will be also.

Who do you belong to? " - Andrew Schwab


Rob
In Deo speramus.
Premium
join:2001-08-25
Kendall, FL
kudos:2
Set the table to 100% width and see if that works?


ProtusMose
Immortal. Eternal.
Premium
join:2001-10-03
Bellevue, NE
kudos:4
Reviews:
·ooma
That blows it across the entire width of the page.

I'll post the dev site link. Just don't tell your friends.

»www.lifetimeachievementfund.com.···dex.html

The way the framework works is it automatically divides the content area into sixteen columns. You create the divs with classes speciying how many columns it takes up. Since the table is the only thing on that line, I've got it set to take up the sixteen columns. If I set width to 100% it'll blow it up full page.

Now that I'm typing this, I suppose I can add non-breaking spaces to two bordering divs...

If i do 3col 10col 3 col it breaks the table into two rows.
»i.imgur.com/UwD3S.png

If I do 2col 12col 2col it puts giant space between the columns
»i.imgur.com/oisPw.png

I can split it 3col 11col 2col but of course it's off center now
»i.imgur.com/xzpY5.png

Maybe it's just a restriction of the framework.
--
Blogsaus "Everyone bows to something. Everyone answers to someone. Wherever your treasure lies, there your heart will be also.

Who do you belong to? " - Andrew Schwab


Rob
In Deo speramus.
Premium
join:2001-08-25
Kendall, FL
kudos:2
Enclose the table in a div. Set the table 100%, and set the div width to the width of whatever you want.


ProtusMose
Immortal. Eternal.
Premium
join:2001-10-03
Bellevue, NE
kudos:4
Then it seems it doesn't really matter if I'm specifying the table width or the div width. I'll probably just keep it the way it is then.