Eliminating undesired borders of table cells using CSS

I am facing a unique and puzzling issue. Here is the simple markup:

<table>
    <thead>
        <tr><th>1</th><th>2</th><th>3</th></tr>
     </thead>
    <tbody>
        <tr><td>a</td><td>b></td><td>c</td></tr>
        <tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
    </tbody>
</table>

I have tried applying different background-color values to the thead, even tr, and odd tr elements but encountered an unexpected problem. Majority of browsers display unwanted borders in each cell that do not match any of the table rows colors, except for Firefox 3.5 where there are no visible borders at all.

I am seeking guidance on how to eliminate these borders present in other major browsers so that only the alternating row colors are visible within the table.

htmlcsshtml-table

Answer №1

To properly format your tables, make sure to include the following CSS code:

table { border-collapse:collapse }

Answer №2

If you want to eliminate the border, simply apply this CSS code:

td {
    border-style: hidden !important;
}

Answer №3

Revise your HTML as shown below:

<table border="0" cellpadding="0" cellspacing="0">
    <thead>
        <tr><td>1</td><td>2</td><td>3</td></tr>
     </thead>
    <tbody>
        <tr><td>a</td><td>b></td><td>c</td></tr>
        <tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
    </tbody>
</table>

(Included 

border="0" cellpadding="0" cellspacing="0"
)

To style it using CSS, apply the following:

table {
    border-collapse: collapse;
}

Answer №4

To ensure no gaps between cells, adjust the cellspacing attribute of the table to 0.

If you want a similar effect using CSS, apply the style border-spacing: 0, noting that this may not be supported in older versions of Internet Explorer.

Answer №5

Consider incorporating

table td { border:0; }

This code snippet achieves the same effect as setting cellpadding="0"

By including this, you eliminate the default padding that browsers automatically apply to cells, which can vary based on doctype and CSS reset techniques.

Answer №6

After attempting various solutions, the only method that proved effective for me was adjusting the border attribute to "0" within specific sections of a child theme's style.css file (use the "Find" function to locate each one -- below are just excerpts):

.comment-content table {
    border-bottom: 1px solid #ddd;

.comment-content td {
    border-top: 1px solid #ddd;
    padding: 6px 10px 6px 0;
}

As a result, the code looked like this afterwards:

.comment-content table {
    border-bottom: 0;

.comment-content td {
    border-top: 0;
    padding: 6px 10px 6px 0;
}

Answer №7

To improve the appearance of your table, consider applying the following style: 

border: 0px; border-collapse: collapse;
.

Answer №8

There are instances where border doesn't clear even after being cleared.

This issue arises when there are images within the td element. Setting the display property of the images to block can resolve this problem.

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

PHP Unable to Locate the header.html File Within the Specified Directory

Currently, I am facing an issue while trying to use PHP to incorporate the same header, navigation, and footer elements on all my website pages. The problem arises when the .php file fails to recognize the header.html file for an include("/header.html") op ...

phphtmlcss

Troubleshooting Boostrap Check Box Styling Problem in MVC 5

My registration form has a problem with the checkbox's alignment. I want the text to appear to the left of the checkbox, in line with the placeholders for the input fields on the page. Currently, the text is either above the checkbox (centered in its ...

csshtmlasp.net-mvc-5

Using :nth-child on elements with the same class name does not produce the desired result

I attempted to utilize the :nth-child selector to target the first, third, and fifth elements with the class name "personal", but it did not work as expected. Is there an alternative method to specifically select these elements sharing the same class? I ha ...

htmlcss

The iframe failed to load on the external server

I'm working on a website where the admin can upload PDF files that will be displayed on an HTML page. I'm using an iframe to achieve this, and it works perfectly fine on my local server. However, when I tried uploading it to the remote server, it ...

phphtmlcodeigniteriframe

Ensure that the display is set to block to stack the input elements on top of each other

I am attempting to grasp the functionality of CSS display property and experimented with this basic HTML code: <div> <form className="container" action=""> <input name="fName" placeholder="First Name" type="text" value={props.fNam ...

htmlcss

Ways to eliminate the default button styling

I've encountered an issue with the CSS for a button that I created, as it is not displaying as expected. https://i.sstatic.net/qHLZX.png Below is my HTML code snippet: .button{ /* center the button */ margin: 0; position: absolute; top: ...

htmlcss

Choose and Send pictures through a Form with JavaScript

Currently, I am exploring different methods for allowing users to submit a form with the images they have selected. My idea is to present users with a set of images from which they can choose multiple options. Potential Solution 1: One approach could invo ...

javascriptphpjqueryhtml

What is the solution for fixing scrolling while keeping the header fixed and ensuring that the widths of headers and cells are equal?

Is there a way to set a minimum width for headers in a table and provide a scroll option if the total width exceeds 100% of the table width? Additionally, how can we ensure that the width of the header and td elements are equal? Below is the HTML code: ht ...

javascripthtmlcsshtml-table

Ways to prevent text from wrapping in CSS

I'm currently in the process of creating a new website and I've encountered an issue with my CSS. It seems that whenever there is a space present, the text inside h2 tags wraps unexpectedly. You can visit the site here. Here's the specific ...

htmlcsscss-float

Can you suggest a method to align this form to the center?

Take a look at this image Hello there! I am trying to center the login form on my webpage and I have added this code to my index file: Here is the complete code snippet: <section class="row" justify-content-center> <section class="col-12-sm ...

cssbootstrap-4

Dropping down with Twitter Bootstrap's navbar menu

I’m currently facing some challenges with getting the Twitter Bootstrap drop-down navbar feature to function properly. Despite going through various tutorials, I am unable to make it work by directly copying the code. The console displays the following e ...

javascriptcsstwitter-bootstrap

Is it possible to combine the index page with the login page for a web project, or is it recommended to create a separate login page?

Would it be a violation of any rules if the index page of my web project is used as the login page for users? Do I have to redirect them to a different page? Is this considered best practice? ...

htmljsp

Need help automating clicking the download csv button with Selenium Python, but the button's class name changes when it's hovered over?

While attempting to save a csv file by clicking the download csv button on a website, I encountered an issue. It seems that the .click() action is not functioning as expected, and upon inspection, I noticed that the class-name of the button changes from &a ...

pythonhtmlseleniumcsvgoogle-colaboratory

HTML and CSS: Focus on border for <td> cells only

I'm looking to apply a border to only one cell (B2) without nesting tables. Here's the code: <table border="0"> <tr> <td>A1</td> <td>B1</td> <td>C1</td> </tr> ...

htmlcsshtml-tableborder

Adjust the GTK3 tooltip color exclusively for Eclipse when it is operating on Ubuntu

I am using Eclipse Mars on Ubuntu 15.04 and looking to customize the GTK3 tooltip fg/bg color specifically for Eclipse without impacting other applications. I have come across instructions for changing this color system-wide, but I need guidance on how t ...

javacsseclipseubuntugtk3

Positioning the sDom in jQuery DataTables

Take a look at the image below: I want to adjust the position of the tableTools buttons (Copy, Excel, CSV) so that they appear aligned with the Search Box. I've experimented with different sDom parameters but haven't been successful. This is th ...

cssdatatablestabletools

Ways to duplicate the content of a div to the clipboard without the use of flash

Simple question! I have a div identified as #toCopy, along with a button identified as #copy. Can you suggest the most efficient method to copy the content of #toCopy to the clipboard upon clicking #copy? ...

javascriptjqueryhtmlcopy

Changing background color during drag and drop in Angular 2: A step-by-step guide

A drag and drop container has been created using Angular 2 typescript. The goal is to alter the background color of the drag & drop container while dragging a file into it. Typescript: @HostListener('dragover', ['$event']) public onDr ...

cssangulartypescriptdrag-and-dropangular2-hostbinding

Transformation of CSS classes in React with Webpack

Have you ever noticed that when you inspect the Airbnb website, the classnames appear to be morphed into single alphanumeric names? What is the name of this technique and is it applied at the code level or build level? https://i.sstatic.net/qSiaj.jpg ...

javascripthtmlcssreactjswebpack

Can someone guide me on how to utilize the onkeyup event within a bootstrap select element?

This code uses Bootstrap to filter elements, but I want to implement an onkeyup event to trigger a function. Whenever I type in the search input, I want it to automatically call myFunction(). <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/ ...

htmlbootstrap-5