CSS and Layouts

[stancol2]

Hopefully this hasn't been asked and answered already. My search results didn't seem to bring anything up.

I'm having trouble getting the tables to look correct on my web site. I'm using WordPress if that helps.

My Web Site

For some reason there is a lot of extra space in each row. I even had to edit my CSS sheet just to get it to fit the way it does now. Here is the part I hacked together. Without the table-layout: fixed; and the width: 35px; it wouldn't even fit.

table, th, td {
table-layout: fixed;
width: 35px;
border-spacing: 0;
border-collapse: collapse;
padding: 0;
}

th {
text-align: center;
}

td {
text-align: center;
}

 

[w2xq]

Wirelessly posted (Moto Droid Bionic: Mozilla/5.0 (Linux; U; Android 4.0.4; en-us; DROID BIONIC Build/6.7.2-223_DBN_M4-23) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30)

It looks like the column width is being controlled by the font spec for the <th>. What happens if you temporarily comment out the text in the <th> entries? Maybe substitute a <th colspan="8"></th> for your current html?

Sorry, I don't know Wordpress and I can' see the sourve code using my phone. FWIW I use jEdit -- jedit.org -- for k2eoc.org and my site... use viewport code to sniff out the device's screen. HTH a bit.

 

[Dude111]

I see what ya mean,the page is QUITE WIDE!! (I went to your ABOUT PAGE and saw .. had to scroll to the right to see it)


Good luck buddy

 

[QDP2012]

Hopefully this hasn't been asked and answered already. My search results didn't seem to bring anything up.

I'm having trouble getting the tables to look correct on my web site. I'm using WordPress if that helps.

My Web Site

For some reason there is a lot of extra space in each row. I even had to edit my CSS sheet just to get it to fit the way it does now. Here is the part I hacked together. Without the table-layout: fixed; and the width: 35px; it wouldn't even fit.

table, th, td {
table-layout: fixed;
width: 35px;
border-spacing: 0;
border-collapse: collapse;
padding: 0;
}

th {
text-align: center;
}

td {
text-align: center;
}

Row-height is being driven by long descriptions that are word-wrapping in a fixed-width column. Either make the columns relative (not fixed), or increase the column-width on the Description column to decrease the row-height for those rows that have long descriptions. The column width is being uniformly applied to all columns. Certain columns (like license) don't need to be the same width as other columns (like description).

Instead of the code quoted above, maybe try taking the "width" attribute out of the "table" statement and have it in the lower "th" statement. I don't know WordPress, but is it possible to have multiple "th" definitions, one for general use and one for the description column-heading so that for its column, the heading controls the column-width?

A guess would be something like this, maybe:

table {
	table-layout: relative;
	border-spacing: 0;
	border-collapse: collapse;
	padding: 0;
}

th {
	text-align: center;
}

th_description {
	text-align: center;
	width: 35px;
}

td {
	text-align: center;
}

Until I can research WordPress more, this is just a general suggestion. If you find the answer that works for you, please let us know.

Hope this helps,