Looking for a solution to create a table with a fixed height of 280px, whether it has 3 or 4 rows.
Is there a method to adjust the row heights based on the number of rows in the table, so that they fill up the table's height?
To clarify, when the table contains 3 rows, each row should take approximately 33% of the total height, and if there are 4 rows, each row should occupy 25% of the height.
To achieve this effect using only CSS, you can set the height of the parent div to 280px and the height of the table to 100%.
#container {
height: 280px;
}
.tableElement{
height: 100%;
border-collapse: collapse;
}
td {
border: 1px solid black;
}<div id="container">
<table class="tableElement">
<tr>
<td>a</td>
</tr>
<tr>
<td>b</td>
</tr>
<tr>
<td>c</td>
</tr>
</table>
</div>
<br /><br /><br />
<div id="container">
<table class="tableElement">
<tr>
<td>a</td>
</tr>
<tr>
<td>b</td>
</tr>
<tr>
<td>c</td>
</tr>
<tr>
<td>d</td>
</tr>
</table>
</div>Hey there, I managed to accomplish it using jQuery.
I believe this solution will come in handy for you.
$(document).ready(function(){
var rowCount = $('.countRow tr').length;
a=280/rowCount;
$('.countRow tr').css('height',a)
})div{height:280px; background:#ccc;}
table{border:1px solid #777; border-collapse:collapse;}
td{border:1px solid #777; border-collapse:collapse;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
<table class="countRow">
<tr>
<td>dsadasdA</td><td>ASSasAS</td>
</tr>
<tr>
<td>dsadasdA</td><td>ASSasAS</td>
</tr>
<tr>
<td>dsadasdA</td><td>ASSasAS</td>
</tr>
<tr>
<td>dsadasdA</td><td>ASSasAS</td>
</tr>
</table>
</div>This is the amazing coding work by Marc Uy. Check it out!
function adjustRow() {
var getRow = document.getElementById('table').getElementsByTagName('td');
var max = -1;
for (i = 0; i < getRow.length; i++) {
var getHeight = getRow[i].clientHeight;
max = getHeight > max ? getHeight : max;
}
for (j = 0; j < getRow.length; j++) {
getRow[j].style.height = max + 'px';
}
}
adjustRow();table {
width: 100%;
min-height: 200px;
}
tr {
background: #ddd;
}<table id="table">
<tr>
<td>
normal
</td>
</tr>
<tr>
<td>
normal
</td>
</tr>
<tr>
<td>
having different height
<br>having different height
<br>having different height
<br>having different height
<br>having different height
<br>
</td>
</tr>
</table>I am looking to organize my images into different folders - one for original pictures and another for thumbnails. However, when I try to upload an image to the thumb directory, it shows up as empty. https://i.stack.imgur.com/5Fybz.png Below is the code s ...
Can someone help me understand why my webpage is off-centered as it scales up? I have set a minimum width of 1000px, but it still appears to be centered at 30%-70%. Any insights on this issue would be greatly appreciated. <!DOCTYPE html PUBLIC "-//W3 ...
I am facing an issue with a simple menu that includes a dropdown feature upon hovering. The code works perfectly fine in Fiddle, however, it fails to work when running the entire page locally on IE. Can someone please assist me? (here's my code at fi ...
Recently, I stumbled upon this intriguing demo showcasing how to search for an artist using the Spotify API. However, despite several attempts, I have been unable to make it function properly. Can anyone provide any tips or guidance on making this work suc ...
Looking for a way to ensure that the height of your overlay matches the height of your carousel, even on smaller screen sizes? The HTML code below demonstrates how to combine simple HTML with a Bootstrap carousel featuring three images, along with an overl ...
After working on my navbar and utilizing this site for guidance, I was able to center it using text align. However, there is an odd indent in the navbar that I can't seem to figure out. This indentation throws off the alignment when centered, giving i ...
Help needed to align MaterializeCSS's radio buttons inline without gaps. Thank you in advance for any assistance! Below is a snippet of the code: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize ...
Is there a way to truncate the title of a mat card when it overflows? I tried using the following CSS: overflow:hidden text-overflow:ellipsis white-space: nowrap However, the style is being overridden by the default mat-card style. I attempted to use mat ...
I'm currently in the process of mastering template literals as I have a project where I need to utilize them. However, I seem to be encountering an issue that I can't quite figure out. Here is the code that is currently working: const classes = ...
I am looking to compare the name of a button I click on with an array in order to find the matching name and then select the corresponding array number. Currently, I have a For loop that retrieves information from every team in the array, but I only requi ...
After addressing the issues raised in my previous inquiry, I have made significant progress on my project and it is now functioning almost exactly as intended. The main purpose of this website is to iterate through the World Of Tanks API to generate cards ...
My pseudo right arrow is not displaying vertically centered within the .nav-link class. Can anyone suggest how I can achieve vertical alignment for my right arrow in an <a> tag? I have already attempted using top:50% but it did not work. Here is th ...
Is there a more effective way to call another page, such as http://www.google.com, and load it into my specific div without using an iframe? I attempted to do so with ajax... $.ajax({ url : 'http://www.google.com', success : function ( ...
I am currently working on a Feedback modal that includes a simple form with fields for Name, rating, and comment. After the user submits the form, I intend to display a custom message such as "Your feedback has been submitted." However, I am facing an issu ...
Currently, my method involves utilizing YouTube for embedding videos and incorporating certain elements that should display on top of the video when clicked on. Regrettably, this functionality operates flawlessly on desktop browsers but encounters issues ...
One issue I'm encountering with Font Awesome 5 is that, when I click on my checkbox, there is an unwanted white background or border that I can't seem to get rid of. /* Updating default snippet color for better visibility of the issue */ body ...
I'm looking to develop a unique web interface where users can divide a "timeline" into multiple segments. Start|-----------------------------|End ^flag one ^flag two Users should be able to add customizable flags and adjust their position ...
I am utilizing vue-select to generate a standard drop-down menu. However, it comes with a search bar by default that I do not need and prefer to keep it simple. I attempted to hide the search bar by using "display: none" which made it disappear. This is t ...
Is there a way to create a relief effect on the bubbles in Kendo UI Bubble charts? Currently, all bubbles appear flat with the 15 provided themes. You can see an example here: It would be great to have a 3D-style option similar to the pie chart (Uniform s ...
Upon receiving a web service response, the data appears as such: <text><span class="TitleServiceChange" >Service Change</span> <span class="DateStyle"> &nbsp;Poste ...