-1

I have a simple Html layout problem. I want the table to adjust as per the width of its table cells but it is adjusting to its parent element.

Any help?

Style is

 <style>
    .one
    {
       width:50px;
       height:30px;
       background:black;
     }
 </style>

HTML:

 <div style="position:absolute;width:200px;height:500px;">
    <table>
    <tr>
    <td class="one"></td><td class="one"></td>
    <td class="one"></td><td class="one"></td>
    <td class="one"></td><td class="one"></td>
    <td class="one"></td><td class="one"></td>
     <td class="one"></td><td class="one"></td>
    <td class="one"></td><td class="one"></td>
    </tr>
</table>
</div>
2
  • how many columns are you planning to give in it?? Jul 13, 2012 at 4:51
  • about 10 to 11 or more...i basically want the table to be much wider than the parent div element and set div attribute overflow to hidden
    – manojadams
    Jul 13, 2012 at 4:54

3 Answers 3

0

Placing some content in the table and changing background colors show it does expand to content and not the div container... It should do what you want, unless you have some CSS that defines parameters of table so check if external CSS rule for table.

<div style="position:absolute;width:200px;height:500px;background-color:ff0033;">
<table bgcolor="blue">
<tr>
<td class="one"></td><td class="one">wewer</td>
<td class="one"></td><td class="one"></td>
<td class="one"></td><td class="one"></td>
<td class="one"></td><td class="one"></td>
 <td class="one"></td><td class="one"></td>
<td class="one"></td><td class="one"></td>
</tr>
</table>
</div>
0
0

Hey now use the css and define the width of table and td using its class one

as like this

table{
width:100px;
// other css as requirement layout 
}
.one{
width:50px;
  // other css as requirement layout
}
1
  • i wanted the table to adjust as per the row width which will be the width of all total table data(<td>) and not assign it like this...
    – manojadams
    Jul 13, 2012 at 4:48
0

According to your comments in this thread,

  • You want a single row i.e. All <td> in one <tr>
  • Table to adjust as per the row width which will be the width of all total table data <td>

Wel, you do got a single row and the content of table is adjusting accordingly if you see stare closely.

If you want elements to play automatically with dimensions all you need to do is pick the right element at right place and don't mess them with their dimensions. However, sometimes you need to adjust the dimensions but if the foundation is strong it will reflect in design.

Setting width of table elements will not make any exception for table. It WILL ADJUST ITSELF according to the contents. You do not anything special to make it work like this.

if you have set overflow:hidden of parent your output would be something like this. Please revise this with more clearer picture.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.