2017-09-07 14 views
0

最初のテーブルの列の書式を他のテーブルと同じサイズにしたいとします。私はそうすることができません。テーブル内の列の書式設定

私の最初のテーブル(table1)では、列は2番目と3番目のテーブル(table2 & table3)として正しく配置されていません。私はテーブルサイズと同じサイズの列を維持したいと思います。

これに助けが必要です。

body 
 
{ 
 
\t background-color: linen; 
 
\t margin:0; 
 
} 
 

 
.table1{ 
 
\t 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%; 
 
\t 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> 
 
\t <!--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> 
 
\t <!--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> 
 
\t <td><input type="text" value="60" align="center" name="qty" id="qty4" maxlength="4" size="4" readonly="readonly"/></td> 
 
\t <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"> 
 
\t <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> 
 
\t <td><input type="text" value="60" align="center" name="qty" id="qty5" maxlength="4" size="4" readonly="readonly"/></td> 
 
\t <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> 
 
\t <td><input type="text" value="60" align="center" name="qty" id="qty6" maxlength="4" size="4" readonly="readonly"/></td> 
 
\t <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> 
 
\t <td><input type="text" value="60" align="center" name="qty" id="qty7" maxlength="4" size="4" readonly="readonly"/></td> 
 
\t <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> 
 
\t <td><input type="text" value="60" align="center" name="qty" id="qty8" maxlength="4" size="4" readonly="readonly"/></td> 
 
\t <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> 
 
\t <td><input type="text" value="60" align="center" name="qty" id="qty9" maxlength="4" size="4" readonly="readonly"/></td> 
 
\t <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> 
 
\t <td><input type="text" value="60" align="center" name="qty" id="qty10" maxlength="4" size="4" readonly="readonly"/></td> 
 
\t <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> 
 
\t <td><input type="text" value="60" align="center" name="qty" id="qty11" maxlength="10" size="4" readonly="readonly"/></td> 
 
\t <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> 
 
\t <td><input type="text" value="60" align="center" name="qty" id="qty12" maxlength="4" size="4" readonly="readonly"/></td> 
 
\t <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> 
 
\t <td><input type="text" value="60" align="center" name="qty" id="qty13" maxlength="4" size="4" readonly="readonly"/></td> 
 
\t <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> 
 
\t <td><input type="text" value="60" align="center" name="qty" id="qty14" maxlength="4" size="4" readonly="readonly"/></td> 
 
\t <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> 
 
\t <td><input type="text" value="60" align="center" name="qty" id="qty15" maxlength="4" size="4" readonly="readonly"/></td> 
 
\t <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> 
 
\t <td><input type="text" value="60" align="center" name="qty" id="qty16" maxlength="4" size="4" readonly="readonly"/></td> 
 
\t <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> 
 
\t <td><input type="text" value="60" align="center" name="qty" id="qty17" maxlength="4" size="4" readonly="readonly"/></td> 
 
\t <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> 
 
\t <td><input type="text" value="60" align="center" name="qty" id="qty18" maxlength="4" size="4" readonly="readonly"/></td> 
 
\t <td><input type="radio" name="group18" value="Yes"></td> 
 
    <td><input type="radio" name="group18" value="No"></td> 
 
    </label> 
 
    </tr> 
 
    </table> 
 
    <br><br>

+2

表の列は2,3と全く同じ幅です。列の高さも同じです。特定のブラウザに問題がありますか? – iSZ

+0

私はブラウザに問題はありません。すべてのテーブルを分割し始めたときには、これが起こります。 – cerberus99

答えて

4

あなたはすべてのあなたのテーブルの最初のセルの幅を定義する必要があります。 CSSの末尾に次の文字列を追加してください。

table tr td:first-child { 
    width: 60%; 
} 
+0

Pefecto!ありがとう、男。 – cerberus99

+0

心配はいりません!どういたしまして – itodd

関連する問題