Member Avatar for Virux

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)

<HTML>
<HEAD>
	<style> #chat { background:black; overflow-y:scroll; overflow-x:hidden; text-wrap:normal; } </style>
	
	<script>
		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;
		}
	</script>
</HEAD>

<BODY>
	<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>
		</table>
	</div>
	
</BODY>
</HTML>
Edited by Virux because: n/a
  • 3 Contributors
  • 2 Replies
  • 96 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by twiss
Member Avatar for Dragennd

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

overflow-y:scroll;

to

overflow-y:auto;

.

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

Edited by Dragennd because: n/a
Member Avatar for twiss

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.