Do the last block in the table occupy the remaining space in the row?

Trying to create an HTML email calendar and struggling with getting the last td to fill the remaining space without affecting the width of other rows. Is there a way to increase the width of just the 4th block on the last row to fill the empty space?

Here's a link to a fiddle with the code: https://jsfiddle.net/b11cj5j0/9/

<table align="center" border="0" cellpadding="0" cellspacing="0" width="100" style="background-color:#FFFFFF; border:1px solid #CCCCCC;">
<tr>
    <td align="left" valign="top" style="padding:5px;">
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td align="center" valign="top" style="background-color:#BB0000; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; padding-top:5px; padding-bottom:5px; text-align:center;">
                    January
                </td>
            </tr>
            <tr>
                <td align="center" valign="top" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size:48px; font-weight:bold; line-height:100%; padding-top:10px; padding-bottom:5px; text-align:center;">
                    1
                </td>
            </tr>
        </table>
    </td>

htmlcss

Answer №1

Achieving this can be done by utilizing the colspan attribute.

<table align="center" border="0" cellpadding="0" cellspacing="0" width="100" style="background-color:#FFFFFF; border:1px solid #CCCCCC;">
   <tr>
<!-- ... preceding rows and cells ... -->
        <td colspan="4" align="left" valign="top" style="padding:5px;">
            By implementing this code, the desired outcome can be accomplished.
        </td>
    </tr>
</table>

Additionally, to merge cells vertically, you can use the rowspan attribute.

Answer №2

Here's a neat trick for you:

table {
  width: 100%;
  border: 1px solid black;
  border-collapse: collapse;
}
td + td {
  border-left: 1px solid black;
}
td:last-child {
  background: green;
}
<table>
  <tr>
    <td>td One Two Three</td>
    <td>td Two Three Four</td>
    <td>td Three Four FiveThree Four FiveThree Four FiveThree Four FiveThree Four Five</td>
    <td>td Four Five Six</td>
    <td>&nbsp;Last</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

Having trouble with the preview feature when resizing images

Before trying to implement the JSFiddle was working correctly: http://jsfiddle.net/qa9m7t33/ However, after attempting to implement it, I encountered some issues: http://jsfiddle.net/z1k538sm/ While trying to resize an image, I realized that this example ...

javascriptjquerycss

Choose the desired options to add to the selection box

Here is a question that I have: <select class="myselect"> <option value="option 1">option 1</option> <option value="option 2">option 2</option> <option value="option 3">option 3</option> <option value="option 4 ...

jqueryhtmlselect

Is there a way to simultaneously apply underline and color to specific portions of text in a TextView?

Currently, I'm facing an issue with a string in my EditText that contains an URL link. I want to make this link stand out more by adding an underline and changing its color to blue. However, I am able to add the underline using the "u" tag and Html.f ...

androidhtmlfontscolorstextview

MUI useStyles/createStyles hook dilemma: Inconsistent styling across components, with styles failing to apply to some elements

I have been trying to style my MUI5 react app using the makeStyles and createStyles hooks. The root className is being styled perfectly, but I am facing an issue with styling the logoIcon. Despite multiple attempts to debug the problem, I have not been suc ...

javascriptcssreactjsmaterial-ui

Style the labels on the axis of Frappe Charts with colors (potentially utilizing the appropriate CSS selector)

Is it possible to style the x and y axis labels in a Frappe chart with different colors? https://i.stack.imgur.com/A3vUq.png While trying to identify the CSS selectors using Chrome DevTools, I found that a single text element (representing an x axis labe ...

javascripthtmlcss

Utilizing jQuery to Maintain State Across Page Refreshes with Cookies

Currently, I am attempting to create a script that can retain its state even after the page is refreshed. Here is my progress so far: Utilizing jQuery: $(window).ready(function() { var voteId = $('.gallery-item a'); $(voteId).click(function() ...

javascriptjqueryhtmlperformancecookies

Enhancing productivity with a more streamlined process for creating a responsive website design through the optimization of

I recently had the task of placing two images in a band on a webpage and ensuring they were responsive to different screen sizes. Image 'a' represented a circular logo, while image 'b' was a rectangular logo. The red band served as the ...

cssresponsive-designworkflow

Creating a larger spinning div using CSS3 animation

I am looking to add a fun hover effect to my div where it spins and zooms in at the same time. Here is what I have so far: [html] div class="myMsg">> <p id="welly" style="color: #009">Welcome to Y3!<br><br><br>T ...

htmlcss

Implementing overflow-x: hidden in React JS for enhancing mobile user experience

In my current React project, I encountered an issue where setting overflow-x: hidden in the index.css file for the body tag worked fine on desktop screens but not on mobile. I read that adding it to the parent element would be a better solution, however, ...

htmlcssreactjs

Instructions for developing an offset plugin for an HTML5 video player

I'm currently working on developing an offset plugin that allows playing a specific portion of a video in an HTML5 video player. While there is an existing plugin for video.js available at videojs-offset plugin, I am now experimenting to adapt this p ...

javascriptjqueryhtmlvideo

Struggling to use GSAP to control the timeline with my custom functions

I'm attempting to create a greensock animated banner with the ability to switch between different scenes. I've made progress by setting up the timeline for each scene's intro and outro animations using the GreenSock API documentation. Howeve ...

jqueryhtmlcssgsap

Include a border around the list items within two separate columns

I am trying to create 2 columns using li and want to add borders to each of them. However, I'm facing an issue where there are double borders for 2 li. This is the code snippet I have tried: .ul1 { column-count: 2; column-gap: 0px; } .li1 ...

htmlcsscss-selectors

Is there a way to position text to the right of an image?

Looking for some help with aligning text to the right of an image within a hyperlink. I want the hyperlink to fill the rectangle and achieve a specific layout similar to attachment1, but currently getting something different like attachment2. If anyone ha ...

css

How come inactive links are still able to be clicked on?

I have been experimenting with various methods to disable links, but I seem to be unable to prevent them from being clickable. While I was successful in changing the cursor to 'not-allowed' when hovering over the disabled link, it still remains c ...

htmlcss

Instructions on creating a non-editable text area where only copying and pasting is allowed

I am looking to simply copy and paste content into a textarea without needing to make any edits within the field. <form action="save.php" method="post"> <h3>Text:</h3> <textarea name="text" rows="4" cols="50"></textarea ...

javascriptjqueryhtmlcss

Designing rows and columns using Angular CSS within an ngFor loop

Is there a way to align items in a row or column based on conditions within an *ngFor loop? I want the input type to display on the next line if it is textarea, and on the same line otherwise. Check out this Stackblitz Demo for dynamically generated HTML ...

cssangular6ngfor

Steps for including a path to a base64 encoded image

I am currently facing a challenge in embedding images into my emails where I need to encode them using an online tool. The issue I am encountering is that the email template I am using has a dynamic URL, with ${loginurl}/images as the path to my image. H ...

javascripthtmlhtml-email

To ensure responsiveness in JavaScript, adjust the width to 100%

Recently, I came across this piece of code: <div style="text-align:center; max-width:500px; width:100%; margin:auto"> <script type="text/javascript" src="transition_example.js"></script></div> Here is the content of transition ...

javascriptjqueryhtmlcss

Ways to Personalize Navbar in the Bulma Framework

How can I make the <router link> element in my navbar component full width? I'm also looking for keywords related to achieving this layout. Here is an image of the issue: https://i.sstatic.net/2f2b0BcM.png I want a layout that spans the full ...

cssvue.jsvuejs3bulma

Issue accessing image file located outside of script directory

Issue: Difficulty synchronizing images between 2 folders I have a project with 2 image directories: Home/user/public_html/image Home/user/m.fruit.com/image The public_html folder is for the desktop version of the site The m.fruit.com folder serves the ...

phphtml