Gap created between two td or tr elements

Can someone please help me solve a troubling issue I'm facing with my CSS and HTML code?

body
{
background-color:#ffffff;
margin:0;
padding-top:0px;
}
table.main-table-default
{
margin:0 auto;
background-color:#00ffff;
width:700px;
border-collapse:collapse;
padding:0;
text-align:center;
vertical-align:top;
}
table.main-table-default td
{
padding:0;
text-align:center;
vertical-align:top;
}
table.main-table-header-default
{
margin:0 auto;
background-color:#000000;
width:700px;
border-collapse:collapse;
padding:0;
text-align:center;
vertical-align:top;
}
table.main-table-header-default td
{
padding:0;
text-align:center;
vertical-align:top;
}
table.main-table-header-default tr
{
padding:0;
text-align:center;
vertical-align:top;
}

Here's the HTML:

<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>
</table>

I'm struggling to remove the space between the images. Any suggestions on how to achieve that? Thank you!

htmlcss

Answer №1

Updated CSS Styles: 

body
{
background-color:#ffffff;
margin-top:0;
margin-bottom:0;
margin-left:0;
margin-right:0;
padding-top:0px;
}
table.main-table-default
{
margin:0px auto 0px auto;
background-color:#00ffff;
width:700px;
border-collapse:collapse;
padding:0px;
border-spacing:0px 0px;
text-align:center;
vertical-align:top;
}
table.main-table-default td
{
border-collapse:collapse;
padding:0px 0px 0px 0px;
text-align:center;
vertical-align:top;
line-height:0;
}
table.main-table-header-default
{
margin:0px auto 0px auto;
background-color:#000000;
width:700px;
border-collapse:collapse;
padding:0px 0px 0px 0px;
border-spacing:0px 0px;
text-align:center;
vertical-align:top;
}
table.main-table-header-default td
{
border-collapse:collapse;
padding:0px 0px 0px 0px;
text-align:center;
vertical-align:top;
}
table.main-table-header-default tr
{
border-collapse:collapse;
padding:0px 0px 0px 0px;
text-align:center;
vertical-align:top;
}

Take a look at the changes in this code snippet on jsfiddle: http://jsfiddle.net/Bf965/

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

Just recently updated to Angular 14 and I'm encountering a problem with images not loading from the assets folder. I'm wondering if there is a configuration step I missed. Could someone please

https://i.stack.imgur.com/4LEQ4.png https://i.stack.imgur.com/3sxzF.png Is there a configuration missing in Angular 14? When I try using <img [src]="assets/images/sidebarNav"> with ./, ../, it doesn't work. I have followed the instr ...

htmlangularwebbrowser

How to Extract Text Content Excluding the Wrapping Tag from an Element Using JSoup

How can I take the text 'Some random text' and enclose it within a span tag? For example, if I have the following element: <div> Some random text 1 <a href="some_url">Go to Link</a> </div> <div> <spa ...

javahtmljsoup

What is the best way to switch between components when clicking on them? (The component displayed should update to the most recently clicked one

I am facing a challenge in rendering different components based on the navbar text that is clicked. Each onclick event should trigger the display of a specific component, replacing the current one. I have 5 elements with onclick events and would like to re ...

javascriptjquerycssreactjs

Steps to display the error message in a modal popup header using Bootstrap 5

How can I display an error message in the header section using Bootstrap 5? <div class="modal-header"> <h5 class="modal-title">Add Email Group</h5> <div class="error">Invalid data, Please contac ...

cssflexboxbootstrap-5bootstrap5-modal

Ways to designate a tab as active

Having trouble styling the active tab in my tabbed menu created with Bootstrap. The active class seems to only affect the first tab. How can I make it work for all tabs? Check out this screenshot for reference. Below is the code snippet: <script ...

javascriptjqueryhtmlcsstwitter-bootstrap

What are some methods for customizing the calendar icon displayed in an input field with type date?

Is there a way to customize the calendar logo without relying on jquery? The desired appearance should resemble the image shown below: https://i.sstatic.net/G06iZ.png input { width: 50%; padding: 8px; border-radius: 10px; ...

htmlcsssassbootstrap-4

Strange height problem detected in embedded YouTube video

Currently, I have a page with an embedded YouTube video that is intended to be placed in a container with a variable width. When the video is outside of the container, the aspect ratio appears normal. However, once it is placed inside the container, the he ...

htmlcssvideoyoutube

URL relative references across multiple domains

Here's a quick question: When developing themes and coding, how do you navigate linking to different files in your html/css code? For example: At our company, we mostly use <base target="http://whatever"> in our main template and then simply r ...

htmlrelative-path

Guide to activating animation on one element when hovering over another element?

I am setting up an HTML 5 range element and looking to enhance the user experience. Specifically, I want to implement a feature where when the user hovers over the range, the height and width of the thumb should increase to 12 pixels. CSS .myrange::-webk ...

javascriptjquerycsshtmlcss-transitions

Ways to easily modify images using a single button with the help of jq

I am new to programming and eager to learn... Currently, I am facing the following problem: I would like to create a functionality where three images can be changed using one button and incorporating fadeIn and fadeOut animations. Essentially, all images ...

javascriptjqueryhtmlcss

Maximized - Immersive Full Screen Background - Limited to Half the Size?

Looking to incorporate the Supersized Fullscreen background found at Supersized Interested in having the slider appear on the right half of the site with content on the left half. Want the content to move when scrolled while keeping the background station ...

jqueryhtmlcsssupersized

Angular - Brilliant time selection tool (BTS) The TimePicker feature fails to automatically switch to selecting minutes after choosing the hour

I'm currently implementing the Amazing time picker in my app and I'm facing an issue where it doesn't automatically switch to minutes after selecting the hour. component.html <input type="time" atp-time-picker formControlName="time" cla ...

javascripthtmlarraysjsonangular

How can white space be maintained using <select> and <V-for> in Vue.js?

Using select and v-for to display values can be tricky when dealing with white space, such as "a a - ". Sadly, most of the white space gets removed when the values are shown and returned to the backend. Here is the code snippet illustrating the i ...

htmlvuejs2

What is the best way to make content stretch to 100% width when there is no content in the sidebar?

As I work on developing my custom theme for Drupal, I am seeking a solution that will allow the content width to adjust depending on the presence of a sidebar. When there is no sidebar, I want the content width to be 100%, and when a sidebar is present, I ...

htmlcssdrupallayoutcss-float

Creating a versatile design using a combination of grids, HTML tables, and media queries to ensure

When it comes to developing a responsive website, which method is superior: utilizing grid systems, employing media queries, or relying on HTML tables? ...

htmlcssresponsive-designgridmedia-queries

An innovative approach to incorporating multiple patterns into HTML input using markup alone, without the need for JavaScript

Input fields are currently set to accept phone numbers in the format 555-555-5555 using the pattern [0-9]{3}-[0-9]{3}-[0-9]{4}. Is it possible to modify the pattern to also allow phone numbers in the format of 5555555555? <input type="tel" cl ...

htmlregex

Swapping out data points using JQuery

What could be causing line 10 to return null? Click here for the code file The code seems to function properly with line 40, but not with line 10. ...

javascriptjqueryhtmlsiblings

Error message "Module not found in Vue" occurs when changing image URL to an online image

I am currently working on a dynamic image display feature where I retrieve image names as strings from a backend. To manage a large number of images, I plan to store them online while maintaining the same logic for displaying them. Previously, I achieved t ...

javascripthtmlvue.js

Scrolling with jQuery to create a fixed navigation bar

I'm having an issue with my navbar on my website. I used CSS and jQuery to keep it fixed at the top, but now when I click on a menu item, it doesn't scroll to that section of the page. Can anyone help me troubleshoot this problem? ...

javascriptjqueryhtmltwitter-bootstrapcss

Unraveling the Enigma of CSS Grid Whitespace

I'm facing an issue while trying to construct a grid of images using CSS Grid. Interestingly, I am encountering mysterious white space around the first two items in the grid. Upon inspecting the images, I am unable to identify any source of this white ...

htmlcssgoogle-chromecss-grid