Question

I have a table with 3 columns in it and a head. Like this:

Here is my html code:

            <table>
                <thead>
                    <tr>
                        <th class="right"><input type = "checkbox"></th>
                        <th class="left">Afficher: Tous blah blah</th>                            
                        <th class="right">Trier par: Numéro</th>
                    </tr>
                </thead>

                <tbody>
                    <tr><td class="right"><input type="checkbox"></td><td class="left">12/00119</td><td class="left">XXXX XXXX XXXX XXXXXXX XXXXXXXX XXXXXX</td></tr>
                    <tr><td class="right"><input type="checkbox"></td></td><td class="left">12/00120</td><td class="left">YYYYYY YYYYYY YYYYYYYY YYYYYYY YYYYYYY</td></tr>
                    ...

As you can see, the text in the 2nd col of the header is much more wider than the content of the rows below it. So the Heading text is wraped. Please note that the 3rd col of the header is right align.

My question: is it possible to have the heading text (of 2nd col) to continue on the same line BUT not expanding the corresponding column of the main rows of the table.

Here is what I would like to achieve:

Thanks.

Answer 1

As of my understanding of tables, what you are trying to do is not possible.

Now, you can split the cols and then rejoin them with colspan, but maybe it’s a better idea to move the header out of the table?

http://jsfiddle.net/5fTDk/

      <table>
            <thead>
                <tr>
                    <th class="right"><input type = "checkbox"></th>
                    <th colspan="2" class="left nobr">Afficher: Tous asdasd asd blah blah <div>Trier par: Numéro</div></th>                            

                </tr>
            </thead>

            <tbody>
                <tr>
                <td class="right"><input type="checkbox"></td>
                <td  class="left date">12/00119</td>
                <td  class="left content">XXXX XXXX XXXX XXXXXXX XXXXXXXX XXXXXX</td></tr>    ...
                </tbody>
                </table>