I want to format my first table's columns in the same size as other tables. I am unable to do so.
In my first table (table1), the columns are not well arranged as the second and the third table (table2 & table3). I would like to maintain the table size and also the columns in the same sizes.
Need help on this.
body { background-color: linen; margin:0; } .table1{ border: 1px solid #dddddd; } .table1 td { border: 1px solid #dddddd; } .table1 th { border: 1px solid #dddddd; background: #00003f; color: #cfffff; } .table2 { border: 1px solid #dddddd; } .table2 td { border: 1px solid #dddddd; font-family: sans-serif; } .table2 th { border: 1px solid #dddddd; background: #cfffff; color: #00003f; } .table3 { border: 1px solid #dddddd; } .table td { border: 1px solid #dddddd; font-family: sans-serif; } .table3 th { border: 1px solid #dddddd; background: #cfffff; color: #00003f; } table { font-family: arial, sans-serif; border-collapse: collapse; width: 70%; text-align: center; } td, th { border: 1px solid #dddddd; text-align: center; padding: 2px; } tr:nth-child(even) { background-color: #dddddd; } input { text-align:center; } #button { width: 200px margin: auto; text-align: center; margin: 10px; }<!DOCTYPE html> <html> <!--Importing CSS file--> <head> <link rel="stylesheet" href="testPoint.css"> </head> <!--End of import--> <!--Start of Table Developing--> <body> <div id="showdata" align="center"></div> <br><br><br> <form id="radioForm" method="get" align="center" > <table style="width:70% table-layout:fixed" align="center"> <!--Attributes of table. Colspan used to insert sub-title for the main title.--> <table class="table1" style="width:70%" align="center"> <tr> <th>Test Points</th> <th colspan="4">Cycle-Time</th> </tr> <tr> <td></td> <td>Edit</td> <td>Yes</td> <td>No</td> </tr> <tr> <label id="group1"> <!--label is used to control the respective group of radio buttons--> <td>Initial (On Arrival)</td> <!--The input box in the 'Edit' column is set as below--> <td><input type="text" value="20" align="center" name="qty" id="qty1" maxlength="4" size="4" readonly="readonly"/></td> <!--The check boxes of 'Yes' and 'No' is created as below--> <td><input type="radio" name="group1" value="Yes"></td> <td><input type="radio" name="group1" value="No"></td> </label> </tr> <tr> <label id="group2"> <td>Drop Test (Portable Only)</td> <td><input type="text" value="60" align="center" name="qty" id="qty2" maxlength="4" size="4" readonly="readonly"/></td> <td><input type="radio" name="group2" value="Yes"></td> <td><input type="radio" name="group2" value="No"></td> </label> </tr> <tr> <label id="group3"> <td>Power Up Test (Mobile Only)</td> <td><input type="text" value="60" align="center" name="qty" id="qty3" maxlength="4" size="4" readonly="readonly"/></td> <td><input type="radio" name="group3" value="Yes"></td> <td><input type="radio" name="group3" value="No"></td> </label> </tr> <tr> <label id="group4"> <td>User Interface Room</td> <td><input type="text" value="60" align="center" name="qty" id="qty4" maxlength="4" size="4" readonly="readonly"/></td> <td><input type="radio" name="group4" value="Yes"></td> <td><input type="radio" name="group4" value="No"></td> </label> </tr> </table> <br><br> <B>-30 Degree C (Cold Temp)</B> <table class="table2" style="width:70%" align="center"> <tr> <th>Test Points</th> <th colspan="4">Cycle-Time</th> </tr> <tr> <td></td> <td>Edit</td> <td>Yes</td> <td>No</td> </tr> <tr> <label id="group5"> <td>ATE Labview RF Testing Extreme</td> <td><input type="text" value="60" align="center" name="qty" id="qty5" maxlength="4" size="4" readonly="readonly"/></td> <td><input type="radio" name="group5" value="Yes"></td> <td><input type="radio" name="group5" value="No"></td> </label> </tr> <tr> <label id="group6"> <td>User Interface Extreme</td> <td><input type="text" value="60" align="center" name="qty" id="qty6" maxlength="4" size="4" readonly="readonly"/></td> <td><input type="radio" name="group6" value="Yes"></td> <td><input type="radio" name="group6" value="No"></td> </label> </tr> <tr> <label id="group7"> <td>Mic Talk Internal Extreme</td> <td><input type="text" value="60" align="center" name="qty" id="qty7" maxlength="4" size="4" readonly="readonly"/></td> <td><input type="radio" name="group7" value="Yes"></td> <td><input type="radio" name="group7" value="No"></td> </label> </tr> <tr> <label id="group8"> <td>Mic Talk External Extreme</td> <td><input type="text" value="60" align="center" name="qty" id="qty8" maxlength="4" size="4" readonly="readonly"/></td> <td><input type="radio" name="group8" value="Yes"></td> <td><input type="radio" name="group8" value="No"></td> </label> </tr> <tr> <label id="group9"> <td>Desense Test</td> <td><input type="text" value="60" align="center" name="qty" id="qty9" maxlength="4" size="4" readonly="readonly"/></td> <td><input type="radio" name="group9" value="Yes"></td> <td><input type="radio" name="group9" value="No"></td> </label> </tr> <tr> <label id="group10"> <td>Tx Stability</td> <td><input type="text" value="60" align="center" name="qty" id="qty10" maxlength="4" size="4" readonly="readonly"/></td> <td><input type="radio" name="group10" value="Yes"></td> <td><input type="radio" name="group10" value="No"></td> </label> </tr> <tr> <label id="group11"> <td>Microphonic Test</td> <td><input type="text" value="60" align="center" name="qty" id="qty11" maxlength="10" size="4" readonly="readonly"/></td> <td><input type="radio" name="group11" value="Yes"></td> <td><input type="radio" name="group11" value="No"></td> </label> </tr> </table> <br><br> <tr> <td><B>+60 Degree C (Hot Temp)</B></td> </tr> <table class="table3" style="width:70%" align="center"> <tr> <th>Test Points</th> <th colspan="4">Cycle-Time</th> </tr> <tr> <td></td> <td>Edit</td> <td>Yes</td> <td>No</td> </tr> <tr> <label id="group12"> <td>ATE Labview RF Testing Extreme</td> <td><input type="text" value="60" align="center" name="qty" id="qty12" maxlength="4" size="4" readonly="readonly"/></td> <td><input type="radio" name="group12" value="Yes"></td> <td><input type="radio" name="group12" value="No"></td> </label> </tr> <tr> <label id="group13"> <td>User Interface Extreme</td> <td><input type="text" value="60" align="center" name="qty" id="qty13" maxlength="4" size="4" readonly="readonly"/></td> <td><input type="radio" name="group13" value="Yes"></td> <td><input type="radio" name="group13" value="No"></td> </label> </tr> <tr> <label id="group14"> <td>Mic Talk Internal Extreme</td> <td><input type="text" value="60" align="center" name="qty" id="qty14" maxlength="4" size="4" readonly="readonly"/></td> <td><input type="radio" name="group14" value="Yes"></td> <td><input type="radio" name="group14" value="No"></td> </label> </tr> <tr> <label id="group15"> <td>Mic Talk External Extreme</td> <td><input type="text" value="60" align="center" name="qty" id="qty15" maxlength="4" size="4" readonly="readonly"/></td> <td><input type="radio" name="group15" value="Yes"></td> <td><input type="radio" name="group15" value="No"></td> </label> </tr> <tr> <label id="group16"> <td>Desense Test</td> <td><input type="text" value="60" align="center" name="qty" id="qty16" maxlength="4" size="4" readonly="readonly"/></td> <td><input type="radio" name="group16" value="Yes"></td> <td><input type="radio" name="group16" value="No"></td> </label> </tr> <tr> <label id="group17"> <td>Tx Stability</td> <td><input type="text" value="60" align="center" name="qty" id="qty17" maxlength="4" size="4" readonly="readonly"/></td> <td><input type="radio" name="group17" value="Yes"></td> <td><input type="radio" name="group17" value="No"></td> </label> </tr> <tr> <label id="group18"> <td>Microphonic Test</td> <td><input type="text" value="60" align="center" name="qty" id="qty18" maxlength="4" size="4" readonly="readonly"/></td> <td><input type="radio" name="group18" value="Yes"></td> <td><input type="radio" name="group18" value="No"></td> </label> </tr> </table> <br><br>
