CODEWITHSUNDEEP
htmlcss
user1881090
user1881090

Reputation: 741

text is overlapping to next table column

I have a table below:

    <table id="tableqanda" align="center" cellpadding="0" cellspacing="0">
    <thead>
    <tr>
        <th width="6%" class="noofanswers">Number of Answers</th>
        <th width="5%" class="answer">Answer</th>
        <th width="6%" class="noofreplies">Number of Replies</th>
    </tr>
    </thead>
    </table>
    <div id="tableqanda_onthefly_container">
    <table id="tableqanda_onthefly" align="center" cellpadding="0" cellspacing="0">
    <tbody>
        <?php
          foreach ($arrQuestionId as $key=>$question) {
        echo '<tr class="tableqandarow">'.PHP_EOL;
        echo '<td width="6%" class="noofanswers">'.htmlspecialchars($arrNoofAnswers[$key]).'</td>' . PHP_EOL;
        echo '<td width="5%" class="answers">'.htmlspecialchars($arrAnswer[$key]).'</td>' . PHP_EOL;
        echo '<td width="6%" class="noofreplies">'.htmlspecialchars($arrReplyType[$key]).'</td>' . PHP_EOL; 
        echo '</tr>'.PHP_EOL;
        }
?>
    </tbody>
    </table>
    </div>

The table is a scrolling table with fixed headers. But this is not the issue. The issue I have is with the answer column, If you look at the screen shot below, you can see for the first row under the Answer column, the answers are overlapping the column next to it, rather than displaying the rest of the content underneath. Why is this happening?

Below is screenshot:

enter image description here

Below is the CSS:

#tableqanda_onthefly_container
{
    width:100%;
    overflow-y: auto;
    overflow-x: hidden;
    max-height:500px;
}

#tableqanda_onthefly
{
    width:100%;
    overflow:auto;
    clear:both;
}

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

#tableqanda, #tableqanda_onthefly{
    border:1px black solid;
    border-collapse:collapse;
    table-layout:fixed;
}       

#tableqanda{
    width:100%;
    margin-left:0;
    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;
}

Upvotes: 0

Views: 7949

Answers (1)

spooky
spooky

Reputation: 1648

Couple of suggestions: 1. Don't try to put table headers and detail rows into two different tables. I know that is not something you asked but a suggestions. 2. You want to change the CSS for the table so it's not a fix layout.

#tableqanda, #tableqanda_onthefly{
    border:1px black solid;
    border-collapse:collapse;
    table-layout:fixed;
}

your data is bigger than allocated space. You can also use wrap to wrap the text to make sure it does not go out of the layout.

Upvotes: 1

Related Questions