Bug on a Safari browser when using a dotted border on a table

Issue in Safari and Chrome browsers:

CSS:

TABLE {
    width: 100%;
    clear: both;
    border: 0px;
    border-collapse: collapse;
}
TABLE TH,
TABLE TD {
    padding: 10px;
    text-align: center;
    border: 1px dotted #898989;
}

Answer №1

Include

table th {
    eliminate the bottom border;
}

However, in cases of intricate designs where disabling the border is not feasible, it may be wise to consider utilizing the individual border model as suggested in this response, since using a dotted line could lead to misalignment issues (depending on the starting point), creating a solid division between neighboring cells.

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

Styling the large drop-down menu for Internet Explorer 7

Check out the code snippet at http://jsfiddle.net/jN5G4/1/ Is there a way to align the drop-down menu for "5 Columns" to match the alignment of the other drop-downs? After removing the <a href...> </a> tags from the 5 Columns list item, the d ...

Utilize the power of jQuery's AJAX capabilities

Is it normal for a jQuery AJAX request to take between 1-2 seconds before receiving a response? Is there any way to minimize this delay? The response type is JSON and the HTML code is small. Thank you! ...

The transparency of the TABLE must only be applied to a specific section

I need the table to have a transparent bottom and a clear top for better readability. Here is my attempted solution: .preview { background: -moz-linear-gradient(top, rgba(255,255,255,0) 25%, rgba(255,255,255) 100%); background: -webkit-gradie ...

Guide to Hosting HTML on a Server Separate from Heroku

I currently have my index.html and the necessary .js files hosted on Heroku, where everything is functioning properly. However, I wish to avoid directing my users to "myappname.herokuapp.com", so I am considering using my own website to host the .html file ...

Incorporating .txt files into a static webpage using only HTML and JavaScript

Exploring the realm of web page creation for the first time has left me in need of some guidance. I have successfully added an upload feature for text files on my web page, but I am struggling to embed a text file directly into the page source. With Java s ...

Angular showcases the presence of a signed-in user at page load, disregarding the absence of

Currently, I am following a course where I have implemented a simple login form inside the navigation bar: <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-primary"> <div class="container"> ...

Could you explain the meaning of the :host /deep/ selector?

Can you provide a simple explanation of what the :host /deep/ selector does? :host /deep/ .ui-autocomplete { width: 85%; } ...

A unique and dynamic design concept for my website: a zigzagging structure

I am trying to achieve a layout similar to the one at the provided link, with variable sized div tags on the left and right edges. Can someone please assist me in styling the left and right sides accordingly? Key styles I have used: .rightside { margin-l ...

Font icon not appearing when toggling the class "before"

I am attempting to utilize two classes, both with a :before pseudo-element. When the target class is hovered over, the two classes swap. This functionality works correctly in Safari, but in other browsers, the icon at the bottom does not display properly. ...

Adjust the DIV dimensions to fit the background image perfectly

My question involves a DIV element with a specific style applied to it. .vplayer-container .logo { position: absolute; bottom: 50px; right: 10px; background: url(../img/logo.png) no-repeat; border: 1px solid #000000; max-width: 50px; max-height: 50 ...

Maintain the height of the image equal to the height of the

I've been facing challenges with adjusting the height of this image to match the div container. I've experimented with various height properties such as max-height, min-height, normal height, auto, and 100%, but none seem to be providing the desi ...

Unable to locate child after adding element to HTML

I have been attempting to add a child element to my HTML document, and although I can see it in the source code, it doesn't display on the screen as expected. It's quite baffling. Here is the HTML code snippet: <!DOCTYPE html> <html> ...

Arrange three div elements beside each other with the middle column containing two

My challenge involves figuring out how to display 3 divs on a webpage in a specific layout. Currently, I am able to get 2 divs to align next to each other using the float:left property. However, the third div always ends up positioned below the first one ...

The property 'filter' is not recognized on the 'Object' type. An attempt to filter the response was made

Trying to fetch data from a JSON file that matches the player's name in the URL, such as localhost:4200/players/Febiven, should only retrieve information about Febiven. The code is written in Angular 6. The current code snippet is as follows: player ...

Select a division and retrieve the identification of a different division

I am looking to trigger an event by clicking on one element and extracting the ID from a separate, unrelated div. Here is my attempt: $(".map_flag").on("click",function(){ var selectedID = ($(this).attr("data_modal")); $("#" + selectedID).fade ...

Angular 1.5 component using HTTP GET

Trying to utilize a 1.5 component with AngularJS has presented some challenges for me. I have a service that fetches my JSON file using $HTTP and returns a promise. In the controller of my component, I resolve the promise and assign it to a value using thi ...

Sending a POST request using HTML

Recently, I decided to create a URL Shrinker for fun and followed the Traversy Media tutorial to build it. If you're interested, here's the GitHub link to his project: https://github.com/bradtraversy/url_shortener_service As I aim to turn it in ...

Acquire HTML information using the Robot framework and xpath techniques

My first task is to visit the website www.google.de. I aim to extract the word Deutschland from this section of the HTML code: <div class="logo-subtext">Deutschland</div> Since the id in this div class is not available, I must utilize xpath. ...

Trouble encountered while creating a table with the Bootstrap grid system

I'm attempting to create a table using the bootstrap grid system. The HTML code below is meant to generate the table, but I'm encountering an issue where the table cells overlap on screens with a width of 768px. .row.header { height: 44px; ...

Ways to center text horizontally in a line with the help of bootstrap styles?

.list-group-item{ width: 165px; height: 32px; line-height: 1px; text-align: center; margin-bottom: 1px; margin-top: 58px; margin-left: 20px; } <ul class="list-group" v-if="showSearchHistory"> <li class="list-g ...