【发布时间】：2014-12-20 06:10:46
【问题描述】：
我有一个 900 像素宽的表格，有 13 列。我遇到的问题是我的第一列Tap 不会改变，无论我给它的宽度如何。我想让第一列更小，这样我的最后一列看起来就不会被压扁了。
这是我的桌子的样子：
我什至尝试将style="width: 40px;" 添加到我的第一列，但这并不影响它。
.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>【问题讨论】：
-
表格的 HTML 也会很有帮助。尤其是因为它是一张桌子。
-
表格很麻烦，除非你真的知道如何使用它们。由于表格的计算方式，列的宽度通常最适合使用百分比。
-
Tap列已经很小了。看here -
您是否更改了任何 css @KingShimkus？图片是我的桌子最终的样子，水龙头超宽
-
不，我没有更改任何 CSS。我只是简单地将代码复制并粘贴到 JS Bin 中。
标签： html css html-table