Achieve full coverage of a table cell with jQuery by making a div span its entire

Check out this code snippet on jsfiddle: https://jsfiddle.net/55cc077/pvu5cmta/

To address the limitation of css height: 100% only working if the element's parent has an explicitly defined height, this jQuery script adjusts the cell height. Is there a more efficient method to achieve the same result?

<script type="text/javascript">
    $(function(){
    $('.myTable2 tr').each(function(){
    var H1 = $(this).height(); // Retrieve row height
    $(this).find('td:first').css({'height': H1 + 'px', 'line-height': H1 + 'px'}); //Set td height to match row height
    });
});
</script>

Answer №1

Using only CSS: Specify the table cell's style as position: relative;

Then, apply the following styles to a div element:

position: absolute; 
top: 0; 
right: 0; 
bottom: 0; 
left: 0; 
width: 100%;

https://jsfiddle.net/pqz9rf82/

Answer №2

Why are you utilizing a div within the td to apply the background color? Simply set the background color for the td itself as shown below:

table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 0px;
text-align:center;
}

th {
background:#abcdef;
}
.myTable1, .myTable2 {
width:20px;
}
.gray {
background:#b0b0b0;
}
<p>mytable1 without jQuery</p>
<table class="myTable1">
  <tr>
  <th>Column 1</th>
  <th>Column 2</th>
  </tr>
  <tr>
   <td class="gray">1</td>
  <td>10 20 30 40 50 60</td>
  </tr>
  <tr>
   <td class="gray">2</td>
  <td>80</td>
  </tr>
  <tr>
   <td class="gray">3</td>
  <td>75</td>
  </tr>
  <tr>
   <td class="gray">4</td>
  <td>30</td>
  </tr>
  <tr>
  <td class="gray">5</td>
  <td>21 31 41 51 61 100 200</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

What is the purpose of encoding the Jquery Ajax URL twice?

In my JavaScript code, I am utilizing the jQuery ajax function. Here is an example of how it appears: $.ajax({ url: "somepage/" + keyword + "/" + xyz + "/" + abc + "/getbla", (...) If the 'keyword' (value from a textfield) includes a ' ...

What is the best way to send JSON data to Sass in ReactJS?

In my current project, I am developing a React/Redux application with Webpack that showcases UI components and enables users to adjust the colors of those components. The styling is being done using CSS Modules with scss. My preference is to keep all the s ...

Maximizing Efficiency with the jQuery setInterval() Function: Optimizing the Initial Loop

I have implemented the setInterval function to create a loop featuring a Text Slider animation: Visit this FIDDLE for a live demo. The HTML structure is as follows: <div id="Slider"> <ul> <li class="active">Sempe ...

Insufficient image quality on mobile when using HTML5 canvas toDataURL

I've encountered an issue with the toDataURL("image/png") function. My canvas contains various lines, colored shapes, and text. While the resulting png image appears sharp on desktop Chrome, it becomes pixelated and low quality when viewed on mobile C ...

relocate the image with an identical filename stored in the variable

Having trouble moving an image to a new position when clicking on its small thumbnail. I've attempted using jquery's find() function but it doesn't seem to be working... $('#slide1_controls img').click(function (event){ var sr ...

The state of the button remains unchanged in jQuery/Rails 3

After immersing myself in the Hartl Rails 3 tutorial for a few days (about 4 to be exact), I encountered an issue while attempting to convert the site from prototype to jQuery in chapter 12. The problem lies in getting the "follow"/"unfollow" button to upd ...

Send the user to a specified destination

Currently, I am working on creating a form that allows users to input a location and have the page redirect to that location after submission. However, I am facing difficulty in determining how to set the value for action="" when I do not know what the loc ...

Unable to display <div> elements from CSS within the Wordpress Text Widget

Having trouble displaying a <div> from CSS in a Text Widget on Wordpress. <div class=”deffgall-cutlure” ></div> style.css .deffgall-cutlure { display:block; position:relative; width:100px; height:100px; backgrou ...

CssLint detected an unfamiliar property: "fill"

Currently, I am updating the color of an SVG path using CSS: .compute .svg path { fill: #fff; } The functionality is working properly, however, during a CSSLint check, I received this warning: Unknown property: "fill" I am unsure if this is an erro ...

Can you explain the distinction in JavaScript between declaring a variable with `var a = xyz[]` versus `var a = xyz

Can someone clarify the difference between the following statements in JavaScript (or jQuery)? var a = xyz[] var a = xyz{} I tried looking it up online, but couldn't find a definitive answer. If anyone knows the difference, please enlighten me. ...

Tips for adjusting the width of the scrollbar track (the line beneath the scrollbar)

How can I style a scrollbar to match this specific design? https://i.stack.imgur.com/KTUbL.png The desired design specifies that the width of -webkit-scrollbar-thumb should be 5px and the width of -webkit-scrollbar-track should be 2px. However, it is pro ...

Refresh a chart in vue using the chart.js library

Within my Vue application, I have a function that generates a chart. This function looks like this: startChart: function (canvas, type) { // initialize chart.js var ctx = document.getElementById("myChart"); var myDoughnut = new Chart(ctx, { ...

What is the best way to use JavaScript to click on a block and retrieve its attribute value?

Struggling to capture the data-id attribute value of each item on click, despite researching online. Seeking guidance as I navigate the learning process and encounter programming frustrations. document.addEventListener("click", handle); const demo = e. ...

Unable to precisely reach the very bottom of the scrollbar

When trying to move to the bottom of the scrollbar, I seem to reach a bit higher than the actual bottom. https://i.stack.imgur.com/Vt83t.png Here is my code: ws.onmessage = function (event) { var log = document.getElementById('log') ...

How can you modify the color of a <canvas> element using CSS?

Can the HTML5 element's color be modified using CSS as opposed to JS? I am looking to personalize qTips tooltip pointers with specific LESS CSS instructions that cannot be referenced through jQuery. ...

Fetching JSON data cross-domain with the help of JavaScript or JQuery

I am currently attempting to retrieve JSON data from this specific url. However, I am encountering difficulties in making it function as intended. The goal is to seamlessly integrate the school's lunch menu utilizing NutriSlice. We are leveraging Ris ...

Adaptive web layout (Adjusting design based on screen size)

I'm feeling a bit confused about responsive web design. I understand that I can use media queries to apply different stylesheets based on specific screen sizes. For example, a screen at 600px will use one stylesheet while a larger screen will use a co ...

Require assistance with displaying a menu on a website using JQuery

Is there a way to create a menu similar to the one shown in the image below?https://i.sstatic.net/QxNPL.png To learn more about this menu, you can visit their website by clicking on this Link. I have copied some code (HTML code and links to CSS and .js fi ...

Utilize a dynamic approach to add the active class to navigation list items

My files all have a header that includes a navigation bar. I am trying to use jQuery to add the 'active' class to the relevant list items (li). The method I initially thought of involved setting a variable on each page, assigning an ID equal to ...

Apply the "selected" class to the menu located in the common header

I have implemented a menu in the header.php file that will be displayed on all pages such as index.php or contact-us.php. However, I am facing an issue with adding the selected class to the active main category in the menu. The code provided works fine wh ...