James
James

Reputation: 1945

Aligning content in html table

I want to align content in html in but not able to do it. Also i want to align checkbox to right and align to second textbox

Here is my html

<table>
    <tbody>
        <tr>
            <td >Age</td>
            <td >
                <select  ></select>
            </td>
        </tr>
        <tr >
            <td >Date changed</td>
            <td>
                <input />
                <input />
            </td>
        </tr>
        <tr>
            <td class="test">Name</td>
            <td>
                <input id="txt1" />
            </td>
        </tr>
        <tr class="Space">
            <td class="test">Is OK</td>
            <td>
                <input id="chk" type="checkbox" />
            </td>
        </tr>
    </tbody>
</table>

Here is link to fiddle

Upvotes: 0

Views: 61

Answers (2)

Dhaval Panchal
Dhaval Panchal

Reputation: 648

try this

    <table style="position: relative; margin-left: 8px;">
    <tbody>
        <tr class="Space">
            <td class="test">Age</td>
            <td colspan="2">
                <select  ></select>
            </td>
        </tr>
        <tr class="Space">
            <td class="test">Date changed</td>
            <td>
                <table style='width:100%;'>
                    <tr>
                        <td style="width: 50%">
                            <input />
                        </td>
                        <td style="width: 50%">
                            <input />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr class="Space">
            <td class="test">Name</td>
            <td>
                <table style='width:100%;'>
                    <tr>
                        <td style="width: 50%">
                            <input id="txtExecuted" />
                        </td>
                        <td style="width: 50%;text-align:right;">
                            <span style='margin-top:2px;'> Is Ok <input id="chkNotExecuted" type="checkbox" /> </span>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>

Upvotes: 1

Alex Char
Alex Char

Reputation: 33218

Change your html to following:

html

<table style="position: relative; margin-left: 8px;">
<tbody>
    <tr class="Space">
        <td class="test">Age</td>
        <td colspan="2">
            <select  ></select>
        </td>
    </tr>
    <tr class="Space">
        <td class="test">Date changed</td>
        <td colspan="2">
            <input />
            <input />
        </td>
    </tr>
    <tr class="Space">               
                <tr>
                    <td class="test">Name</td>
                    <td>
                        <input id="txtExecuted" />
                    </td>
                    <td class="test" style="text-align: right">Is Ok
                        <input id="chkNotExecuted" type="checkbox" />                        
                    </td>                         
                </tr>

    </tr>
</tbody>

fiddle

Upvotes: 3

Related Questions