Styling using CSS works seamlessly with jsfiddle, but seems to encounter compatibility issues when applied directly in an HTML file. Interestingly, the CSS properties

I'm having trouble with table formatting in Chrome and Firefox. The TR style is not being applied when I load the file into the browser, even though the table and TD styles are working correctly.

Interestingly, if I use the code in a fiddle it works fine.

I also tried extracting the styles to a separate CSS file, but that didn't solve the issue.

Here's the link to the fiddle for reference: http://jsfiddle.net/kdubs/6Ppf4/

<!DOCTYPE html>
<html>

<style type="text/css">

table
{
border: 5px solid red;
}

tr
{
border: 3px solid green;
}

td
{
border: 1px solid blue;
}

</style>

<body>

<div>
<table>
<tbody>

<tr>
<td>
one
</td>
<td>
two
</td>
</tr>

<tr>
<td>
three
</td>
<td>
four
</td>
</tr>

<tr>
<td>
five
</td>
<td>
six
</td>
</tr>

</tbody>
</table>
</div>

</body>
</html>

Answer №1

If you try to run it on JSFiddle without normalization, it won't work - Link here

To resolve the issue, simply add border-collapse: collapse; to your table - Check out the demo!

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

Ways to make the Bootstrap form's fields align horizontally

I've exhausted all options, but I just can't seem to get the fields aligned horizontally. <form class="form-horizontal" role="form"> <div class="form-inline"> <div class="form-group"> <label for="acctName ...

Creating word spacing in CSS paired with a navigation menu using Dreamweaver

As a beginner in Dreamweaver, CSS, and HTML, I may have made some mistakes or overlooked simple solutions. I am currently struggling with how to separate words in my navigation menu, as they always appear centered. Despite trying adjustments like "word-spa ...

Displaying numerous Google charts within a Bootstrap carousel

A bootstrap carousel has been implemented to showcase our company's data. The carousel includes a bootstrap table, images, and two Google charts: a pie chart and a stacked bar chart. The issue arises when the active class is not maintained for the Go ...

Retrieve the value of the option that has been selected and then send it over to the function

Hello, I am currently working on creating a reservation page using Razor Pages in ASP.NET. The page includes two drop down lists - one for selecting the location and the other for choosing a room within that specific location. I want to pass the selected l ...

The Ajax request is encountering an error while trying to access the file

I am facing an issue with my website that has two pages - a process page and a form page. The form page contains multiple input fields, and when the user submits the form, it triggers an AJAX call to the process page. The process page requires the user&ap ...

Tips for inserting a value into an HTML field using ASP.NET code behind

Recently, I created an application in JavaScript by utilizing HTML fields in ASP.NET. Due to some issues with the IDs, I had to resort to using HTML fields instead of ASP text boxes. Surprisingly, the HTML fields are functioning well with JavaScript. Now ...

What issues are we facing with submitting this multiple-choice selection?

Why isn't my multi-select form submitting as an array? HTML <div class="container"> <select name="itemsToChoose" id="left" size="8" multiple="multiple"> <option value="1">item1</option> <opti ...

Why isn't the justify-content property set to center in my CSS code functioning properly?

For a front-end challenge from Frontend Mentor, I attempted to center a card on the screen using justify-content: center, but it doesn't seem to be working as expected. Any suggestions on how to achieve this? @import url('https://fonts.google ...

I attempted to utilize certain CSS properties, only to find that they were not being applied due to conflicts with Bootstrap's own CSS. I'm unsure what I should do next

click here for image .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; width: 100%; **padding-right: calc(var(--bs-gutter-x) * .5);** **pa ...

Opening a dynamically generated HTML file in a separate window in Flutter web

I am facing an issue with the url_launcher package while attempting to open a link using the following code snippet: try { final Uri launchUri = Uri.dataFromString( '<html><body>hello world</body></html>', ...

Activate a switch in a single table after its information has been transferred to a different table

I have a dilemma involving two tables - one displaying a list of items and the other serving as an empty favorites table. Users can select items from the first table and click 'Add' to move them to the favorites table. Once added, the 'Add& ...

I am looking to extract the content of the title within an HTML table

Check out my code snippet below: <td class="text-left"><div class="ettn" data-toggle="tooltip" title="7f5e5b03-7d30-4001-acd9-c993d6c24301">ETTN</div></td> I am looking to extract the value ...

Displaying a dynamic splash screen during the resource-loading process on an Android application

I would like to implement an animated image (currently using a set of PNGs) as a splash screen while my resources are loading. I have successfully displayed the splash screen using this method. However, the issue I am facing is that the splash screen appe ...

Is there a way to access the dimensions of a Bootstrap 4 popover?

I'm attempting to dynamically retrieve the height/width of the Bootstrap popover. I have the context in which I'm trying to grab the height/width: console.log(context); console.log(context.getBoundingClientRect().height); console.log(context.get ...

Arranging elements in a 2x2 card grid fashion

I am currently working on an HTML website and struggling with aligning elements properly. At the moment, my page layout resembles this image here, but what I really want is for it to look like this one here. My goal is to set up a 2 by 2 grid, and I' ...

Tips for generating numerous sub div tags using jQuery

Is there a way to achieve this output with jQuery? I have working code here: . (See image for reference: https://i.stack.imgur.com/eOXiN.png) When trying to replicate the same using jQuery, I encountered an issue where there is no spacing between two imag ...

How can I transfer a variable between two scripts on the same webpage?

Everyone, I've hit a roadblock with this issue and I can't seem to pinpoint what the mistake might be. I have a PHP file containing multiple scripts, including both PHP and jQuery sections. My aim is to transfer a PHP variable from the HTML Head ...

Is there a transparent space in a PNG image that covers the the anchors located beneath

I've been working on this design which you can see at My plan is to incorporate various animations and transitions, so I have inserted each layer separately (the island, individual clouds, buttons) as images. Unfortunately, I haven't been able t ...

Dropmenu | Designing with Materials | Pair of Choices | Intersection

My goal is to incorporate dropdown fields with material design only. After researching various examples online, I have noticed a recurring issue. When there are two dropdown items close to each other, they end up overlapping. Check out this example: http ...

Creating a unique ticket ID in Flask Python involves combining a string with an incremented integer value. This process ensures that

I am working on developing a Ticketing System using Python Flask and storing it in SQLite. However, I am facing challenges when trying to store the ticket ID. My expectation is that the ticket ID will be a combination of Datetime and an increment number. Y ...