HELLO..
I've been designing web pages in dreamwaever 8 and i have put a table inside a div. No matter what i try the table wont scale accordingly inside the div. It always scales along the div. its width is 200px but automatically scale up to somewhere around 500px.. :(
If i remove div tag, then the table scales without any trouble.
what can i do for this?
thank you...
It won't work outside dreamweaver either.
Add a style for div tags:
div {display: table-cell;}Then the div will expand itself to fit the table inside.
Thankx for the reply..!
the thing is, my table width is smaller than the div. but still it scales larger...
also the css style i applied does not work for the table.
table{
background-color:#003333;
}i tried applying your code, but still its the same... and here i attached a screen shot of my design.
First, set your CSS like this.
div#kol {width:200px ; height:auto:}
table {width:100%;}As your div is 200px width. hope this will solve.
you mean... the id of the div tag you have taken as kol right???
yeah! working??
Thanks for your reply!
No, it does not work... Your code stretches my div tag along the table... But thats not the way i want it to work.. i need to change the width of the table, keeping the div tags width same. :confused::'(:-/
Here's a small table inside a div. Created in Dreamweaver CODE view. I added some extra CSS to show different methods of formatting the table cells. Hope this helps.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#container {
height: 300px;
width: 500px;
border: thin dotted #0F0;
}
#small_table {
float: left;
width: 200px;
border: thin solid #CCC;
padding-top: 20px;
padding-left: 20px;
}
#small_table tr {
padding: .5em;
height: 2em;
}
#small_table td {
padding: 2%;
width: 33.3%;
}
-->
</style>
</head>
<body>
<div id="container"><p style="margin: 0; float: right;">div id #container 500px X 300px</p>
<table id="small_table">
<caption>
table id #small_table
</caption>
<tr>
<td>r1c1</td>
<td>r1c2</td>
<td>r1c3</td>
</tr>
<tr>
<td>r2c1</td>
<td>r2c2</td>
<td>r2c3</td>
</tr>
<tr>
<td>r3c1</td>
<td>r3c2</td>
<td>r3c3</td>
</tr>
<tr>
<td>r4c1</td>
<td>r4c2</td>
<td>r4c3</td>
</tr>
<tr>
<td>r5c1</td>
<td>r5c2</td>
<td>r5c3</td>
</tr>
</table>
</div>
</body>
</html>this do works thanx!
but, unfortunately...
my design is totally based on div tags... there is another parent div tag, when i remove that parent div. your code works. But i need to keep that div tag also... i can only hope... there is a solution for this parent div...
thanx a lot all of you..!
yes u can also use z-index for divs
If you could post a sample of your markup and style it would be a lot easier to determine where any problem starts. You might want to look at the w3c box model recommendations at http://www.w3.org/TR/CSS2/box.html.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.