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've been working on this seemingly simple problem for days now, but I'm still stuck. I have the following Go code... package main import ( "fmt" "net/http" "html/template" "database/sql" _"github.com/mattn/go-sqlite3" ...
For instance: <form id="example1"> <input type="text" name="example_input"> </form> <form id="example2"> <input type="text" name="example_input"> </form> In the code above, both text boxes have the same name. H ...
I've noticed that the scroll bars are still visible even when I maximize the browser window. I don't see any reason for them to be there. There doesn't seem to be a height issue, so the vertical scrollbars shouldn't be appearing, right ...
I am in the process of developing a website using flexbox, and one key aspect of the design is to hide the navigation bar, specifically the left panel in this JSFiddle, when the viewport width is between 480px and 1023px. The current implementation achieve ...
I've been working on creating a step bar that needs to adapt to any number of steps provided by the backend. Here's what I have so far: https://i.sstatic.net/cj4qZ.png It looks fine, but connecting the circles with bars would be beneficial. How ...
Is there a way to dynamically generate the Form::date() based on the selection of 1? If 1 is selected, then display the Form::date() under the Form::select(). However, if 0 is selected, then hide the Form::date() in this particular view. For example: Sel ...
I am currently using display: table and display: table-cell to vertically align multiple divs. However, I have encountered an issue when animating the opacity with jQuery using either fadeTo() or fadeIn. The problem is that it always adds inline style di ...
Check out this website where the ordered and unordered lists are not aligned correctly. The ideal alignment would have the bullets (or numbers) left aligned. For instance, the number "1." should be aligned to the left on the same line as the heading "Per ...
.row { background: #f8f9fa; margin-top: 20px; } .col { border: solid 1px #6c757d; padding: 10px; } <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://useloope ...
So, I was experimenting with the jQuery .animate() function and decided to change the background color of a div based on how many pixels the user scrolled. Surprisingly, it didn't work as expected. After switching to the .css() function instead, every ...
I am trying to apply a style to a link button element using JQuery. The code I have written is not working. Can anyone provide suggestions on how to achieve this? Below is the snippet of the HTML <div data-role="content"> <a href="#" class= ...
Take a look at this page: At the top right of the website, you'll find a search box. However, it appears to be poorly designed. On this page, you can see the normal and desired behavior: (click on 'advertenties' to view the jquery effect). ...
What is the most effective method for creating this unique shape using CSS3? The square image should be clearly defined. We greatly appreciate any insight you can offer. EDIT: I have put in a lot of effort, but standard CSS methods are not getting me t ...
Imagine I have a URL similar to this: http://localhost:8000/intranet/users/view?user_id=8823 All I aim to achieve is to extract the value from the URL using JavaScript, specifically the user_id (which is 8823 in this instance), and transmit it through an ...
I've encountered an issue with my CSS sprite sheet that my CSS file seems unable to locate the image. Despite following the provided solution here, I'm still facing the same problem. The directory structure of my bundle is as follows: src/ v ...
Trying to make this function: The current issue I'm facing is that when changing a digit (by clicking on a hexagon), I want to save the selected number as the value of a hidden input field next to the digit in the DOM. Any ideas on how to achieve th ...
After spending the entire day trying to find a solution, I am still struggling with a simple task - how do I clear all selections from a group of select option drop downs at once without removing them? I want the selections to revert back to their default ...
I have developed a word correction extension that encloses the incorrect word in a span element. Upon hovering over the word, a drop-down menu with possible corrections should be displayed. However, my current code is not functioning properly. How can I en ...
My goal is to create a feature where users can click on a button within the map and open an external page in Google Maps with specific dimensions (500 X 600) and without the Menu bar, Tool bar, or Status bar. // Custom Button Functionality by salahineo ...
On the page, I want to display articles with alternating positions - one on the left, the next on the right. In this example, all the articles are currently being displayed twice, both on the left and the right side. How can I ensure that only one instanc ...