表列宽度不适用于css

Question

我对编码很新。在我的第一次尝试中，我无法使用CSS设置表的列宽。我也创建了小提琴，请帮忙。尝试不同的方法，但每列的宽度相等。想要在表格中修复列宽。帮助。

参考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" />&nbsp;
                    <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" />&nbsp;
                    <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" />&nbsp;
                    <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" />&nbsp;
                    <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" />&nbsp;
                    <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" />&nbsp;
                    <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" />&nbsp;
                    <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" />&nbsp;
                    <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" />&nbsp;
                    <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" />&nbsp;
                    <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;
}

Answer 1

请删除css

  

table-layout：fixed;

详细信息请参阅 http://www.w3schools.com/cssref/pr_tab_table-layout.asp

Answer 2

#otherexpense_table {
    table-layout: fixed;
    border: solid #001 2px;
    width: 850px;
}
#otherexpense_table .oc1 { // add spaces between '#otherexpense_table' and '.oc1'
    width : 1%;
}
#otherexpense_table .oc2 { // add spaces between '#otherexpense_table' and '.oc2'
    width : 80%;
}
#otherexpense_table .oc3 { // add spaces between '#otherexpense_table' and '.oc3'
    width : 15%;
}
#otherexpense_table .oc4 { // add spaces between '#otherexpense_table' and '.oc4'
    width : 1%;
}
#otherexpense_table .oc5 { // add spaces between '#otherexpense_table' and '.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;
}

JSFiddle