Question

I have a responsive table (set at 100% width within variable div width) in which I’m trying to ‘reset’ the colspan so that the next table row does not inherit the fixed width tds.

In my example the numbers td (1 to 7) have a fixed width of 40px which is given by the class ‘position’. The next table row has two buttons, which should be 50% each. I can do this by adding the half class in the example, but this undoes the width of the ‘position’ class. As I have 8 tds I give the buttons each a colspan of 4, but the last button td inherits the width of the 4 ‘position’ classes, so it’s set at 160px fixed.. is it possible to clear the colspan and the fixed width of it?

The numbers could depend (1-7) so adding a colspan with equal number of the numbers would not be a good solution.

Demo

Answer 1

As I said in the comment

“The code is working good. But the first td has biggest width than others. colspan="4" is selecting first 4 tds (name, 1, 2, 3) and the second colspan is selecting other 4 tds (4, 5, 6, 7).”

This can not work with td. Try this way if you want.

HTML

<tr>
    <td colspan="8">
        <div class="half"><a href="#" class="button">Button one<a/></div>
        <div class="half"><a href="#" class="button">Button two<a/></div>
    </td>
</tr>

CSS

.half{
    float: left;
    width: 50%;
}

DEMO: http://jsfiddle.net/enve/zt5W9/2/