Table specific column width

[eluser]Mutsop[/eluser]
Hi how can you give custom column widths to your table template?
I mean each column has to have a different width.


Any ideas?

regards

[eluser]Nick_MyShuitings[/eluser]
http://lmgtfy.com/?q=HTML+table+column+width&l=1

EDIT: stupid twitchy enter key. Could you clarify a bit more? are you using the table helper? If so I have a site that I used it in which I modified for percentage based widths. In that case ignore the sarcasm of the lmgtfy.com and I'll see if I can find the file.

[eluser]Mutsop[/eluser]
Hehe, great url

No it's indeed when using the table_helper.

[eluser]Nick_MyShuitings[/eluser]
... searching old source code now....

[eluser]Nick_MyShuitings[/eluser]
K, just checked through my source code to see how I did that one site back in the day (last time I used the table helper). I hacked the column widths onto the table after the fact with jQuery.

That said... the table helper really does not help you in any way. Its not that much harder to write a foreach in your view file that will loop through all of the rows... in fact the table helper literally just does that. That is the approach that I have taken in all future project, mainly since I wasn't willing to take the time to extend the class for something that is so easy to do in html.

[eluser]Mutsop[/eluser]
I hope the devs would check into that.
I don't see why such functionality wouldn't be implemented.

Well I'll follow your idea then

Thanks

[eluser]cideveloper[/eluser]
add a class definition to your table using

Code:

$tmpl = array ( 'table_open'  => '<table class="templ_table">' );

$this->table->set_template($tmpl);

and then your table will look like this

Code:

<table class="templ_table">
<caption>Colors</caption>
<tr>
<th>Name</th><th>Color</th><th>Size</th></tr>
<tr>
<td>Fred</td><td>Blue</td><td>Small</td></tr>
<tr>
<td>Mary</td><td>Red</td><td>Large</td></tr>
<tr>
<td>John</td><td>Green</td><td>Medium</td></tr>
</table>

and then you can use the css nth-child selectors to set widths

Code:

.templ_table tr>:nth-child(1){
    width: 50px;
}

.templ_table tr>:nth-child(2){
    width: 250px;
}

.templ_table tr>:nth-child(3){
    width: 100px;
}

Edit: Crap, this might not work in IE. I cant test this right now.

[eluser]Mutsop[/eluser]
Well that was my first thought, but as you say, it wouldn't work in all versions of IE

[eluser]cideveloper[/eluser]
I dont know if you use jquery but this works in IE if you do use jquery.

Code:

$('.templ_table td:nth-child(1)').css("width","50px");
    $('.templ_table td:nth-child(2)').css("width","300px");
    $('.templ_table td:nth-child(3)').css("width","150px");