I am trying to get the internal table to scroll without having it extend beyond it's initial size. For some reason the div gets the scrollbar instead of the table.
I've been working on this all night and I just can't get it to work.
Any help would be appreciated.

To run, just click "Add Content" a few times until it fills up.
This is going to be used for a chat layout eventually, and I need the table(no text field solutions or etc.. I need each content line to be a cell)

	<style> #chat { background:black; overflow-y:scroll; overflow-x:hidden; text-wrap:normal; } </style>
		function talk(s) {
			var t = document.getElementById("chatTable");
			var row = t.insertRow(t.rows.length);
			var cell = row.insertCell(0);
				cell.innerHTML = "<font color=white>" + s;

	<button onclick="talk('Test')">Add Content</button>
	<div style="overflow:auto; height:100px;">
		<table id="table" cellspacing="10px" style="width:100%; height:100%; background:red;">
			<tr><td id="chat" valign="top"> <table id="chatTable"></table> </td></tr>

Edited by Virux: n/a

6 Years
Discussion Span
Last Post by twiss

Not entirely sure how your planning on going about this but you might try changing the "scroll" tag in your





Not sure if that will fix it but that's all I got.

Edited by Dragennd: n/a


I don't exactly know what's wrong, but I wouldn't use tables for this. Just make a single <div id="messsages"/> and add a <div class="message"/> to that, and style .message in your css.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.