table column width not working from css

Question

I am very new to coding. In my first try i am not able to set column width of table using CSS. I have created fiddle also, please help.Tried different methods but resulting in equal width of each column. Want to fix column width in table. Pl help.

Refer jsfiddle http://jsfiddle.net/h8LmU/14/

html code:

<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 code :

#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;
}

You need to add a spaces between id and class like this: '#otherexpense_table .oc1' — Leo Zhao
– Leo Zhao, Commented May 21, 2014 at 14:40

wilsont · Accepted Answer · 2014-05-21 10:08:20Z

2

Please remove the css

table-layout: fixed;

for detail plz go http://www.w3schools.com/cssref/pr_tab_table-layout.asp

answered May 21, 2014 at 10:08

wilsont

1416 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Leo Zhao · Accepted Answer · 2014-05-21 14:45:12Z

#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

Collectives™ on Stack Overflow

table column width not working from css

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related