CodeIgniter Forums
Table specific column width - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived General Discussion (https://forum.codeigniter.com/forumdisplay.php?fid=21)
+--- Thread: Table specific column width (/showthread.php?tid=37554)

Table specific column width - El Forum - 01-13-2011

[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

Table specific column width - El Forum - 01-13-2011

[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.

Table specific column width - El Forum - 01-13-2011

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

No it's indeed when using the table_helper.

Table specific column width - El Forum - 01-13-2011

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

Table specific column width - El Forum - 01-13-2011

[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.

Table specific column width - El Forum - 01-13-2011

[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 Smile

Thanks

Table specific column width - El Forum - 01-13-2011

[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.

Table specific column width - El Forum - 01-13-2011

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

Table specific column width - El Forum - 01-13-2011

[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");