HTML5 Colspan - alternative [closed]

Answer 1

You could use a grid like structure, using divs.

<div>
    <div class='headerrow'>

    </div>
    <div class='bodyrow'>
        <div class='bodycell'>

        </div>
        <div class='bodycell'>

        </div>
    </div>
</div>

Answer 2

The effect of colspan can be simulated using a table with dummy empty cells <td></td> for the slots that are to be spanned and absolutely positioning the cell that should span them. You need a relatively positioned wrapper div for the table, since you cannot directly make the table the frame of reference for positioning.

It gets rather ugly, especially since you need to worry about the row height – because making a cell absolutely positioned takes it away from table formatting. You could deal with this by using a copy of the cell content as the content of the dummy cell to be spanned. See jsfiddle.

It get complicated, so any software that cannot handle a simple colspan may fail to deal with this too (at least if it is responsible for rendering the document).

Answer 3

$(document).on('click', 'input#submitHtml', function(){
    $('htmlToSend').find('tr').removeAttr('colspan');
    // Submit the form.
});