CODEWITHSUNDEEP
phpcsshtml-tableoverflow
Wesley Smith
Wesley Smith

Reputation: 19571

Keep table from expanding when text is input with PHP

I have the below nested table and am setting the text content of one of the tds with PHP. Everything works fine except that when the text exceeds the size of the table the table expands. I want to prevent that but style="overflow:hidden" doesn't seem to be working.

<table id="mainEditTable" style="overflow:hidden" width="826px" border="0" cellpadding="5">
  <tr>
    <td class="mainEntryRowVis" id="guestEntries1"><table style="overflow:hidden" class="gstTblPad" width="100%" border="0" cellpadding="0">
        <tr>
          <th width="100%" scope="col">Delete old GDOCS</th>
        </tr>
        <tr>
          <td class="nmBldrEntry" onclick="selectText('nbe1');" id="nbe1"><?php echo $_POST["deleteGdocs"];?></td>
        </tr>
      </table></td>
  </tr>
</table>

This is the text being set to the td >IR#31.XX#32.XX#39.XX#310.XX#33.XX#34.XX#311.XX#312.XX#35.XX#36.XX#313.XX#314.XX#37.XX#38.XX#315.XX#316.XX#5NAMEBUILDER#ER

Here are the CSS classes directly affecting the table:

.gstTblPad th{
    background-color: #D2D0D0;
    color: #666;
    padding:5px; 
}


.mainEntryRowVis{
    border: thin solid #999;
    padding: 0px;
    overflow:hidden;
    table-style:fixed;
}

.nmBldrEntry{
    padding: 15px;
}

What am I doing wrong?

Update: Any way to do this without the th elements being affected? enter image description here

Upvotes: 0

Views: 126

Answers (2)

Martin M&#252;ller
Martin M&#252;ller

Reputation: 2535

You should use table-layout:fixed; as css property-value-pair for your table. Then use overflow:hidden on the tds of this table.

see http://jsfiddle.net/uAhN8/

Upvotes: 1

Andreas Daoutis
Andreas Daoutis

Reputation: 1215

You have to give it a max-width. That worked for me.

max-width: 100px;

/* additional */
word-wrap: break-word;
overflow: hidden;

Break-word means the text will wrap to next line. I don't know if you need it.

Upvotes: 0

Related Questions