Question

I have a jsfiddle application which you can access here. Now when you open the application, please type in a question in the textarea on top and please select an option by clicking on “Option” and selecting one of the 2 options. Once you have done this then click on the “Add Question” button.

You will see you details outputted in the table below. The problem is however that since I made the table below a scrollable table with fixed headers, all of the content appears in the first row only “Question No”. This content you have added should go under 5 columns “Question No”, Question”, “Option type”, “Number of Answers” and “Answer”.

So what my question is that why is all of the content appear under one column only and how can this be fixed? Please use the fiddle to test your code.

To see the table scroll bar, after you typed in your question and select an option then just keep clicking on the “Add Question” button in output rows until you see the table scrollbar on the side.

Answer 1

You can’t jam divs into tables. Content goes inside of <td>s or <th>s Fixed

<table>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>  
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

EDIT: If what you’re really interested in is a fixed header, then there are many solutions available. The first one I tried was table fixed header a jQuery plugin

$('#qandatbl').fixheadertable({height: '200'});

jsFiddle