我想将我的第一个表格的列格式化为与其他表格相同的大小。我无法这样做。
在我的第一个表 (table1) 中，列的排列不如第二个和第三个表 (table2 & table3)。我想保持表格大小以及相同大小的列。
需要这方面的帮助。
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>最佳答案
您需要为所有表格定义第一个单元格的宽度。将以下内容添加到您的 CSS 的末尾
table tr td:first-child {
width: 60%;
}
关于html - 格式化表格中的列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46087060/