我对编码很陌生。在我的第一次尝试中，我无法使用 CSS 设置表格的列宽。我也创建了 fiddle ，请帮忙。尝试了不同的方法但导致每列的宽度相等。想要固定表格中的列宽。请帮助。
引用 jsfiddle http://jsfiddle.net/h8LmU/14/
html代码:
<table summary="other expenses" id="otherexpense_table">
<col class="oc1" />
<col class="oc2" />
<col class="oc3" />
<col class="oc4" />
<col class="oc5" />
<thead>
<tr>
<th align="left" colspan="5"><strong>DETAILS OF OTHER
EXPENSES</strong>
</th>
</tr>
<tr>
<th align="center"><strong>Sl.
No.</strong>
</th>
<th align="center"> <strong>Date/Time</strong>
</th>
<th align="center"> <strong>Details</strong>
</th>
<th align="center"> <strong>Amount</strong>
</th>
<th class="oremove" align="center"> <strong>Edit/Remove</strong>
</th>
</tr>
</thead>
<tbody>
<tr id="tr_other_01">
<td align="center" id="tdosrno_01"></td>
<td align="center" id="tdodate_01"></td>
<td align="left" id="tdodetails_01"></td>
<td align="center" id="tdoamount_01"></td>
<td class="oremove">
<input type="button" id="tdotherbtedit_01" value="Edit" />
<input type="button" id="tdotherbtremove_01" value="Remove" />
</td>
</tr>
<tr id="tr_other_02">
<td align="center" id="tdosrno_02"></td>
<td align="center" id="tdodate_02"></td>
<td align="left" id="tdodetails_02"></td>
<td align="center" id="tdoamount_02"></td>
<td class="oremove">
<input type="button" id="tdotherbtedit_02" value="Edit" />
<input type="button" id="tdotherbtremove_02" value="Remove" />
</td>
</tr>
<tr id="tr_other_03">
<td align="center" id="tdosrno_03"></td>
<td align="center" id="tdodate_03"></td>
<td align="left" id="tdodetails_03"></td>
<td align="center" id="tdoamount_03"></td>
<td class="oremove">
<input type="button" id="tdotherbtedit_03" value="Edit" />
<input type="button" id="tdotherbtremove_03" value="Remove" />
</td>
</tr>
<tr id="tr_other_04">
<td align="center" id="tdosrno_04"></td>
<td align="center" id="tdodate_04"></td>
<td align="left" id="tdodetails_04"></td>
<td align="center" id="tdoamount_04"></td>
<td class="oremove">
<input type="button" id="tdotherbtedit_04" value="Edit" />
<input type="button" id="tdotherbtremove_04" value="Remove" />
</td>
</tr>
<tr id="tr_other_05">
<td align="center" id="tdosrno_05"></td>
<td align="center" id="tdodate_05"></td>
<td align="left" id="tdodetails_05"></td>
<td align="center" id="tdoamount_05"></td>
<td class="oremove">
<input type="button" id="tdotherbtedit_05" value="Edit" />
<input type="button" id="tdotherbtremove_05" value="Remove" />
</td>
</tr>
<tr id="tr_other_06">
<td align="center" id="tdosrno_06"></td>
<td align="center" id="tdodate_06"></td>
<td align="left" id="tdodetails_06"></td>
<td align="center" id="tdoamount_06"></td>
<td class="oremove">
<input type="button" id="tdotherbtedit_05" value="Edit" />
<input type="button" id="tdotherbtremove_05" value="Remove" />
</td>
</tr>
<tr id="tr_other_07">
<td align="center" id="tdosrno_07"></td>
<td align="center" id="tdodate_07"></td>
<td align="left" id="tdodetails_07"></td>
<td align="center" id="tdoamount_07"></td>
<td class="oremove">
<input type="button" id="tdotherbtedit_07" value="Edit" />
<input type="button" id="tdotherbtremove_07" value="Remove" />
</td>
</tr>
<tr id="tr_other_08">
<td align="center" id="tdosrno_08"></td>
<td align="center" id="tdodate_08"></td>
<td align="left" id="tdodetails_08"></td>
<td align="center" id="tdoamount_08"></td>
<td class="oremove">
<input type="button" id="tdotherbtedit_08" value="Edit" />
<input type="button" id="tdotherbtremove_08" value="Remove" />
</td>
</tr>
<tr id="tr_other_09">
<td align="center" id="tdosrno_09"></td>
<td align="center" id="tdodate_09"></td>
<td align="left" id="tdodetails_09"></td>
<td align="center" id="tdoamount_09"></td>
<td class="oremove">
<input type="button" id="tdotherbtedit_09" value="Edit" />
<input type="button" id="tdotherbtremove_09" value="Remove" />
</td>
</tr>
<tr id="tr_other_010">
<td align="center" id="tdosrno_010"></td>
<td align="center" id="tdodate_010"></td>
<td align="left" id="tdodetails_010"></td>
<td align="center" id="tdoamount_010"></td>
<td class="oremove">
<input type="button" id="tdotherbtedit_010" value="Edit" />
<input type="button" id="tdotherbtremove_010" value="Remove" />
</td>
</tr>
<tr id="tr_othertotal" style="display:none;">
<td colspan="3" align="right">Total 3:</td>
<td id="tdothertotal" align="center"></td>
</tr>
</tbody>
</table>
CSS 代码:
#otherexpense_table {
table-layout: fixed;
border: solid #001 2px;
width: 850px;
}
#otherexpense_table.oc1 {
width : 1%;
}
#otherexpense_table.oc2 {
width : 80%;
}
#otherexpense_table.oc3 {
width : 15%;
}
#otherexpense_table.oc4 {
width : 1%;
}
#otherexpense_table.oc5 {
width : 1%;
}
th
{
color : white;
background-color : #6C6CFF;
height : 25;
word-wrap:break-word;
font-size:11pt;
}
td
{
background-color : #CCCCCC;
font-size:10pt;
word-wrap:break-word;
}
最佳答案
关于html - 表格列宽不适用于 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23779881/