Once more, the gap between the td's is evident

After closing the last topic because I thought it was completely answered, it turns out that's not the case. Link: Space between two td or tr tags The line-height: 0; isn't very helpful in this situation. In the original work I'm doing with other elements, the line height is condensing all content into a very small line, except for images. While I could apply line-height: 0; to specific td elements and not all tds, the main goal remains to eliminate the space between the tds as it used to be in HTML4, I believe. Hoping someone knows the solution. Thank you!

Here's an ''example''

<table class="main-table-default">
    <tr>
        <td>
            <table class="main-table-header-default">
                <tr>
                    <td><img src="http://i1.ytimg.com/vi/OguOU5cyikI/hqdefault.jpg" border="0">
                    </td>
                </tr>
                <tr>
                    <td><img src="http://i1.ytimg.com/vi/OguOU5cyikI/hqdefault.jpg" border="0">
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>random text<br><Br>
        </td>
    </tr>
</table>

I have found a solution, although it's quite ugly. My current approach involves setting line-height: 0; for a specific td, then setting line-height: 100% for the other tds within that td. It seems complicated and there must be a better way to achieve this. Otherwise, it looks very messy :/

Answer №1

One helpful tip is to always include reset.css at the beginning of your project to eliminate unnecessary spaces. It seems like you may have forgotten to do this. In the meantime, consider adding the following CSS:

CSS:

table, tbody, tfoot, thead, tr, th, td
{        
     padding: 0;
     border: 0;
     font-size: 100%;
     font: inherit;
     vertical-align: baseline;
}

table
{
         border-collapse: collapse;
         border-spacing: 0;
}

Fiddle: http://jsfiddle.net/KEK98/

Remember to include reset.css at the start of your development process.

Answer №2

Avoid leaving any spaces (such as line breaks) before closing your TD elements.

Instead of:

<td><img src="http://i1.ytimg.com/vi/OguOU5cyikI/hqdefault.jpg" border="0">
                </td>

Use this format instead:

<td><img src="http://i1.ytimg.com/vi/OguOU5cyikI/hqdefault.jpg" border="0"></td>

In some cases, depending on your doctype, you might consider omitting the closing </td> tag.

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

Extract the HTML field value from an AJAX drop-down selection, rather than relying on user input

I have a field that allows users to select from a dropdown list using the following code: $(function() { $('.serial_number').live('focus.autocomplete', function() { $(this).autocomplete("/admi ...

Calculate the total width of LI elements and apply it to the parent UL or DIV

Is there a way to calculate the Total LI width and then set the width for the parent div? Here is an example of my code: <ul> <li>dsfdsfdsfds</li> <li>dsfdsfdsfds</li> <li>dsfdsfdsfds</li> <li>dsfdsfdsfds&l ...

Why doesn't setting the SVG viewBox to "0 0 100 100" scale my path to 100%?

My current dilemma involves an SVG path that is only displaying at 50% of its intended size. How can I adjust it to show at 100%? Below is the code snippet in question: <div className="svgPathContainer"> <svg width="100%" he ...

Tips for refreshing only a portion of a webpage using JavaScript/jQuery

I have two distinct navigational sections on my website. The left column has its own navigation menu, while the right column (main content area) contains a separate set of links: My goal is to click on a link in the left-hand sidebar (such as "Resume", "E ...

Learn the process of utilizing Javascript to substitute additional texts with (...) in your content

I am facing a challenge with a text field that allows users to input text. I want to use JavaScript to retrieve the text from the textbox and display it in a paragraph. However, my issue is that I have set a character limit of 50. If a user exceeds this li ...

What is the process for retrieving my dates from local storage and displaying them without the time?

Having an event form, I collect information and store it in local storage without using an API. However, I face a challenge when extracting the startdate and enddate out of localstorage and formatting them as dd-mm-yyyy instead of yyyy-mm-ddT00:00:00.000Z. ...

Encountering an error while submitting form via Ajax to PHP backend

Currently, I am in the process of developing a form that solicits information from a user, including their name, address, amount1, amount2, and a comment. It seems that the radio inputs for amount1 and amount2 are causing issues with my form. Upon submiss ...

I am wondering how to use the value assigned to a variable's textContent as an argument for player input in my JavaScript code

i am currently developing a JavaScript project to create a user interface for my rock, paper, scissors game. Currently, the game only runs in the console and prompts the player for input. So far, I have implemented three buttons (one each for rock, paper, ...

Recursive instruction malfunctioning

I'm currently trying to develop a custom recursion directive, but unfortunately it's not functioning as expected. I have followed the instructions outlined here: Recursion in Angular directives For reference, you can view the fiddle here: http ...

Ways to create a downward expanding navigation menu when collapsed

Trying to accomplish the following, please refer to the image below. I am looking to have the yellow bar extend down when the collapsed menu is open. Currently, the navigation links are hidden behind the logo as shown in the second image below. https://i. ...

Adding an event listener to detect left or right mouse clicks - using onclick doesn't capture right clicks

I'm currently in the process of applying for an Internship through this Internship Link One thing that caught my attention right away is the issue with uploading or pasting a cover letter. When attempting to upload or paste a cover letter, it redirec ...

Ways to resolve the issue of the search icon adapting to the selected value of the dropdown menu

Take a look at this. <!DOCTYPE html> <html lang="en"> <head> <!--REQUIRED META TAGS--> <meta charset="utf-8"/> <meta name="viewport" content="width=device-widt ...

Troubleshooting overlap problem between Skrollr and SlickNav

I successfully implemented Skrollr to fix images, similar to this example: Additionally, I am utilizing Slicknav for the menu functionality. However, I encountered an issue where the menu opens behind the fixed "parallax" image. Despite trying various ap ...

Tips for concealing the delete button within the main content area and displaying it in the subsequent "add" pop-up window upon clicking the "add" button in Angular

I have a card with add and delete buttons. I want only the add button to show initially, and when clicked, a new card should open with both add and delete buttons. Everything is working as expected except I can't figure out how to hide the delete butt ...

When elements are passed through components in Next.js, their style does not get applied

I have a unique component for the hero section of every page with varying content and heights. export default function CustomHero({ height, children, }: { height: string; children: ReactNode; }) { return ( <div className={`flex flex- ...

Using JavaScript to show a prompt message inside an h1 tag within a newly created div

I have developed a basic JavaScript program that opens a prompt dialog when the div tag is clicked, allowing the user to enter text. The program then creates a new div element and displays the entered text above it. However, I am facing an issue where I wa ...

Streamline the Bootstrap 4 Card Component by eliminating any unnecessary whitespace

Currently I am utilizing the card component from BS4, but it seems to be displaying unexpected behavior: see the image description here Upon inspecting the Mozilla dev version, the following markup is visible: <div class="right- ...

Can I use a custom font in an HTML5 canvas?

Has anyone had success importing a custom font for use in HTML5 canvas? I've been trying to do this by loading the font file on my computer, but all my attempts have failed so far. The canvas keeps showing the default font instead of the one I want to ...

utilize the Aspose library in Java to seamlessly convert HTML files into PowerPoint (

I have a Java variable that contains HTML code. I want to utilize the Aspose library to execute and render this HTML code into a PowerPoint presentation, with the CSS reference included. It would be great if the resulting PowerPoint is editable. ...

My website is experiencing issues with the inner border being transparent and not displaying correctly

I have encountered an issue where the inner border only appears transparent on a single page or JSFiddle, but for some reason it is not working on my website. Can anyone offer any assistance on what might be causing this problem? The border is displaying ...