Run this layout in all web browser

[vngx]

Hi there

I am trying to make a form

Edit fiddle - JSFiddle - Code Playground

In which I have made main_block div vertical and horizontal scrollable

but when I run this code in chrome ,opera and IE then some content get split inside div in right hand side(Paste this code in Notepad and run it)

How to make this layout look responsive no matter what browser it is(Mozilla running fine)?

[ronpat]

I notice that you are trying to scroll the form in narrow devices but {overflow:scroll} is on the wrong box. Move it down to

.createSubAdminBlock {
    overflow:scroll;
...

and the form will scroll horizontally in narrow devices… if that is what you want.

 
Unrelated: the nested table must be within a parent table cell, not a table row. What you have now is invalid.

    <div class="createSubAdminBlock">
       <table>
           <tr>
              <td> <!-- ADD Me here and elsewhere where neede -->
                 <table>
                    <tr>
                       <td class="tableHeader">CreateIDFor</td>
                       ...

[vngx]

this is awesome

Edit fiddle - JSFiddle - Code Playground

I am looking for this

[ronpat]

Ok, the scroller is as you wanted it.

Now you need to balance the table’s <td> elements.

[felgall]

@ronpat

the nested table must be within a parent table cell, not a table row.

I have never come across a situation where tabular data contained more tabular data in individual cells that actually made sense when presented as nested tables. A question for the person trying to nest the tables is - Are you sure that you have one of the rare one in a trillion exceptions where nesting tables actually makes sense both to the reader and semantically?

[3wCorner]

Use bootstrap design like these examples from w3schools.com

Bootstrap Tables

[ronpat]

I agree completely. My strategy was to go from a known state to a stable state with balanced tags (always a basic need) and then introduce better framing (without the parent table) as a next step. That was my rationale for not talking about the outer table right away. Since @vngx has not returned, “2 discreet steps instead of 1 more involved step” may have been a weak decision. It was a judgement call.

@vngx, if you are still reading this, in the following example I removed the outer table from your code. I also replaced the <hr ...> horizontal line by applying {margin-top} to the second table. There is NO significant difference in the way the page looks and behaves.

The CSS that adds the margin above the second table:

table + table {
    margin-top:2em;
}

The HTML without the unnecessary parent table:

<div class="main_block">
    <label class="createSubAdminIdText">Create SubAdmin ID</label>
    <label class="fillDetails">Fill Details</label>
    <div class="createSubAdminBlock">
        <table>
            <tr>
                <td class="tableHeader">CreateIDFor</td>
                <td class="tableheader">CreatePW</td>
                <td class="tableHeader">LinkedUnit</td>
                <td class="tableHeader">Name</td>
                <td class="tableHeader">DOB</td>
                <td class="tableHeader">Position</td>
                <td class="tableHeader">Phone</td>
                <td class="tableHeader">Email</td>
            </tr>
            <tr>
                <td class="whitebackground tableValues">SubAdmin</td>
                <td class=" whitebackground tableValues">Yes</td>
                <td class="tableValues"><select><option>Select Unit</option><option>All</option><option>Academy</option><option>Crewing</option><option>Associate</option><option>Office</option></select></td>
                <td class="tableValues"><input type="text" size="32" maxlength="32"></td>
                <td class="tableValues"><input type="text" size="12" maxlength="12"></td>
                <td class="tableValues"><input type="text" size="30" maxlength="30"></td>
                <td class="tableValues"><input type="text" size="30" maxlength="30"></td>
                <td class="tableValues"><input type="text" size="39" maxlength="39"></td>
            </tr>
        </table>
        <table>
            <tr>
                <td class="tableHeader">Remark</td>
                <td class="tableHeader">UploadPhoto</td>
            </tr>
            <tr>
                <td class="tableValues"><input type="text"></td>
                <td class="tableValues"><input type="file"></td>
            </tr>
        </table>
    </div>
</div>

You should also validate your CSS. It contains 1 invalid property and 2 invalid values. If you do not know how to do this, just ask.

https://jigsaw.w3.org/css-validator/