Adjust HTML table cell height to dynamically match content and align to top

I am currently working on creating a table layout where the left column adjusts its height based on content, while the right column needs to have a fixed height of 300.

<table border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
  <td valign="top" width="65%">
    This is cell 1
  </td>
  <td valign="top"  width="35%" height="300" rowspan="3" align="right">
    This is a long cell
  </td>
  </tr>
  <tr>
    <td valign="top" width="65%">This is cell 2</td>
  </tr>
  <tr>
    <td valign="top" width="65%">
      This is cell 3
    </td>
  </tr>
</table>

This is what I have managed to create so far: https://jsfiddle.net/5y33rtm3/1/

https://i.sstatic.net/2s2nj.png

Desired final display:

https://i.sstatic.net/H8YtG.png

htmlcsshtml-tablecss-tablesstyling

Answer №1

To make the third row in the left have a rowspan of 5, you can do the following:

<table border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td valign="top" width="65%">
      This is my 1st cell
    </td>
    <td valign="top" width="35%" height="300" rowspan="7" align="right">
      This is long cell
    </td>
  </tr>
  <tr>
    <td valign="top" width="65%">This is my 2nd cell</td>
  </tr>
  <tr>
    <td valign="top" width="65%" rowspan="5"> <!-- CHANGED HERE -->
      This is my 3rd cell
    </td>
  </tr>
</table>

Alternatively, you can set the height to 100% for the third row like this:

<table border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td valign="top" width="65%">
      This is my 1st cell
    </td>
    <td valign="top" width="35%" height="300" rowspan="7" align="right">
      This is long cell
    </td>
  </tr>
  <tr>
    <td valign="top" width="65%">This is my 2nd cell</td>
  </tr>
  <tr>
    <td valign="top" width="65%" style="height: 100%"> <!-- CHANGED HERE --> 
      This is my 3rd cell
    </td>
  </tr>
</table>

Answer №2

<table border="1" cellspacing="0" cellpadding="0>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
  <td width="65%">
    This represents the first cell
  </td>
  <td valign="top" width="35%" height="300" rowspan="3" align="right">
   This cell is quite lengthy
  </td>
  </tr>
  <tr>
    <td valign="top" width="65%">This is the second cell</td>
  </tr>
  <tr>
    <td valign="top" style="height:100%" width="65%">
      <img src="bug.jpg" style="height:40%;width:40%;" />
    </td>
  </tr>
</table>

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

Creating an element that remains fixed once it reaches a distance of 50px from the top of the screen

Hey there! I'm working with an html div element that currently scrolls along with the page, but I was wondering how I can make it become fixed once it reaches a distance of 50px from the top of the screen. Any ideas on how to achieve this? Just to pro ...

javascriptjqueryhtmlcss

Utilizing Vue.js components and properties to invoke a function

Trying to create a shopping cart button that keeps track of how many times it's clicked, but encountering an issue where the function called by the button doesn't receive the correct parameter. I attempted using {{id}} and :onClick="addThisToCar ...

javascripthtmlvue.js

Implement a context path in Angular 2 for enhanced functionality

Is there a way to change the base URL for my app from http://localhost:4200 to http://localhost:4200/pilot/? I attempted to modify the base href in index.html, but encountered an Uncaught SyntaxError: Unexpected token < This is the code snippet from m ...

htmlangularhrefangular2-routing

The CSS Grid does not align properly in the horizontal direction when displayed on mobile devices

I am currently working on a responsive layout where the header and footer should each take up around 5% of the screen space and remain fixed. The middle section should scroll based on the number of elements within it. Despite using the fr and % values, the ...

htmlcsslayoutresponsivecss-grid

What steps can be taken to prevent an event from being triggered once it has already started but has not yet concluded?

Let's talk about the navigation bar on the website. Clicking on it toggles the menu holder to slide in and out from the side. It's a simple interaction. The bar contains an icon with the text 'MENU'. When you open the menu, the icon cha ...

javascriptjqueryhtmltexteffect

Delivering Access data in HTML format via email

In my MS Access database, I have a report that combines client records from one table (including email addresses) with grouped records fetched from other tables using a Query. I want to send this report directly to each client via email, within the body o ...

htmlvbams-access

Adjust image size with react - personalize styling for react-easy-crop

I am currently working on developing a basic react component that involves cropping images using react-easy-crop. It seems like the style of the react-easy-crop module can be customized with the style prop, which consists of three objects: containerStyle, ...

cssreactjscrop

Having trouble getting CSS "::Before" to work in my HTML code - any solutions?

I've been struggling to make use of the ::before pseudo-element in CSS for a hover effect. Despite going through various tutorials on YouTube, I can't seem to get it to work properly. I'm not sure why this isn't working as expected. ...

htmlcss

Unable to Retrieve Modified Content with $().text();

In the process of developing an app, I am encountering a challenge where I need to transfer user input to another element after processing it. However, I am facing an issue with accessing the updated value of the <textarea> using .text(), as it only ...

javascriptjqueryhtmldom

Tips for enhancing the transition effect of animated gifs on a webpage using JavaScript

In my code, I have an interval set to run every seven seconds. Within this interval, there are two gifs that each last for seven seconds. My goal is to display one of the gifs in a div (referred to as "face") based on certain conditions - for example, if t ...

javascripthtmlcss

php$insert new field into mysql table using form insertcell

How do I insert a column in MySQL? I am struggling with the insertCell form. I have tried but I can't seem to add a MySQL column using my JavaScript code with PHP. I am familiar with Php PDO, but this seems difficult to me. Can someone guide me on ho ...

javascriptphphtmlmysql

Use jQuery to remove an ID from an element using AJAX to interact with a database, then update

Hello, I am currently using jQuery to retrieve ids of multiple fields with ajax and send the data to be deleted via php. Despite being able to delete one item successfully, I am struggling to remove other ids. For example: Within a for loop that retrieves ...

phpjqueryhtmlajax

Modify the icon in the header of MaterializeCSS Collapsible when it is opened

I'm struggling to figure out how to change the icon of a toggled collapsible element. I have been reviewing their documentation but am having trouble making it work as intended. $('.collaps_roles_permission').collapsible({ accordion: tr ...

javascriptjquerycssmaterialize

Pagination functionality in TablePress allows for improved organization and

Currently, I am utilizing the TablePress plugin on my WordPress website and I am aiming to achieve a pagination layout similar to this illustration: . How can I modify the pagination to display the text 'page 1 of X' instead of 'previous&apo ...

htmlcsswordpressdatatable

Having trouble with the $push operator in Mongo DB?

I am facing an issue while attempting to store data in an array within an object in a Mongo model by utilizing the req.params method. Unfortunately, I encounter the following error: MongoError: cannot use the part (friends of friends.username) to traverse ...

htmljsonnode.jsmongodbmongoose

Create a border that does not inherit the opacity of the object

Check out this jsBin for reference: http://jsbin.com/uyonux/1 The hover state is working fine, but the focus state is not. I want the blue color to remain solid #13A3F7 without inheriting the opacity of .4. Is there a way to achieve this without the elem ...

csscolors

A <div> with relative positioning is inhibiting the visibility of absolutely positioned elements without any visible overlap

Recently, I encountered a strange issue on my webpage: Image of page The lines on the left side are supposed to be displayed behind or on top of the text box. However, when I increase their z-index, the lines extend all the way to the top of the page and g ...

javascripthtmlcss

Updating the functionality of one-page scrolling - changing to overlap instead of sliding upwards

Hello, I am currently utilizing a JavaScript library to create a website with full page scrolling. If you want to know about the library, check out this link: For those interested, here is an example of my work on jsfiddle: http://jsfiddle.net/aLjLjxux/ ...

javascriptjquerycssjquery-plugins

Angular package that includes horizontal scrolling functionality with arrow buttons

Currently seeking an Angular 2-6 package featuring a horizontal image scroll with arrows, similar to the functionality on Airbnb: https://i.sstatic.net/BOWzD.jpg Any suggestions or recommendations are greatly appreciated – thank you! ...

cssangularnpm

Is there a way to retrieve the dates from last month using jQuery?

Currently, I am unable to select past dates with the provided code. How can I adjust it to allow for selecting dates from previous months? let firstDay = new Date(); $('#date_filter_startmonthly').datepicker({ startDate: firstDay, endDate: ...

javascriptpythonhtmljqueryajax