LebGeeks

Kassem

Member

Setting the sizes of columns in an HTML table

Hey guys,

Ok I have a table with three columns. I want the first to take up 70% of the table width, the other two 15% each. I tried a bunch of tricks but it just doesn't want to work! Any suggestions?

P.S: I hate HTML and CSS when they're being stubborn.

mrmat

Member

Re: Setting the sizes of columns in an HTML table

Here's the css solution. First make sure you specify the width of the table. In the code below i used Pseudo-class selectors to assign the width of the first column.

CSS

.tbl {
width:100%;
}

.tbl tr td:first-child {
width:75%;
}

.tbl tr td {
width:15%;
}

HTML

<table class="tbl" border="1" >
<tr
<td>Col 1</td>
<td>Col 2</td
<td>Col 3</td>
</tr>
</table>

The table's width could be set to anything

.tbl {
width:500px;
}

Last edited by mrmat (October 8 2010)

Kassem

Member

Re: Setting the sizes of columns in an HTML table

Hey mrmat,

I told you, it just wants to act stubborn today! I tried your code (mine wasn't much different actually), but unfortunately it did not work (although it's supposed to!). Take a look:
HTML:

<table class="priceTable">
        	<caption>Ladies' Dry Cleaning</caption>
        	<tr class="headerRow">
            	<td></td>
                <td class="priceHeader">Std.</td>
                <td class="priceHeader">Specialist</td>
            </tr>
            <tr>
            	<td>Item1</td>
                <td>5.00</td>
                <td>8.00</td>
            </tr>
            <tr>
            	<td>Item1</td>
                <td>5.00</td>
                <td>8.00</td>
            </tr>
            <tr>
            	<td>Item1</td>
                <td>5.00</td>
                <td>8.00</td>
            </tr>
            <tr>
            	<td>Item1</td>
                <td>5.00</td>
                <td>8.00</td>
            </tr>
        </table>

CSS:

.priceTable {
	width:250px;
	margin:20px 10px;
	font-family:sans-serif;
	font-size:88%;
	border-collapse:collapse;
}

.priceTable caption {
	font-size:115%;
	font-weight:bold;
}

.priceTable td {
	border-bottom:#E4E4E4 solid 1px;
}

.priceTable tr td:first-child {
	width: 70%;
	margin-right:80px;
}

.priceTable tr td {
	width:15%;
}

.priceHeader {
	width:15%;	
	font-size:78%;
	font-weight:bolder;
	color:#006;
}

.headerRow {
	background-color:#CCC;
	font-size:90%;
	color:#006;
	border-bottom:#999 solid 1px;
}

mrmat

Member

Re: Setting the sizes of columns in an HTML table

Seems fine here

IE???

After trying it with IE....
Tried it in IE and can confirm the problem. Specifying the Doc Type seems to fix it.

Last edited by mrmat (October 8 2010)

Kassem

Member

Re: Setting the sizes of columns in an HTML table

Nope, Google Chrome... I'll try it in the other browsers...

Kassem

Member

Re: Setting the sizes of columns in an HTML table

Weird...

Last edited by Kassem (October 8 2010)

mrmat

Member

Re: Setting the sizes of columns in an HTML table

Have a look at my edit. But the other weird thing is that i've just tried it in Chrome and it seems fine with/without specifying the Doc type.

Kassem

Member

Re: Setting the sizes of columns in an HTML table

I've just fixed the problem... There was some previous CSS conflicting with the section I've pasted... Isn't this section supposed to override everything before? I mean it's the last part of my CSS file, weird... again!

Thanks for the help by the way :)

Last edited by Kassem (October 8 2010)

mrmat

Member

Re: Setting the sizes of columns in an HTML table

Isn't this section supposed to override everything before?

This depends on whether the attributes defined previously are being overrided. ex:

.priceTable {
background-color:#FF0000;
}

if you don't specify a new colour in the one below, the colour assigned above will stay.

.priceTable {
width:250px;
}

By the way, in case you are not aware of it, you can always use the  !important rule if you think that an attribute is being overrided by another somewhere else.

Thanks for the help by the way :)

You're most welcome. But no worries, will send you the invoice at the end of the month. :)

Last edited by mrmat (October 8 2010)

Kassem

Member

Re: Setting the sizes of columns in an HTML table

You're most welcome. But no worries, will send you the invoice at the end of the month. :)

I actually owe you quiet a bunch so far :)

@Staff: Problem Solved, feel free to edit the title of this topic (to add "Solved") and close it. Thanks

rolf

Member

Re: Setting the sizes of columns in an HTML table

CSS has a weird way of setting priorities. It's not what comes after overrides everything else, it's more complicated then that. It's more like the more specific selectors override the more generic ones.
You can use !important to force overriding, like this:

.some_class {
   font-weight: bold !important;
}

Here is some HTML code that could help illustrate this selection mechanism:

<html>
<head>
<style>
p.red {
	color: red;	
}
p {
	color: blue;	
}
</style>
</head>
<body>
<div>
<p class="a b">Here is one default paragraph</p>
<p class="a b">And another "default" paragraph</p>
<p class="a b red">And now this is a "red" paragraph</p>
<p class="a b">And again a plain paragraph</p>
</div>
</body>
</html>

Here, the red color gets applied to the paragraph with the class "red" set, even though the paragraph definition after it says color:blue, because p.red is a more specific selector. Feel free to play with this code (the "a" and "b" classes are there for that). You'll also see that if the selectors are "equally specific", then the later takes precedence over what comes before, otherwise the most specific one takes precedence.

That's just to illustrate the basic principle.

Last edited by rolf (October 9 2010)

Kassem

Member

Re: Setting the sizes of columns in an HTML table

CSS has a weird way of setting priorities. It's not what comes after overrides everything else, it's more complicated then that. It's more like the more specific selectors override the more generic ones.
You can use !important to force overriding, like this:

.some_class {
   font-weight: bold !important;
}

Yeh I know about this !important; trick but I believe this is just a "work-around" and encourages bad practices. I like to keep my code clean and simple. If the priorities aren't working the way they're supposed to, it means there's either a problem with my mark-up or something with my CSS. Editing the CSS perfectly solved the problem, hence I did not need the work-around. But yeh, sometimes you just need to get things done fast, and the use of !important; could be a last resort.

rolf

Member

Re: Setting the sizes of columns in an HTML table

I did some experimentation and edited my post. If I made it sound like a lesson, I'm sorry about that.

Kassem

Member

Re: Setting the sizes of columns in an HTML table

If I made it sound like a lesson, I'm sorry about that.

Lol no, don't worry about it. I'm not ashamed of taking lessons from more experienced guys like you and others on the site, that's one of the reasons I started this topic in the first place :)

al_jamal

Member

Re: Setting the sizes of columns in an HTML table

table-layout:fixed

could help you in your table too