Adjusting the height of table cells for perfect alignment

My goal is to align table cells with an image by adjusting the height of each row. However, I am facing difficulties as the rows are not evenly spread out and do not use the whole percentage allocated. Ideally, I want a 725px high table with equally distributed cells. How can I ensure that they are evenly spread?

Visit this link for more details.

This is how I am currently setting the height:

tr {
  height: 2.8571428571429%;
}

I am aware that using height could cause issues with long text content making rows too tall due to multi-line text. Is there a better approach to achieve even distribution?

htmlcss

Answer №1

There are only 35 columns in the table from your provided link, but you are using percentages corresponding to 40 columns.

To fix this, simply add the following code:

<tr><td>lala</td></tr>
<tr><td>lala</td></tr>
<tr><td>lala</td></tr>
<tr><td>lala</td></tr>
<tr><td>lala</td></tr>

With 40 columns, everything should work perfectly fine.

Here is the link for reference.

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

The slides on my Bootstrap carousel are failing to display

I attempted to study a Bootstrap carousel code for better understanding, but unfortunately, the slides are not functioning correctly. The first slide remains static without any movement. Any suggestions on how to resolve this issue? Below are the HTML and ...

htmlcsstwitter-bootstrapbootstrap-4

Issue with Async pipe when utilizing autocomplete functionality

HTML Code <mat-form-field> <input type="text" matInput class="formControl" [formControl]="name" [matAutocomplete]="auto" > <mat-autocomplete #auto="matAutocomplete"> <mat-option *ngFor="let option of city | async" [valu ...

htmlangular

Utilizing React and Material-UI to Enhance Badge Functionality

I am exploring ways to display a badge icon when a component has attached notes. I have experimented with three different methods and interestingly, the results are consistent across all of them. Which approach do you think is the most efficient for achiev ...

javascripthtmlcssreactjsmaterial-ui

Assist with JavaScript Programming

Can someone assist me in creating functionality for the "Show Picture" button to toggle the visibility of the picture when clicked? I've been trying to achieve this using an If/Else statement for a school project but have been struggling with it. Any ...

javascriptjquerycss

Can microdata be concealed using CSS without any problems?

Imagine having an HTML document filled with a substantial amount of text. Would it be considered "good" (or at least not bad) practice to include elements containing microdata that are hidden from the user's view? For example: <div style="display ...

htmlmicrodata

Convenient method for extracting the final element within a jQuery section

I need to determine whether the div with the class "divclass" contains an anchor tag. If it does, I have to run a specific block of JavaScript code; otherwise, no action is required. <div class="divclass"> <span> some text</span> ...

javascriptjqueryhtml

Implement a javascript click action to alternate the visibility of an HTML element

Hey there! I'm a newcomer to Javascript and I'm currently working on a click function that will show an input element when a button is clicked, and hide it when the same button is clicked again. I've checked my console for error messages but ...

javascripthtmlfunctiondomaddeventlistener

Setting the minimum and maximum width of the MenuItem (popover) in Material-UI based on the width of the select component

I need the popover width to always match the width of the select component, regardless of the length of the text in the menu items. Setting autoWidth to either true or false is not providing a solution. Below is the code for the select component: import ...

cssreactjswidthmaterial-uihtml-select

CakePHP allows developers to easily include images in their links using the `$this->Html->link` method. However, instead of generating HTML code for the image, it outputs ASCII characters

I can't seem to find the solution in the CakePHP 2.3.0 manual. I am trying to use $this->Html->link with $this->Html->image to create a clickable image. However, I'm encountering an issue where the ASCII rendering of quotes is being g ...

htmlcakephp

React - Separate colors for different containers

I have been struggling with this issue repeatedly, yet I still haven't found the most efficient solution for it. Imagine having 2 DIVs, A and B, both nested inside a container with columns assigned to each. What would be the optimal way to fill a back ...

htmlcssreactjsbackground-color

Is it possible to modify the div id using C# code behind?

I have a division that looks like this: <div id="divAdditionalInfo" runat="server"> //html code here </div> In the back-end code, I want to display a small window (generated by this div) more than once. However, since it's the same div, ...

c#htmlcode-behind

What is the best way to show a default option in a loop while hiding the others without causing an infinite loop to occur?

Currently, I am working on a way to have a default item displayed in a loop while hiding the rest. I would like the hidden items to only display when called upon. The current issue I am facing is that the loop seems to be infinite. I am open to suggestio ...

phphtmlmysqlcss

Unable to adjust the position of the logo image

I cannot figure out how to center the logo over a video background. Any suggestions on what I might be doing wrong? I've tried changing the "position" to relative and absolute, but without any success. #hero video { width:100%; height:100%; p ...

htmlcssbackground

Can you help me troubleshoot an issue I'm having with a basic HTTP-GET request to a Python script hosted on my

I recently came across a tutorial (Simple URL Example:Get Method section) that caught my interest. You can find the tutorial at this link: https://www.tutorialspoint.com/python/python_cgi_programming.htm After following the instructions in the tutorial, I ...

pythonhtmlhttp

Unable to utilize first-child CSS to establish the display

I'm currently using WordPress and it's generating the following code: <aside class="left-hand-column"> <div class="textwidget"> <p></p> ...1 <div class="pdf-download"> <p> ... 2 <a href="http ...

htmlcss

Tips for resolving the "Forbidden compound class names" error that occurs when trying to select an input field

As a newcomer to selenium, I am eager to start testing the login page. The text field below is where I need to input the username: <div class="WODM WNDM" data-automation-id="userName"> <div class="gwt-Label WBEM">Email Address</div><i ...

pythonhtmlselenium

Creating dynamic pie charts with animated effects using JavaScript

Looking to develop an interactive pie chart using JavaScript, I delved into some research and stumbled upon the Google Charts API. However, my primary apprehension lies in the fact that the data is transmitted to Google's server for generating the ch ...

javascripthtmlcharts

Using React JSX to set a dynamic color when hovering over an element

Hello there! Thanks for taking the time to read my inquiry. I have been presented with a challenge involving a specific color chosen by the customer. This color plays a crucial role in the overall application context. I've successfully managed to cha ...

javascriptcssreactjsjsxpseudo-class

Tips for concealing boostrap spinners

Within the main component, I have an @Input() alkatreszList$!: Observable<any[]>; that gets passed into the child component input as @Input() item: any; using the item object: <div class="container-fluid"> <div class="row ...

cssangulartypescriptbootstrap-5

:initial selector malfunctioning in CSS

I was hoping to see the :first selector in action with the example below. Unfortunately, the paragraph did not turn red with a background. Can anyone offer some assistance? p:first{background:red;} <p>This is paragraph 1.</p> <p>This ...

htmlcsscss-selectors