Setting table header alignment based on first row alignment

Question

I would like to set the alignment of a table's headers based on the alignment of the first <td> in each respective column.

<table>
    <thead>
        <tr>
            <th>First Column</th>
            <th>Second Column</th>
            <th>Third Column</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Value One</td>
            <td align="right">Value Two</td>
            <td align="center">Value Three</td>
        </tr>
        <!-- more rows -->
    </tbody>
</table>

In this example, the second <th> would get aligned to the right and the third <th> would get centered. The first <th> would not be affected. Any suggestions/examples of how to accomplish this with jQuery would be very appreciated.

Based on InfernalBadger's answer, this is what I ended up using. Turns out I needed to take into account the CSS text-align property as well as handling multiple tables.

function alignGridHeaders() {
    $('table.grid thead th').each(function (index) {
        var cell = $(this).parents('table:first').children('tbody tr:first td').eq(index);
        var alignment = cell.css('text-align');
        if (!alignment)
            alignment = cell.attr('align');
        if (alignment)
            $(this).css('text-align', alignment);
    });
}

Richard Dalton · Accepted Answer · 2011-03-18 17:46:45Z

3

JSFiddle Example

$('#myTable th').each(function(index) {
    var alignment = $('#myTable tbody  tr:first td').eq(index).attr('align');
    if (alignment )
        $(this).css('text-align', alignment);   
});

I gave the table an ID of myTable for this example.

answered Mar 18, 2011 at 17:46

Richard Dalton

35.8k6 gold badges75 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Phillip Gooch · Accepted Answer · 2011-03-18 18:00:50Z

1

Another, probably far less efficient, method. It does have the advantage of making blank or no align instructions left, but thats not much.

function toprowalign(){
    var pos = 1;
    $('table tr:nth-child(1) ').children('td').each(function(){
        var align = $(this).attr('align');
        if(align==''){align='left';}
        $('table tr th:nth-child('+pos+') ').attr('align',align);
        pos++;
    })
}

answered Mar 18, 2011 at 18:00

Phillip Gooch

5976 silver badges14 bronze badges

Comments

Hacknightly · Accepted Answer · 2011-03-18 17:43:43Z

0

You'll probably want to use the jQuery eq function. This will allow you to simply pass in the number of which element you'd like to modify. In your case, it would probably look something like this

$(document).ready(function(){

  $('#trID li').eq(2).css('align', 'right')
  $('#trID li').eq(3).css('align', 'center')

});

Hope this helps a bit!

answered Mar 18, 2011 at 17:43

Hacknightly

5,1743 gold badges29 silver badges27 bronze badges

Collectives™ on Stack Overflow

Setting table header alignment based on first row alignment

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related