Home Placing Check Boxes Next To Each Other
Reply: 1

Placing Check Boxes Next To Each Other

cerberus99
1#
cerberus99 Published in 2017-09-14 09:23:07Z

I want to place the check boxes and the tables next to each other with a proper alignment. I can seem to put the three check boxes that I've created beside each other in the same row but I am unable to align them all properly and neatly. I find some difficulties in formatting them by using Notepad++ as my developing tool.

Need help on this one.

Here is the CSS and HTML codes. Under this HTML section, the check boxes consist of respective table created in them. I have separated all the codes with the comment 'Scenario 1,2,3 and Main'.

td.left {
  text-align: left;
}

th {
  border: 1.5px solid #4682B4;
  text-align: center;
  padding: 2px;
}
<!--Scenario 1-->
<form id="checkbox1" method="get" align="left" style="display: inline-block; width:30%;">
  <table style="width:20%" align="left">

    <input type="checkbox" value="select" align="center" id="check1"> Calculate The Number of Head Count When Days Are Fixed<br>

    <tr>
      <td>Number of Days</td>
      <td class="left"><input type="text" id="numDays" /></td>
    </tr>

    <tr>
      <td>Head Count</td>
      <td class="left"><input type="text" name="hc" id="hc" /> Per Shift</td>
    </tr>

  </table>
</form>
<!--End of Form For Scenario 1-->

<!--Scenario 2-->
<form id="checkbox2" method="get" align="left" style="display:inline-block; width:30%;">
  <table style="width:20%" align="left">

    <input type="checkbox" value="select" align="center" id="check2"> Calculate The Number of Days When Head Counts Are Fixed<br>
    <tr>
      <td>Number of Head Count</td>
      <td class="left"><input type="text" id="numHeadC" /></td>
    </tr>

    <tr>
      <td>Number of Days</td>
      <td class="left"><input type="text" name="days" id="days" /> Days</td>
    </tr>

  </table>
</form>
<!--End of Form For Scenario 2-->

<!--Scenario 3-->
<form id="checkbox3" method="get" align="left" style="display: inline-block; width:30%;">
  <table style="width:20%" align="left">

    <input type="checkbox" value="select" align="center"> Calculate The Number of Head Counts According to The Daily Output<br>
    <tr>
      <td>Daily Output</td>
      <td class="left"><input type="text" id="output" /></td>
    </tr>

    <tr>
      <td>Headcount II</td>
      <td class="left"><input type="text" name="hcperday" id="hcperday" /> Per Shift</td>
    </tr>
  </table>
</form>
<!--End of Form For Scenario 3-->
<br><br><br>

<!--Main-->
<form id="radioForm2" method="get" align="center">
  <table style="width:30%" align="center">

    <tr>
      <td>Total</td>
      <td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td>
    </tr>

    <tr>
      <td>Standard Hour</td>
      <td class="left"><input type="text" name="stdHour" id="stdHour" align="center" /> Hour</td>
    </tr>

    <tr>
      <td>Earn Hour</td>
      <td class="left"><input type="text" name="earnHour" id="earnHour" /> Hour</td>
    </tr>

    <tr>
      <td>Output Per Day</td>
      <td class="left"><input type="text" name="perday" id="perday" /> Per Day</td>
    </tr>

  </table>
</form>
<!--End of Form-->
<br><br><br>

Benjamin Schüller
2#
Benjamin Schüller Reply to 2017-09-14 09:36:32Z

I put the corrected input in an answer to show how it should look like. The comment is not the right place for html snippets. But this answer did still not resolve the view problem.

td.left {
  text-align: left;
}

th {
  border: 1.5px solid #4682B4;
  text-align: center;
  padding: 2px;
}
<!--Scenario 1-->
<form id="checkbox1" method="get" align="left" style="display: inline-block; width:30%;">
  <table style="width:20%" align="left">

    <tr>
      <td colspan="2"><input type="checkbox" value="select" align="center" id="check1"> Calculate The Number of Head Count When Days Are Fixed</td>
    </tr>
    <tr>
      <td>Number of Days</td>
      <td class="left"><input type="text" id="numDays" /></td>
    </tr>

    <tr>
      <td>Head Count</td>
      <td class="left"><input type="text" name="hc" id="hc" /> Per Shift</td>
    </tr>

  </table>
</form>
<!--End of Form For Scenario 1-->

<!--Scenario 2-->
<form id="checkbox2" method="get" align="left" style="display:inline-block; width:30%;">
  <table style="width:20%" align="left">

    <tr>
      <td colspan="2"><input type="checkbox" value="select" align="center" id="check2"> Calculate The Number of Days When Head Counts Are Fixed</td>
    </tr>
    <tr>
      <td>Number of Head Count</td>
      <td class="left"><input type="text" id="numHeadC" /></td>
    </tr>

    <tr>
      <td>Number of Days</td>
      <td class="left"><input type="text" name="days" id="days" /> Days</td>
    </tr>

  </table>
</form>
<!--End of Form For Scenario 2-->

<!--Scenario 3-->
<form id="checkbox3" method="get" align="left" style="display: inline-block; width:30%;">
  <table style="width:20%" align="left">

    <tr>
      <td colspan="2"><input type="checkbox" value="select" align="center"> Calculate The Number of Head Counts According to The Daily Output</td>
    </tr>
    <tr>
      <td>Daily Output</td>
      <td class="left"><input type="text" id="output" /></td>
    </tr>

    <tr>
      <td>Headcount II</td>
      <td class="left"><input type="text" name="hcperday" id="hcperday" /> Per Shift</td>
    </tr>
  </table>
</form>
<!--End of Form For Scenario 3-->
<br><br><br>

<!--Main-->
<form id="radioForm2" method="get" align="center">
  <table style="width:30%" align="center">

    <tr>
      <td>Total</td>
      <td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td>
    </tr>

    <tr>
      <td>Standard Hour</td>
      <td class="left"><input type="text" name="stdHour" id="stdHour" align="center" /> Hour</td>
    </tr>

    <tr>
      <td>Earn Hour</td>
      <td class="left"><input type="text" name="earnHour" id="earnHour" /> Hour</td>
    </tr>

    <tr>
      <td>Output Per Day</td>
      <td class="left"><input type="text" name="perday" id="perday" /> Per Day</td>
    </tr>

  </table>
</form>
<!--End of Form-->
<br><br><br>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.302473 second(s) , Gzip On .

© 2016 Powered by cudou.com design MATCHINFO