CSS resetting can lead to tables appearing misaligned

After applying a CSS reset to my website's stylesheet (which is valid as CSS 2.0 and used with XHTML 1.0 transitional webpage), I noticed that a table on my website no longer looks correct. Specifically, the table is now positioned incorrectly and the borders, which were originally black, are no longer visible.

I am debating whether I should remove the table or if I can keep the reset as is and adjust the border settings later. My concern is maintaining consistency across all pages by not having to change the reset specifically for pages with tables containing tabular data, especially since I use an external stylesheet.

htmlcssxhtmlcss-tables

Answer №1

For a quick solution, simply delete all table code from your reset

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{

margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;}

A more effective approach is to utilize a css normalizer instead of a reset: consider using the one recommended by the html5boilerplate project

Answer №2

If I'm understanding correctly (I'm not familiar with the term "css reset"), it seems like you are instructing table, td, th (and various other tags) to not display borders. In that case, why would you anticipate your table to have borders afterwards?

Answer №3

While investigating a comparable problem, I discovered that the reset css was set to have the table property of:

border-collapse:collapse;, which was preventing the border from being displayed.

By including the line... border-collapse: separate; in my custom CSS, I was able to resolve the issue.

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

Tips for converting a large number into a string format in JavaScript

I created this easy loan calculator by following online tutorials and using my basic coding skills. It works well, but I would like to add spaces in the output numbers for readability. For example, instead of "400000", I want it to display as "400 000". ...

javascriptjqueryhtml

Error: jQuery is unable to access the property 'xxx' because it is undefined

While attempting to make a post request from the site to the server with user input data, I encountered an error message saying TypeError: Cannot read property 'vehicle' of undefined as the response. Here is the HTML and script data: <!DOCTY ...

javascriptjqueryhtmlnode.jsexpress

challenges arise when using star icons to rate items visually, as the corresponding hidden values for backend processing are linked to radio input types

Hello, I am trying to retrieve the value of an input type radio by clicking on a star image visually. I have been successful in this, but I am having trouble resetting the star image in another row. You can view a demo of this here. I will explain what I ...

jqueryhtmlcssdefault-valuerating

The email message content is not displaying correctly

I'm in the process of merging multiple HTML tables into a single $message, which will then be passed to the email body as shown below. // Sending the email if(smtp_mail($To,$cc, $Subject, $message, $headers)) { echo "Email Sent"; } else { echo "An ...

htmlcssemailhtml-email

What is the process for immediately changing the background color of an input field as soon as text is entered?

I am encountering an issue with the code snippet provided below. My goal is to change the background color of an input field as soon as I start typing something into it. The scenario involves 4 input fields where if the submit button is clicked and any f ...

javascripthtmlcss

When designing a webpage using HTML and CSS, the size of HTML blocks decreases as the page is made smaller

Having an issue with the following: I hope you can help me identify my problem here and I'm not sure why it's occurring. I believe the problem lies in the header and nav sections I initially thought it might be related to the images, but I' ...

htmlcssweb-inspector

Exploring Bootstrap 4: Creating list-inline elements for various screen sizes

Is there a way to align list items on top of each other for a breakpoint <=575px (xs), and align the items next to each other for a breakpoint >575px (sm) using Bootstrap display properties? I found some information on How to display a list inline u ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Fixing issues in PHP File Editor

At our web development company, we have created an online file editor and file manager script for our website users to easily manage their files and customize their templates. This script is written in PHP and allows users to edit html, text, php, js, jque ...

phphtml

Modify the input field in the datepicker to resemble a button

How can I transform an input field into a button that looks like this rather than this ? The simple switch of tag names doesn't seem to work. Any suggestions on how to achieve this? class MyComponent extends React.Component { componentDidMount() ...

javascriptjquerycssreactjsdatepicker

Question about transparency - HTML, CSS, and Bootstrap

I adjusted the opacity of the bootstrap card to 0.8, but now I want the table to be opaque while the rest of the card remains translucent. How can I achieve this effect? I attempted to add the style opacity : 1 to the table, but it didn't have the des ...

htmlcsstwitter-bootstrapbootstrap-4

Ways to retrieve the child number using JavaScript or PHP

Is there a way to retrieve the child number upon clicking? View screenshot For example, when I click on the X button, I want to remove that specific element. However, this action should only apply to item n2. In order to achieve this, I need to determine ...

javascriptphphtml

PHP and JQuery not working together to update database

Essentially, I am trying to update the status based on the unique id. Despite no errors being thrown, the status remains unchanged. index.php $(document).ready(function() { $('.seatCharts-seat').click(function(){ var id = jQuery(th ...

phphtmljquerydatabase

Show angular variable data in a table based on their index

I have an array of angular variables with values like [ 170, 1, 130, 3, 134, 4.... and so on]. I would like to present these values in a table format where the even positioned values are shown in one column and the odd positioned values in another column. ...

javascripthtmlangularjs

"Utilizing an ellipsis within a span element in a table cell to achieve maximum cell

Update Note: Primarily targeting Chrome (and maybe Firefox) for an extension. However, open to suggestions for a universal solution. Additional Information Note: Discovered that lack of spaces in text for A causing overflow issues with B. Situation seem ...

htmlcss

Can you tell me why one of these Sass codes is throwing an invalid CSS error while the other is not?

My code: @for $j from 1 to 6 { .text-#($j) { font-size: 15px * $j; } } I'm facing an issue where my code doesn't run as expected. In an attempt to fix this, I modified it to use a 'through' keyword instead of 'to' in the loop ...

htmlcsssass

Is there a way to smoothly slide an element in the same way another element can be dragged out

I am currently using AngularJS. My goal is to achieve the following: When the 'Fade in' button is clicked, a hidden element should slide out from the left side. It should appear behind the 'MAIN BASE' element, giving the illusion that ...

htmlcssangularjsangular-material

Issue with navigation links on HTML website not functioning as expected

I would like the dropdown menu items to be clickable. For example: Menu item: Services Sub items: - branding } These already have working links - marketing } However, when I try to replace '#' with a link for Services, it d ...

javascripthtml

Encountering an error while trying to load a CSS file in a React project using webpack due

I'm currently working on a React project that utilizes styled components, and I've been attempting to integrate a CSS file as part of the react-image-gallery package. Following the instructions provided, I included the css-loader and style-loade ...

javascriptcssreactjswebpack

The footer refuses to adhere to the bottom of the page

On the Contact Page of our client's website, there seems to be an issue with the footer not sticking to the bottom of the page and hiding the submit button. https://i.stack.imgur.com/txqAS.png We attempted to fix this using CSS, but it either sticks ...

htmlcsswordpresscontact-form-7elementor

Is it possible for two overlapping Javascript divs to both be draggable at the same time?

I have multiple stacked div elements. The top one needs to be draggable, while the one beneath should remain clickable. An illustration is provided below for better understanding: The green div elements are contained within cells. Clicking on a cell trigg ...

javascripthtmlcss