views:

416

answers:

2

I have one table which display data as from Dynamic Content, I want to make table width 100% when there is 6 cols. and table width auto if less the 5 cols.

I tried with CSS but, when there is only two cols , it expand two cols to full width while have table 100% width and looks awkward.

Is there any Javascript , jQuery script available to get this result?

+1  A: 

Depending on how you're loading the dynamic content, there might be an easier way, but this function should do what you need:

function setTableWidth(tableId) {
    myTable = document.getElementById('tableId');
    if (myTable.getElementsByTagName('tr')[0].getElementsByTagName('td').length > 5)
        myTable.style.width = '100%';
    else
        myTable.style.width = 'auto';
 }

Note though, that it won't work if any of the cells in the first row have a colspan. It's simply counting the number of columns in the first row and setting the width based on that.

Cahlroisse
Thank you very much .. Let me try this.
Wazdesign
Did it end up working out for you?
Cahlroisse
+1  A: 

Using jQuery and ensuring you choose the first row in the table body in case the thead has a different layout.

function setTableWidth(tableId) {

    var $tbl = $('#'+tableId);
    var newWidth = $tbl.find('tbody>tr:eq(0)>td').length > 5 ? '100%' : 'auto';
    $tbl.width(newWidth)

 }
redsquare
Thank you RED, I will also try this solution...
Wazdesign