Question

我想格式化我的第一个表格的列，其大小与其他表格相同。我无法这样做。

在我的第一个表（table1）中，列没有很好地排列为第二个和第三个表（table2＆amp; table3）。我想保持表大小以及相同大小的列。

需要帮助。

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

您需要为所有表定义第一个单元格的宽度。将以下内容添加到CSS的末尾

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

格式化表

1 个答案: