The table borders in IE 11 do not display properly when using Html5 and CSS

In a previous version, the table had visible borders. However, when I added the property text-align:center; to my container, the table did not align to the center. I then tried adding display:inline-block; to the table, which successfully centered it. It looked great in Chrome and Firefox, but unfortunately, it did not display well in IE 11 as the table borders were missing.

table{
    margin:2px;
    width:200px;
    padding:4px;
    display:inline-block;
}

After searching on Google, I attempted to adjust the zoom setting in IE 11.

table{
    margin:2px;
    width:200px;
    padding:4px;
    display:inline-block;
}

Here is how the table appeared in IE 11:

https://i.sstatic.net/kZbjb.png

htmlcss

Answer №1

To improve the layout, start by removing display:inline-block; and adding margin. This adjustment should be beneficial.

table {
 /* Prioritize this: margin:2px; */
 width:200px;
 padding:4px;
 margin: 2px auto;
}

For further guidance, you can refer to the following link:

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

Put a watch on a variable as soon as it is set

When initializing a variable, I want to use the $watch function in Angular without it automatically initializing right away. Is there a way to accomplish this? $watch $scope.$watch(function () { return $scope.character.level; }, function (ne ...

javascripthtmlangularjs

Using CSS to align the position of a div with the last word position of an h4 element

Trying to figure out how to position a div at the end of an h4 text element has been challenging. When the h4 text is on a single line, it's easy to place the div correctly. However, things get complicated when the text spans multiple lines. In that c ...

htmlcsstextposition

Attempting to obtain a score value from the input, but unsuccessful in doing so

Prior to posing this question, I had already managed to successfully retrieve the score value. Below is my original script: <script> $.ajax({ type: "POST", url: "https://example.com/paylist.php?acc=useraccount&json=1", ...

javascriptjqueryhtml

To subscribe to the display of [Object Object], you cannot use an *ngIf statement without being inside an *ngFor loop

In my angular Quiz project, I have a functionality where every user can create quizzes. I want to display all the quizzes that a logged-in user has completed. Here is how I attempted to achieve this: // Retrieving user ID and category ID inside Re ...

htmlangulartypescriptangular-ng-ifsubscribe

Encountering a SyntaxError: Unexpected token < in the initial position of JSON during JSON parsing within Node.js

const express = require("express"); const bodyParser = require("body-parser"); const request = require("request"); const https = require("https") ; const app = express(); // store static files (e.g css,image files) ...

htmlnode.jsjsonexpress

Encountering a problem when trying to use event.target.value in an Angular TypeScript application

Here is the code from my app.component.html : <h1>Password Generator</h1> <div> <label>Length</label> </div> <input (input)="onChangeLength($event.target.value)"/> <div> <div> <input ...

htmlangulartypescript

Updating the innerHTML of a frameset

I have a unique challenge that involves loading the frameset of www.example.com/2.html when accessing www.example.com/en/test/page.html. Successfully accomplished this task. Now, after loading 2.html in the frameset, I want to modify ".html" to ".html" t ...

javascriptjqueryhtmlcss

Do you require assistance with creating an image slideshow?

My first day working with HTML was a success as I successfully built a navigation bar that looks pretty cool. Take a look at it here. Next on my list is to incorporate a slideshow into my site, possibly using JavaScript or jQuery plugins. I'm aiming ...

javascriptjqueryhtmlcssplugins

Steps for including a solid bottom border in a toggled navigation bar that is responsive

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l ...

htmlcssbootstrap-5

The HTML5 camera feature remains active even after navigating to a different page in an AngularJS application

I am currently exploring the video capabilities of HTML5. Using a directive userMedia, I have successfully activated my camera on my MacBook through navigator.getUserMedia() (using an adapter for cross-browser compatibility with supported browsers). Howev ...

javascripthtmlvideocameraangularjs

Drop-down menu for every individual cell within the tabular data

I'm working with a large HTML table that looks like this: <table> <tr> <td>value1</td> <td>value2</td> </tr> <tr> <td>value3</td> <td>value4 ...

javascripthtmlcss

Interactive bar chart that updates in real-time using a combination of javascript, html, and

Current Situation: I am currently in the process of iterating through a machine learning model and dynamically updating my "divs" as text labels. My goal is to transform these values into individual bars that visually represent the values instead of just d ...

javascripthtmlcss

How can XPath be used to target a specific parent element?

After reviewing the material, I am led to believe that it may not be feasible; however, I will present the following scenario just in case: Consider the following oversimplified HTML structure (derived from a CMS-generated HTML, hence limited control) < ...

htmlxmlxpathcypress

Is it possible to modify the background color of a select option menu when hovering over it?

It turns out that the default background color of the select option menu changes to blue when it is hovered over. However, I would like to personalize and adjust it to my preference using Bootstrap 5 and CSS. Any assistance with this customization would ...

cssbootstrap-5

After updating the INNERHTML, the NAV tag content is no longer functional

I am facing an issue with replacing the contents of a NAV tag that contains UL list items. The original HTML within the NAV tag works perfectly fine, but when I replace it with my own HTML - which matches the original word for word - the dropdown functiona ...

javascriptcssinnerhtmlnav

Tips for toggling the visibility of a revolution slider based on current time using JavaScript

Currently, I am integrating the revolution slider into my WordPress website. My goal is to have the slider change according to the standard time of day. For instance, I want slider1 to display in the morning, slider2 at noon, slider3 in the evening, and sl ...

javascriptcsswordpressslider

Incorporating jQuery ajax requests into divs seamlessly to avoid any page disruptions

When loading numerous ajax calls on a page, the timing of each call varies, resulting in some content loading before the user reaches the top of the page. This may cause the user to miss viewing certain data unless they scroll back up to the top. Below is ...

javascriptjqueryhtmlajax

What is the best way to retrieve the parent div's ID with JavaScript and Selenium?

My current project involves utilizing webdriverjs, and I am faced with the challenge of retrieving the parent id of a specific webelement among multiple elements with similar classes. Each element has a different id that gets dynamically generated when a m ...

javascripthtmlselenium

Tip: Using jQuery to Wrap Characters Based on Count

Within my table, there is a specific cell in each row that contains exactly 13 characters. <td class="need-to-wrap">0123456789012</td> I am looking to wrap characters #10, 11 and 12 with a span element like so: <td class="need-to-wrap"> ...

jqueryhtml

What is the best way to keep a dropdown list menu next to the selected dropdown button as the user scrolls?

I recently encountered a problem similar to the one on this page within my App. Upon selecting the drop-down list, the corresponding menu opens as expected. However, when the user scrolls down the page, the drop-down menu remains in its original position. ...

htmlcssdrop-down-menutinymce