CODEWITHSUNDEEP
javascriptjqueryhtml
Mazen
Mazen

Reputation: 171

Dynamically set table cells children div heights to 100% its row height

I am trying to "dynamically" update the height of each divto be equal to its row parent

I have this very simple code that does the job good but throughout all rows. So what I am finallygetting is setting all td divs with the greatest value within the whole table, which I don't want.

What I want is, to set all divs with the greatest height within the same row

Any suggestions?

function setdivHeights() {
    var maxHeight = -1;
    $('tbody tr td div:last-child').each(function() {
        if ($(this).height() > maxHeight) {
            maxHeight = $(this).height();
        }
    });
    $('tbody td div:last-child').height(maxHeight);
    $('tbody td div:last-child').addClass('cell');
}

and this is a simplified sample of my html code:

<table class="tablesorter" id="list">
    <thead></thead>
    <tbody>
        <tr>
            <td><div>1</div></td>
            <td><div>2</div></td>
            <td><div>3</div></td>
            <td><div>4</div></td>
        </tr>
        <tr>
            <td><div>a</div></td>
            <td><div>b</div></td>
            <td><div>c</div></td>
            <td><div>d</div></td>
        </tr>
    </tbody>
</table>

Upvotes: 0

Views: 173

Answers (3)

E. Abrakov
E. Abrakov

Reputation: 463

try to use border-collapse: collapse and border-spacing: 0

table {
  width: 200px;
  border-collapse: collapse;
  border-spacing: 0;

}
tr td {
  padding: 0;
  width: 70px;
  height: 50px;

}
tr td div {
  width: 100%;
  height: 100%;
  background-color: green;
}

Upvotes: 0

juvian
juvian

Reputation: 16068

Just do it per row instead of for all rows in your selector:

function setdivHeights() {
    trs = $('tbody tr');
    trs.each(function(){
        var maxHeight = -1;
        $(this).find('td div:last-child').each(function() {
            if ($(this).height() > maxHeight) {
                maxHeight = $(this).height();
            }
        }).height(maxHeight).addClass('cell')
    }) 
}

Upvotes: 1

webta.st.ic
webta.st.ic

Reputation: 5169

Hi I have no idea if I understood you, but if you have a height and width on the td's, you can simply give to the dive with css a height and width of 100% and it should fill it. The red border is the dimension of the td's and the blue box is the filled div... I think there is no JS needed for such a solution, because, when you give the css 100% of height, it takes the value of it's parent element, in this example the div would take the 20px of his parent, the td, and fill it. If I did'nt understood you're question, than sorry :)

.tablesorter tbody tr td {
  height: 20px;
  width: 70px;
  border: 2px solid red;
}

.tablesorter tbody tr td div {
  height: 100%;
  width: 100%;
  background-color: blue;
}
<table class="tablesorter" id="list">
    <thead></thead>
    <tbody>
        <tr>
            <td><div>1</div></td>
            <td><div>2</div></td>
            <td><div>3</div></td>
            <td><div>4</div></td>
        </tr>
        <tr>
            <td><div>a</div></td>
            <td><div>b</div></td>
            <td><div>c</div></td>
            <td><div>d</div></td>
        </tr>
    </tbody>
</table>

Upvotes: 0

Related Questions