Adjusting the height of table rows based on the content within the <td> element

I am facing a challenge with a table that includes rows with 2 columns - one for images and the other for text. The issue arises when resizing large images in one column, causing the row to take its height from the image cell rather than the text cell. Since the amount of text in each row varies, assigning an explicit height is not feasible. How can I ensure that both the row and the image cell adjust their heights based on the text cell?

<table border="0" cellspacing="0" cellpadding="0" id="articleTable">
    <tr id="row-1" class="articleRow light" >
        <td class="imageCell" id="image-cell-1">
            <img src="images/Support/CFD.png" alt="" class=""/>
            <img src="images/Support/CFD3.png" alt=""  class="" />
        </td>
        <td class="textCell" id="text-cell-1" >
            <div class="articleTextWrapper">
                TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
            </div>
        </td>

    </tr>
    <tr id="row-2" class="articleRow dark" style="">
        <td class="textCell" id="text-cell-2" >
            <div class="articleTextWrapper">
                TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
                TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
                TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
                TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
                TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
            </div>
        </td>
        <td class="imageCell"  id="image-cell-2">
            <img src="images/Support/TM2.png" alt=""   class="" />
            <img src="images/Support/TM1.png" alt=""   class=""/>
        </td>
    </tr>

javascriptjqueryhtmlcssinternet-explorer-8

Answer №1

Perhaps you could use a Javascript method similar to this:

var cells = document.getElementsByClassName("textCell");
for(var j=0; j<cells.length; j++) {
    var height = cells[j].getElementsByClassName("articleTextWrapper")[0].offsetHeight;
    cells[j].parentNode.style.height = height + "px";
}

By doing this, you can give the <tr> a fixed height based on the text content in the cell, allowing you to adjust the image to full height accordingly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Understanding how to open a PNG file in the client-side browser and transform it using PNGJS in React

Utilizing React JS for my application development is a current focus of mine. I have a solid understanding of how to import images within the client/browser folder structure. For example: import maze_text from '../../mazes/images/maze_text.png&apos ...

javascriptrubyreactjsfilereaderpngjs

Tips for displaying HTML content in an AJAX success alert message with ASP.NET MVC and jQuery

I have an action result that sends content in the following format: public ActionResult MyAction() { string mystring = //doing something return Content(mystring , "html"); } Client Side: $.ajax({ url: "/MyController ...

javascriptjqueryajaxasp.net-mvc

JS: The for loop will keep iterating even if the condition becomes false

Can anyone help me understand why my for loop is continuing even after the conditions are met? Unfortunately I can't share the entire file due to its size, but here is a snippet of the loops: for (var j = 0; j < depKeyArr.length; j++) { var di ...

javascriptangularjsfor-loopconditional-statements

In what scenarios would you choose to use "class" instead of "id"?

I am currently utilizing Bootstrap to style my table, which serves as a basic to-do list. My intention is to insert a form input into one cell and place a check button in the cell adjacent to it on the right side. To achieve this, I plan to utilize id="che ...

javascriptjqueryhtmlcss

Enhancing JSON URLs with jQuery's Double-colon Syntax

Working on a project in EZPublish, I am utilizing the EZJScore module to create JSON arrays. The Ezjscore module requires me to use double colons to separate parameters, like this: http://[domain]/ezjscore/call/news::cat::3 After extensive testing, I ...

jqueryezpublish

Unable to close modal after receiving ajax response

Utilizing mdbootstrap for my current project has been a great experience. One area that I am struggling with is implementing an AJAX call upon checking a checkbox, where I expect a response from PHP indicating success (1) or failure (0). However, despite d ...

phpjqueryajaxmdbootstrap

Deciphering the AJAX Response

I just want to express my gratitude to anyone who assists me. However, I am facing issues in parsing my AJAX response correctly: Here is my AJAX Request: $('#sumbit_LoggingGet').on 'click', -> username = $('#login_username&apo ...

javascriptjqueryajaxcoffeescriptlint

Tips for integrating angular signature functionality using fabricjs in the latest version of Angular (Angular 11)

After struggling to make paperjs and the angular-signature library work together, I was at my wit's end. But then, I stumbled upon a different solution that proved to be much better. I realized that posting the solution under the appropriate question ...

javascriptangularfabricjsimplementationsignature

React-Native Error: Invalid element type detected

While attempting to run my React Native app on my iPhone using Expo, I encountered an error displayed in a red background area. Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite ...

javascriptandroidiosreactjsreact-native

Is there a way to include the request body (req.body) in the msg object using express-winston?

My current challenge involves logging {{ req.body }} using the msg: object in express-winston. Even after whitelisting the body with expressWinston.requestWhitelist.push('body');, it still does not appear in the log. export const accessLogger = ...

javascriptnode.jstypescriptexpresswinston

Presenting tailored information within a structured chart

Working on my angular project, I have a table filled with data retrieved from an API. The table includes a status column with three possible values: 1- Open, 2- Released, 3- Rejected. Current display implemented with the code snippet <td>{{working_pe ...

htmlangulartypescript

Troubleshooting: Unable to preview Facebook Page plugin

When I visit the Facebook developer site to get the code for a Facebook page plugin, I use this link. The preview feature works perfectly with pages like "facebook.com/Nike", but when I try it with my own page, "facebook.com/BargainHideout", it doesn&apos ...

javascripthtmlcssfacebook

Is there a way to transform authorid into postid in order to retrieve author information and store it in my authorDocument array?

**Can you help me troubleshoot why this code is not functioning properly? ** let posts = await postsCollection.aggregate([ {$match: {_id: new ObjectID(id)}}, {$addFields: {authorId: { $toObjectId: "$author"}}}, {$lookup: {from: "user ...

javascriptnode.jsdatabasemongodb

The CSS styling from the Angular parent form-control Bootstrap is not being inherited by the child component

I have developed an autocomplete child component that I am integrating into a parent component. However, when I try to apply Bootstrap form-control validation in the parent component, it does not seem to affect this child component - which is essentially a ...

cssangularbootstrap-4

Error message occurs when attempting to use the ->num_rows function on inner join statement and accessing a property of a non-object

I am attempting to fetch both Product_Name from the product table and Order_Date from the order table, but I keep encountering an issue at line 35 mentioning the "num_rows line". <?php $servername = "localhost"; $username='root'; $password = ...

phphtmlmysqlmysqli

Issues with organizing a Portfolio Gallery

Currently, I am in the process of creating a portfolio page and I am utilizing placeholder images until I have actual projects to showcase. I am encountering difficulties trying to structure one large image with two to four smaller images underneath it, al ...

htmlcss

Is there a way for me to adjust the typography background based on its current status?

Is there a way to dynamically adjust the background color of text based on the status value? Currently, when the status is pending, the background color defaults to yellow. For example, if the status changes to complete, I want the background color to ch ...

javascriptreactjsmaterial-uimern

Exploring table iteration in Angular 7

I am looking to create a table with one property per cell, but I want each row to contain 4 cells before moving on to the next row... This is what I want: <table> <tr> <td> <mat-checkbox>1</mat-checkbox& ...

javascriptangulartypescriptloopsangular-template

Secret icon revealing on mouseover

I devised a simple technique to showcase an element overlapping another, like an overlay, and it was functioning flawlessly until the point where I needed to incorporate a "button" (styled as a Bootstrap anchor) beneath it. Here is the initial setup and h ...

htmlcss

When using Vue.js, styling SVGs with CSS proves difficult as it applies inline styles in the DOM rather than using class names

Recently, I tried to update the appearance of some SVG images using CSS, but to my surprise, nothing changed. Upon inspecting the page, I noticed that the styles were located under the 'element.style' tag, which may explain why my attempts were u ...

javascriptvue.jssvg