Click here to Skip to main content
15,868,292 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello,

I am getting a problem while using the table in a div.
I need to display my html table according to the div with fixed size.
when my table with data displaying in div,then div width gets increase.
But I want the same div width and the table should re-size itself according to div size.and also the inner html text of the table size gets increase and decrease.it also re-size according to table.
This all should be happen using javascript.

thank you.
Posted
Updated 7-Sep-11 0:01am
v4

Give div a specific size and make table width and height 100%
 
Share this answer
 
Option 1:
surround your cell contents with a SPAN tag, add a css class cellContent to it, as shown below.
Following sample code works only if your table do not contain any images whose size exceeds the size of the parent DIV container.

HTML
<style type="text/css">
	.MYDIV {
		width: 150px;
		border: 1px solid black;
	}
	.cellContent {
		word-break: break-all;
	}
</style>
<div class="MYDIV">
	<table>
	<tr>
		<td>very very long column data asdfiu asdflaasdufyasidyfa asdhf lasdlf <span></span></td>
		<td>very very long column data aiwieyqwrepqywepryq pwe <span></span></td>
		<td>very very long column data aldsfalsdkjflakslfda </td>
	</tr>
	</table>
</div>

Option 2:
add style: overflow in your DIV if you are comfortable with the scrollbars being shown .
HTML
<style type="text/css">
	.MYDIV {
		width: 150px;
		overflow: auto;
		border: 1px solid black;
	}
</style>


Thanks & Regards,
Niral Soni
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900