20049

div style absolute in a table cell

Question:

i have a div with position absolute and width:100% inside a table cell and the width is calculated to window width not to table cell width. the table cell width is also variable so i need that the width of absolute div to be the same as table cell width. how can i do that?

Answer1:

From w3schools.com

An absolute position element is positioned <strong>relative to the first parent element that has a position other than static</strong>.

That part often gets overlooked I think.

So, try setting the td to position:relative and see if that gets you what you are after.

Answer2:

This is the way I got this to work:

<table border="1" class='rel'> <tr> <td><div class='abs'>row 1, cell 1</div></td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> * { margin: 0; padding: 0; } .rel { position: relative; } .abs { position: absolute; background-color: red; top: 1px; /* offset because of table border */ left: 1px; }

Notice the relative style is applied to the table not the tr or td. When I applied it to the td (what i expected was going to be necessary) it did not work in Chrome. Here is a jsFiddle for you to play with:

<a href="http://jsfiddle.net/bNweT/1/" rel="nofollow">http://jsfiddle.net/bNweT/1/</a>

Hope this helps.

Bob

Answer3:

I believe that this can be done only via JavaScript.

<h3>Update</h3>

I tried width: auto;, but if it has position absolute it does not take the width of the parent element in DOM.

(I am testing in Chrome and Firefox)

Recommend

  • Counterpart of .NETs NetworkStream / SslStream in Delphi 7 [closed]
  • Grails filters: can't make it work !
  • How to get poltergeist/PhantomJS to delay returning the page to Capybara until AJAX is loaded?
  • Tkinter Grid Columnspan ignored
  • How to get (-8)^0.333333 = -2 in MATLAB?
  • Color a heatmap in Python/Matplotlib according to requirement
  • Qt - Cannot get lambda to work [duplicate]
  • sql left join returns
  • Why does the font in these TD elements render at different sizes?
  • garbled css name when styling within UiBinder
  • How to open html table in xls on click of a button
  • how to get username into sql trigger when multiple users signed on from asp membership
  • WPF - CanExecute dosn't fire when raising Commands from a UserControl
  • Custom validator control occupying space even though display set to dynamic
  • Read a local file using javascript
  • What is Eclipse's Declaration View used for?
  • req.body is undefined - nodejs
  • sending/ receiving email in Java
  • 'TypeError' while using NSGA2 to solve Multi-objective prob. from pyopt-sparse in OpenMDAO
  • Jquery - Jquery Wysiwyg return html as a string
  • align graphs with different xlab
  • R: gsub and capture
  • SVN: Merging two branches together
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • Unanticipated behavior
  • Comma separated Values
  • using conditional logic : check if record exists; if it does, update it, if not, create it
  • How to delete a row from a dynamic generate table using jquery?
  • Proper way to use connect-multiparty with express.js?
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • Linking SubReports Without LinkChild/LinkMaster
  • Can't mass-assign protected attributes when import data from csv file
  • Append folder name and increment by 1 using batch script
  • Checking variable from a different class in C#
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • java string with new operator and a literal
  • How to load view controller without button in storyboard?