What could be causing the border-collapse property to be ineffective on my HTML table?

My HTML table has nested tables, but the border collapse property is not working. Despite adding the border-collapse property to both the main table and nested tables, only the outer borders are visible, with no inside borders.

<table style="border-collapse: collapse;">
    <tr>
        <th>Existing data</th>
        <th>New table</th>
    </tr>
    <tr>
        <td>
            <!-- Nested Table 1 -->
            <table style="border-collapse: collapse;">
                <tr>
                    <th>Hostname</th>
                    <th>IP</th>
                    <th>MAC</th>
                </tr>
                <tr>
                    <td>ftp01</td>
                    <td>10.1.1.4</td>
                    <td>...01</td>
                </tr>
                <tr>
                    <td>www01</td>
                    <td>10.1.1.5</td>
                    <td>...02</td>
                </tr>
            </table>
        </td>
        <td>
            <!-- Nested Table 2 -->
            <table style="border-collapse: collapse;">
                <tr>
                    <th>IP</th>
                    <th>MAC</th>
                    <th>Owner</th>
                </tr>
                <tr>
                    <td>10.1.1.4</td>
                    <td>...bb</td>
                    <td>alice</td>
                </tr>
                <tr>
                    <td>10.1.1.6</td>
                    <td>...cc</td>
                    <td>bob</td>
                </tr>
                <tr>
                    <td>10.1.1.7</td>
                    <td>...dd</td>
                    <td>chris</td>
                </tr>
                <tr>
                    <td>10.1.1.4</td>
                    <td>...ee</td>
                    <td>doug</td>
                </tr>
            </table>
        </td>
    </tr>
</table>
htmlcss

Answer №1

Make sure to focus on the outer cells that contain those nested tables. Add a touch of flair by including style="border: 1px solid black;" in those elements, and you'll notice the inner borders reappear, even when border-collapse: collapse; is in effect. Take a look at the HTML snippet below:

<table style="border-collapse: collapse;">
    <tr>
        <th>Existing data</th>
        <th>New table</th>
    </tr>
    <tr>
        <td style="border: 1px solid black;">
            <!-- Nested Table 1 -->
            <table style="border-collapse: collapse;">
                <!-- Table content -->
            </table>
        </td>
        <td style="border: 1px solid black;">
            <!-- Nested Table 2 -->
            <table style="border-collapse: collapse;">
                <!-- Table content -->
            </table>
        </td>
    </tr>
</table>

Answer №2

If you're looking to achieve a simple border around each cell in a table, consider the following:

<table border="1" style="border-collapse: collapse;">

The above code snippet will present a table with borders delineating each individual cell, all collapsed into single lines.

Another Approach:

table {
    border-collapse: collapse;
}
th, td {
    border: 1px solid black; /* Border for cells */
}

Answer №3

It seems that the borders are missing in your code. By default, tables and table cells do not have borders, so you'll need to add them if you want them to appear. Is this the desired outcome?

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 5px 10px;
}
<table>
    <tr>
        <th>Existing data</th>
        <th>New table</th>
    </tr>
    <tr>
        <td>
            <!-- Nested Table 1 -->
            <table>
                <tr>
                    <th>Hostname</th>
                    <th>IP</th>
                    <th>MAC</th>
                </tr>
                <tr>
                    <td>ftp01</td>
                    <td>10.1.1.4</td>
                    <td>...01</td>
                </tr>
                <tr>
                    <td>www01</td>
                    <td>10.1.1.5</td>
                    <td>...02</td>
                </tr>
            </table>
        </td>
        <td>
            <!-- Nested Table 2 -->
            <table>
                <tr>
                    <th>IP</th>
                    <th>MAC</th>
                    <th>Owner</th>
                </tr>
                <tr>
                    <td>10.1.1.4</td>
                    <td>...bb</td>
                    <td>alice</td>
                </tr>
                <tr>
                    <td>10.1.1.6</td>
                    <td>...cc</td>
                    <td>bob</td>
                </tr>
                <tr>
                    <td>10.1.1.7</td>
                    <td>...dd</td>
                    <td>chris</td>
                </tr>
                <tr>
                    <td>10.1.1.4</td>
                    <td>...ee</td>
                    <td>doug</td>
                </tr>
            </table>
        </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

Every time I input information into the form, it keeps coming back as undefined

function displayProduct() { var product = document.getElementById("productForm"); var item = product.elements["item"].value ; document.getElementById("outputResult").innerHTML = item ; } <div> <p id="outputResult"></p> </di ...

javascripthtml

Illuminate the expanded dropdown menu in a Bootstrap 5 navbar

Bootstrap 5 navbar allows for the creation of dropdown menus. Is there a way to highlight the current menu item when a dropdown is opened, similar to how it's done in Windows desktop applications? This feature is not provided by Bootstrap 5: https:/ ...

htmljquerycsstwitter-bootstrapnavbar

Styled Components do not have the ability to define :hover states

export const WatchVideoButtonWrapper = styled.div` position: absolute; bottom: 80px; right: 33px; background-color: ${(props) => props.bgColor}; color: ${(props) => props.color}; border-radius: 100px; transition: all 0.1s; ...

javascriptcssreactjsanimationstyled-components

How can I resize an element using jQuery resizable and then revert it back to its original size with a button click?

I need help figuring out how to revert an element back to its original size after it has been modified with .resizable. I attempted the following: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="//code. ...

javascripthtmljquerycss

Is there a way to postpone the mouseover event for vertical tabs?

While this may seem like a simple question to some, my programming skills are not quite up to par. I am seeking help from someone who can assist me. My goal is to delay the mouseover event on vertical tabs so that users can jump directly from tab 1 to ta ...

javascriptjqueryhtmlcsstabs

Uninterrupted movement within a picture carousel

Seeking a way to create a smooth transition in an image slider with sliding dividers using continuous switching when clicking previous/next buttons. Currently, the dividers replace each other from far positions. Any ideas on achieving a seamless single mov ...

javascriptjqueryhtmlcss

Changing the click event using jQuery

My JavaScript snippet is displaying a widget on my page, but the links it generates are causing some issues. The links look like this: <a href="#" onclick="somefunction()">Link</a> When these links are clicked, the browser jumps to the top of ...

javascriptjqueryhtml

What is the best way to calculate the total duration (hh:mm) of all TR elements using jQuery?

I currently have 3 input fields. The first input field contains the start time, the second input field contains the end time, and the third input field contains the duration between the start and end times in HH:mm format. My goal is to sum up all the dur ...

javascripthtml

Strange Behavior of SVG 'fill: url(#....)' in Firefox

I am struggling with an SVG graphic that I have created. Here is the code: <svg width='36' height='30'> <defs> <linearGradient id="normal-gradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" s ...

cssfirefoxsvggradientfill

Remove the background color from a semi-transparent circular CSS div when it is being dragged

My circular div is being dragged for a drag and drop operation, but there's always a translucent square around it. How can I remove this unwanted effect? body{ background : #BBD1DF; } .dragdemo { width: 170px; height: 170px; line-hei ...

javascripthtmlcss

Define the post route methods effectively

I encountered a routing error while working on an application using express.js with node. Despite my best efforts, I am unable to handle post requests properly and consistently receive an HTTP 500 error. Below is the code snippet from my server.js file: v ...

htmlnode.jsexpresspostroutes

What is the best way to contain my content within a bordered box?

As a beginner in HTML and CSS, I have successfully created a basic website with a simple menu at the top that includes links to different pages like "Home," "About," and "Contact." The website will mainly feature information and images, but I believe it wo ...

htmlcss

Retrieve the content of the second <li> element using jQuery

Seeking assistance with replacing the separator symbol in a given structure. In order to proceed, I first need to identify its position. Can anyone offer guidance on how to do this? Below is the structure in question: <div> <ul> ...

jquerycsshtml-lists

Executing Javascript in Python Environment

I'm currently working on developing an HTML document parser using Python. Since I have a strong understanding of jQuery, I am interested in leveraging its traversal capabilities to parse these HTML files and then send the gathered data back to my Pyth ...

javascriptjquerypythonhtmlparsing

Can a small white pop-up be triggered by clicking a button?

While exploring the website , I noticed that clicking on Availability Zones opens a small window with text on the right side of the page. Is it possible to achieve a similar feature on a leaflet map without using JavaScript? This functionality would be tri ...

javascripthtmlcssleafletwindow

The Asp button fails to initiate the function

One area of concern I have is with the signup page for my project, particularly regarding the following code: <input type="email" id="email" title="invalid email!" runat="server" placeholder="email" /> ...

c#htmlasp.netweb

Align the text in the center of the button vertically

Struggling to vertically center text on a button? I understand the frustration! I've been working on this issue for a whole day with no success. My setup involves NEXT.js and TailwindCSS. <main> <div class='flex justify-center ite ...

cssreactjsnext.jstailwind-csscentering

Selecting HTML5 data attributes using jQuery

There is a button on my page with multiple data attributes, and I am trying to hide it by selecting it based on its class and two specific data attributes. <a href='#' class='wishlist-icon' data-wish-name='product' data-wi ...

javascriptjqueryhtmlcustom-data-attribute

Incorporate my personal design flair when utilizing third-party React.js component libraries

Incorporating Material UI as a component library in my React project has been beneficial. However, I am facing a challenge where the inline styling provided by Material UI clashes with my existing custom styles that I have developed over time. Is there a ...

cssreactjsmaterial-ui

Choose a radio button with a dynamic value in Selenium

How can I automatically select the radio button below with a changing value attribute? HTML: <form name="ViewQueryForm" method="post" action="/equery/getAttachments.do"> <div class="txt_align_left innerdvcont&q ...

pythoncssseleniumselenium-webdriverelement