表格列宽不会发生变化
我有一张900px宽的表，有13列。我遇到的问题是，无论我给出的宽度如何，我的第一列Tap都不会发生变化。我想让第一列变小，这样我的最后一栏看起来就像压扁了一样。
这就是我的表格：
我甚至尝试在我的第一个专栏中添加style="width: 40px;"，但这并不会影响它。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
.print_ttr {
width: 900px;
border: solid 1px;
border-collapse: collapse;
}
.print_ttr th {
border-color: black;
font-size: 12px;
border: solid 1px;
border-collapse: collapse;
margin: 0;
padding: 0;
}
.print_ttr td {
border-color: black;
font-size: 12px;
border: solid 1px;
border-collapse: collapse;
margin: 0;
padding: 0;
text-align: center;
}
.print_tableInputBox {
width: 100%;
height: 100%;
border: none;
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: black;
text-align: center;
margin: 0;
padding: 0;
border-collapse: collapse;
}
.holder{
width: 100%;
height: auto;
margin: 0 auto;
}
.section{
width: 100%;
margin-bottom: 15px;
}<div class="section">
<div class="holder">
<table class="print_ttr">
<tbody>
<tr>
<th style="width: 30px;">Tap</th>
<th>Primary Voltage</th>
<th>Secondary Voltage</th>
<th>Calculated Ratio</th>
<th>Phase A Ratio</th>
<th>Phase A Excitation[mA]</th>
<th>Phase A Deviation %</th>
<th>Phase B Ratio</th>
<th>Phase B Excitation[mA]</th>
<th>Phase B Deviation %</th>
<th>Phase C Ratio</th>
<th>Phase C Excitation[mA]</th>
<th>Phase C Deviation %</th>
</tr>
<tr>
<td>
<input type="text" class="print_tableInputBox" name="ttr_0_334_7556" value="1">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_1_334_7556" value="28980">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_2_334_7556" value="600">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_3_334_7556" value="48.3000">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_4_334_7556" value="48.1370">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_5_334_7556" value="1.542">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_6_334_7556" value="0.338">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_7_334_7556" value="48.1380">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_8_334_7556" value="2.493">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_9_334_7556" value="0.338">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_10_334_7556" value="48.3220">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_11_334_7556" value="2.398">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_12_334_7556" value="0.045">
</td>
</tr>
<tr>
<td>
<input type="text" class="print_tableInputBox" name="ttr_0_335_7556" value="2">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_1_335_7556" value="28290">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_2_335_7556" value="600">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_3_335_7556" value="47.1500">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_4_335_7556" value="47.2070">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_5_335_7556" value="1.598">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_6_335_7556" value="0.120">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_7_335_7556" value="47.2110">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_8_335_7556" value="2.594">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_9_335_7556" value="0.122">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_10_335_7556" value="47.2250">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_11_335_7556" value="2.525">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_12_335_7556" value="0.159">
</td>
</tr>
<tr>
<td>
<input type="text" class="print_tableInputBox" name="ttr_0_336_7556" value="3">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_1_336_7556" value="27600">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_2_336_7556" value="600">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_3_336_7556" value="46.0000">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_4_336_7556" value="46.0070">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_5_336_7556" value="1.689">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_6_336_7556" value="0.010">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_7_336_7556" value="46.0070">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_8_336_7556" value="2.704">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_9_336_7556" value="0.010">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_10_336_7556" value="46.0160">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_11_336_7556" value="2.601">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_12_336_7556" value="0.010">
</td>
</tr>
<tr>
<td>
<input type="text" class="print_tableInputBox" name="ttr_0_337_7556" value="4">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_1_337_7556" value="26910">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_2_337_7556" value="600">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_3_337_7556" value="44.8500">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_4_337_7556" value="44.9060">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_5_337_7556" value="1.773">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_6_337_7556" value="0.124">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_7_337_7556" value="44.9080">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_8_337_7556" value="2.830">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_9_337_7556" value="0.124">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_10_337_7556" value="44.9160">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_11_337_7556" value="2.736">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_12_337_7556" value="0.147">
</td>
</tr>
<tr>
<td>
<input type="text" class="print_tableInputBox" name="ttr_0_338_7556" value="5">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_1_338_7556" value="26220">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_2_338_7556" value="600">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_3_338_7556" value="43.7000">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_4_338_7556" value="43.7160">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_5_338_7556" value="1.857">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_6_338_7556" value="0.036">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_7_338_7556" value="43.7090">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_8_338_7556" value="2.970">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_9_338_7556" value="0.020">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_10_338_7556" value="43.7130">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_11_338_7556" value="2.874">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_12_338_7556" value="0.029">
</td>
</tr>
</tbody>
</table>
</div>
</div>
1 个答案:
答案 0 :(得分：1)
将代码插入JS Bin here之后，就会出现以下内容：
即使添加了容器div：
您可以尝试将其添加到您的代码中：
.print_ttr th:first-child{
border-color: black;
font-size: 12px;
border: solid 1px;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 30px;
}
我不知道发生了什么，但我很确定这就是你要找的东西。我正在使用Google Chrome。即使在将代码插入代码段之后，它仍然会以这种方式出现。看这里：
.print_ttr {
width: 900px;
border: solid 1px;
border-collapse: collapse;
}
.print_ttr th {
border-color: black;
font-size: 12px;
border: solid 1px;
border-collapse: collapse;
margin: 0;
padding: 0;
}
.print_ttr td {
border-color: black;
font-size: 12px;
border: solid 1px;
border-collapse: collapse;
margin: 0;
padding: 0;
text-align: center;
}
.print_tableInputBox {
width: 100%;
height: 100%;
border: none;
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: black;
text-align: center;
margin: 0;
padding: 0;
border-collapse: collapse;
}<table class="print_ttr">
<tbody>
<tr>
<th style="width: 30px;">Tap</th>
<th>Primary Voltage</th>
<th>Secondary Voltage</th>
<th>Calculated Ratio</th>
<th>Phase A Ratio</th>
<th>Phase A Excitation[mA]</th>
<th>Phase A Deviation %</th>
<th>Phase B Ratio</th>
<th>Phase B Excitation[mA]</th>
<th>Phase B Deviation %</th>
<th>Phase C Ratio</th>
<th>Phase C Excitation[mA]</th>
<th>Phase C Deviation %</th>
</tr>
<tr>
<td>
<input type="text" class="print_tableInputBox" name="ttr_0_334_7556" value="1">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_1_334_7556" value="28980">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_2_334_7556" value="600">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_3_334_7556" value="48.3000">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_4_334_7556" value="48.1370">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_5_334_7556" value="1.542">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_6_334_7556" value="0.338">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_7_334_7556" value="48.1380">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_8_334_7556" value="2.493">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_9_334_7556" value="0.338">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_10_334_7556" value="48.3220">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_11_334_7556" value="2.398">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_12_334_7556" value="0.045">
</td>
</tr>
<tr>
<td>
<input type="text" class="print_tableInputBox" name="ttr_0_335_7556" value="2">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_1_335_7556" value="28290">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_2_335_7556" value="600">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_3_335_7556" value="47.1500">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_4_335_7556" value="47.2070">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_5_335_7556" value="1.598">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_6_335_7556" value="0.120">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_7_335_7556" value="47.2110">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_8_335_7556" value="2.594">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_9_335_7556" value="0.122">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_10_335_7556" value="47.2250">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_11_335_7556" value="2.525">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_12_335_7556" value="0.159">
</td>
</tr>
<tr>
<td>
<input type="text" class="print_tableInputBox" name="ttr_0_336_7556" value="3">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_1_336_7556" value="27600">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_2_336_7556" value="600">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_3_336_7556" value="46.0000">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_4_336_7556" value="46.0070">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_5_336_7556" value="1.689">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_6_336_7556" value="0.010">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_7_336_7556" value="46.0070">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_8_336_7556" value="2.704">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_9_336_7556" value="0.010">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_10_336_7556" value="46.0160">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_11_336_7556" value="2.601">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_12_336_7556" value="0.010">
</td>
</tr>
<tr>
<td>
<input type="text" class="print_tableInputBox" name="ttr_0_337_7556" value="4">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_1_337_7556" value="26910">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_2_337_7556" value="600">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_3_337_7556" value="44.8500">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_4_337_7556" value="44.9060">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_5_337_7556" value="1.773">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_6_337_7556" value="0.124">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_7_337_7556" value="44.9080">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_8_337_7556" value="2.830">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_9_337_7556" value="0.124">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_10_337_7556" value="44.9160">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_11_337_7556" value="2.736">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_12_337_7556" value="0.147">
</td>
</tr>
<tr>
<td>
<input type="text" class="print_tableInputBox" name="ttr_0_338_7556" value="5">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_1_338_7556" value="26220">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_2_338_7556" value="600">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_3_338_7556" value="43.7000">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_4_338_7556" value="43.7160">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_5_338_7556" value="1.857">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_6_338_7556" value="0.036">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_7_338_7556" value="43.7090">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_8_338_7556" value="2.970">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_9_338_7556" value="0.020">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_10_338_7556" value="43.7130">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_11_338_7556" value="2.874">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_12_338_7556" value="0.029">
</td>
</tr>
</tbody>
</table>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？