Columns in table not aligning in application

Question

I am having trouble align the columns in my table with their table headings, the strange thing that is aligns in the Jsfiddle here with no problems: http://jsfiddle.net/m4HB3/68/

But in my application with the exact same code, it does no align the columns correctly with their headings: application

My question is what do I need to include in the application in order to fix this alignment issue in the application?

Below is code:

HTML:

<table id="tableqanda" cellpadding="0" cellspacing="0">
    <thead>
    <tr>
        <th width="5%" class="questionno">Question No</th>
        <th width="23%" class="question">Question</th>
        <th width="7%" class="option">Option Type</th>
        <th width="6%" class="noofanswers">Number of Answers</th>
        <th width="7%" class="answer">Answer</th>
        <th width="6%" class="noofreplies">Number of Replies</th>
        <th width="6%" class="noofmarks">Number of Marks</th>
        <th width="11%" class="image">Image</th>
        <th width="11%" class="video">Video</th>
        <th width="11%" class="audio">Audio</th>
    </tr>
    </thead>
    </table>
    <div id="tableqanda_onthefly_container">
    <table id="tableqanda_onthefly" cellpadding="0" cellspacing="0">
    <tbody>
        <tr class="tableqandarow">
        <td width="5%" class="questionno">Question No.</td>
        <td width="23%" class="question">Question</td>
        <td width="7%" class="option">Option</td>
        <td width="6%" class="noofanswers">Number of Answers</td>
        <td width="7%" class="answer">Answer</td>
        <td width="6%" class="noofreplies">Number of Replies</td>
        <td width="6%" class="noofmarks">Number of Marks</td>
            <td width="11%" class="image"><ul><li>Image</li></ul></td>
        <td width="11%" class="video"><ul><li>Video</li></ul></td>
        <td width="11%" class="audio"><ul><li>Audio</li></ul></td>
</tr>
    </tbody>
    </table>
    </div>

CSS:

#tableqanda_onthefly_container
{
    max-height: 25px;
    width: 100%;
    overflow-y: scroll;
}


#tableqanda_onthefly
{
    width:100%;
    clear:both;
    table-layout: fixed;
}

#tableqanda_onthefly td
{
    border:1px black solid;
    border-collapse:collapse;
}

#tableqanda, #tableqanda_onthefly{
    border:1px black solid;
    border-collapse:collapse;
    word-wrap:break-word;
}       

#tableqanda{
    width:97%;
    margin-left:0;
    table-layout: fixed;
    float:left;
}

#tableqanda td { 
    vertical-align: middle;
    border:1px black solid;
    border-collapse:collapse;
}

#tableqanda th{
    border:1px black solid;
    border-collapse:collapse;
    text-align:center;
}

.tableqandarow{
    border:1px black solid;
    border-collapse:collapse;
}


.imagetd{
    font-size:75%;  
}

.audiotd{
    font-size:75%;  
}

.videotd{
    font-size:75%;  
}

.qandaul{
    list-style-type:square;
}

ul, ul li { margin: 0; padding: 0; }
ul { margin-left: 1.3em; }

why is tablequanda width 93% while tablequanda_onthefly_container is 100%? — LostLin, Jan 25 '13 at 02:42
@CAPSLOCK I wanted to leave some space for the scroll bar so the scroll bar remains at side of table, not being displayed slightly underneath the last column if it added up to 100$ — user1881090, Jan 25 '13 at 02:44
@CAPSLOCK I will update application with 100% width and you can see the problem the scroll bar causes as it is placed little bit under last column. Fiddle is update and application is now updated with 100% width — user1881090, Jan 25 '13 at 02:45
ah I see what you mean, the scrollbar is pushing the rest of the table body to the left — LostLin, Jan 25 '13 at 02:51
@CAPSLOCK Yep if there is a way to have 100% table but scroll bar still placed on the side of the table then that would be great — user1881090, Jan 25 '13 at 02:58
Are you just trying to have a scrollable tbody? You should try out this solution : http://stackoverflow.com/questions/5345390/tabletbody-scrollable — LostLin, Jan 25 '13 at 02:59
@CAPSLOCK What I find strange though is that I have had a previous scroll table which was 100% and worked perfectly, but can't do it for this table. I will include a fiddle and application for this as well and yo will see what I mean. Give me 10 mins — user1881090, Jan 25 '13 at 03:42
Strange when I try to just include the table in the application, it doesn't work, scroll bar is not put in side of table. Very strange as it works in full app — user1881090, Jan 25 '13 at 03:56
@CAPSLOCK There must be a way with the current table structure I have to be able to fix this — user1881090, Jan 25 '13 at 04:08

score 0 · Answer 1 · answered Jan 25 '13 at 02:34

0

Your column widths don't add up to 100%; if you leave it to the browser to resolve this, you can't be certain that the alignment will match what you have in your head.

Change the widths to add up to 100% and you should be fine.

answered Jan 25 '13 at 02:34

Dancrumb

26,597
10
74
130

I actually did trying set width 100% before but problem with that is the scroll bar clipped underneath slightly underneath the last column, this means the alignment is still incorrect because the scroll bar pushes the columns out of alignment. The scroll bar needs to remain at the side of the table as it is now – user1881090 Jan 25 '13 at 02:43
I will update application with 100% width and you can see the problem the scroll bar causes as it is placed little bit under last column. Fiddle and application now updated with 100% width – user1881090 Jan 25 '13 at 02:46

Columns in table not aligning in application

1 Answers1