表列寬度不能用於css

Question

我對編碼非常陌生。在我第一次嘗試我不能使用CSS設置表格的列寬。我也創建了小提琴，請help.Tried不同的方法，但導致每列的寬度相等。想要修復表格中的列寬。 Pl幫助。

參考的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

#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

Answer 2

請移除CSS

表格的佈局：固定;

查看詳細PLZ去 http://www.w3schools.com/cssref/pr_tab_table-layout.asp