CODEWITHSUNDEEP
htmlcss
kbhomes
kbhomes

Reputation: 308

Set height of absolutely positioned <div> inside <td> to <table>'s height?

I'm working on creating a Gantt chart primarily using D3.js (link to the functioning example). The Gantt chart has vertical gridlines to separate each individual day column (the columns on the right in the picture below), and the whole table has horizontal gridlines which separates each row/project. Here's an example of the generated chart:

An example generated Gantt chart

In order to drastically cut down on the number of elements that are created and improve performance, instead of creating a table cell for each project/date address (which would create #rows * #days elements), I opted to simply draw those vertical gridlines using one absolutely positioned div in the header cell for each day. For example, in the picture, the 30, 31, 1, etc. cells each have an absolutely positioned div whose height I've manually set to the full height of the table. The structure of the chart is like so:

<table>
    <tr><td colspan="5"></td><td>2012-12-30 to ...</td> ... </tr>
    <tr>
        <td></td>
        <td>Est. Duration</td>
        <td>% Completed</td>
        <td>Est. Start Date</td>
        <td>Est. End Date</td>
        <td class="day-cell">
            <div class="inner">
                <div class="background" style="height: 260px;">30</div>
            </div>
        </td>
        <td class="day-cell">
            <div class="inner">
                <div class="background" style="height: 260px;">31</div>
            </div>
        </td>
        <td class="day-cell">
            <div class="inner">
                <div class="background" style="height: 260px;">1</div>
            </div>
        </td>
        ...
    </tr>
    <tr class="project-row">...</tr>
    <tr class="project-row">...</tr>
    ...
</table>

This works wonderfully except for that last caveat of having to manually set the height. Ideally, I'd like to be able to set the height of div.background to 100% in reference to the height of the full table itself, without having to use JavaScript, although if it's absolutely necessary/impossible to avoid, I will concede. This problem is most relevant/noticeable once you begin to add or remove project rows (to simulate this, I just decreased the height of the div's in the picture below):

Improper gridlines

The relevant styles for the classes in the code above are:

Again, here's a functioning example of the chart's HTML and CSS (JSBin). My attempts at solutions so far have included setting the position of the table to relative and various similar things. I've even considered setting the height to something absurd like 9999px and setting overflow-y: hidden on the table but I'd prefer a cleaner solution if there is one.

Upvotes: 2

Views: 1058

Answers (1)

kbhomes
kbhomes

Reputation: 308

Wow, this is a really simple solution and I wish I'd simply thought it through more.

Setting the table to position: relative, removing the positioning from .inner, and then simply removing the top, left, and right styles from .background and setting on it height: 100% caused it to position properly.

I'm guessing the reason is that if you absolutely position an element, it will by default be located at the position where it would have been were it simply statically positioned. Therefore, I can have the div be in the correct location just by not fiddling with the top, left, or right (so that it's positioned in the correct place in the cell), then setting the height to 100% (which is now relative to the table's height), and setting the width of the div.

Upvotes: 1

Related Questions