How do you use CSS to replace an HTML "rules" attribute?

When publishing to HTML using the DITA Open Toolkit, certain inline table attributes are automatically applied such as frame="border" and rules="all".

I am facing an issue where I need to override the "rules" attribute for table cells using CSS styles. While I have been successful in achieving the desired result in Internet Explorer and Chrome, Firefox stubbornly retains solid black gridlines in the table.

Due to company policy, I am not able to directly edit the HTML or XSLT files. How can I eliminate these gridlines solely through CSS?

I have attempted various combinations of border styles with !important declarations but to no avail.

The structure of the HTML code is...

<table cellpadding="4" cellspacing="0" frame="border" border="1" rules="all">
 <thead>
    <tr>
      <th class="cellrowborder">Type </th>
      <th class="cellrowborder">Comment </th>
    </tr>
 </thead>
   <tbody>
    <tr>
      <td class="cellrowborder">Caution </td>
      <td class="cellrowborder">Think twice. </td>
    </tr>
    <tr>
      <td class="cellrowborder">Attention </td>
      <td class="cellrowborder">Be careful. </td>
    </tr>
    <tr>
      <td class="cellrowborder">Danger </td>
      <td class="cellrowborder" >Be scared. Be very scared. </td>
    </tr>
   </tbody>
</table>

The corresponding CSS properties are as follows:

table {border: 1px solid black;
 font-family: Arial, Helvetica, sans-serif; 
 border-collapse: collapse; 
 font-size: 9pt;
 margin-top: 1em;
 margin-bottom: 1em;
 padding: 4px;}

tr {border: none;}

.cellrowborder {border: none;}

While the design displays correctly in IE, Firefox continues to show the unwanted gridlines unless I remove the frame/border/rules attributes from the HTML - which is not a viable solution for production purposes.

htmlcssditadita-ot

Answer №1

During the initialization of the document, utilize jQuery's remove attribute function to effectively eliminate all outdated attributes.

For more information, visit api.jquery.com/removeAttr

Answer №2

Experimenting with 

<table frame="border" rules="all">
has provided some interesting results. It appears that overriding the default border can be achieved by introducing a new border style, like so:

table {
    border: none;
    border-collapse: collapse;
}
    td {
        border: 1px solid silver;
    }

If completely removing the border is necessary, one workaround could involve matching the border-color to blend in with the background of the webpage.

Answer №3

border-color looks like it's being utilized.

Answer №4

Have you ever thought about using FireBug Inspect Element as a tool to identify CSS properties and easily target them in Firefox? Here's how you can do it: check out these instructions.

Would you be able to provide an example of the code?

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

Could we customize the appearance of the saved input field data dropdown?

I'm currently working on styling a form that includes an input field. The challenge I'm facing is that the input field needs to be completely transparent. Everything works fine with the input field until I start typing, which triggers the browser ...

htmlcssforms

Utilizing encoding and decoding techniques in PHP and JavaScript with robust data attribute validation

I am utilizing data attributes to transfer information from HTML to JavaScript. The data attributes are derived from MySQL data, so they may contain spaces, resulting in validation errors since spaces are not permitted within attributes. My proposed solut ...

phpjavascripthtmlvalidationencode

What techniques can I use to merge alpha channels with compositing in images?

Utilizing an HTML5 Canvas along with the KineticJS(KonvaJS) canvas library, I have successfully incorporated an Image element. My current objective is to erase specific pixels while maintaining a certain level of transparency. The red dot erases pixels at ...

javascripthtmlcanvaskineticjskonvajs

Mastering the intricacies of Angular bindings through intuition

I am attempting to grasp the concept of distinguishing between square brackets binding <elem [...]="..."><elem> and parentheses binding <elem (...)="..."<elem>. Is there a rule of thumb that can help differentiate between the two? Pe ...

htmlangularbindingangular2-templateangular5

leveraging Excel input for data manipulation in Java

I am looking to create a code that will help me generate a line of flight using data from an Excel spreadsheet. The process involves calculating the time between flights, ensuring the plane has enough time on the ground before taking off again, and determi ...

javaphphtmlsqlexcel

Problem with background video height on Elementor for Wide screen resolutions

Hello, I trust this message finds you in good health. I have a question regarding the video background on wide/big screens. The issue is that it displays correctly on all devices in Elementor settings and actual testing, except for widescreen LCDs, where ...

htmlcsswordpressvideoelementor

Save an automatically generated number into a variable and use it to reference an image file for display. This process can be accomplished using JavaScript

I'm having trouble getting my images to display randomly on a page. The images are named 0 - 9.png and I am using a pre-made function for random number generation. However, when I try to call on this function later down the page, nothing appears. It ...

javascripthtmlfunctionrandom

Steps for preventing a button from being enabled until all mandatory fields are completed

Is it possible to have a button disabled until all required fields are filled out, with the button appearing grey in a disabled state and changing color when all fields are completed? I am facing an issue where clicking on the previous button is causing ...

javascripthtml

Deciphering the creation process behind the "WhatsApp Web" front-end page

I'm currently exploring the creation process of the front-end page for WhatsApp Web, specifically focusing on the list of contacts located on the left side (<div id="pane-side">). The contact names within this list are identified by the class "e ...

javascripthtmlcss

angular bootstrap dropdown opening on the left side

I am facing an issue with the angular bootstrap dropdown. I have successfully implemented it, as shown in this link. However, the problem is that the dropdown opens on the right side by default. Is there a way to make it open on the left side instead? Bel ...

cssangularjstwitter-bootstrapangular-bootstrap

Exploring methods for testing an HTML page that utilizes jQuery for DOM manipulations

Recently, I was tasked with creating an HTML page that utilized jQuery DOM manipulations. For instance, upon clicking the submit button, a success or error message should be displayed. Testing these functionalities is something I'm familiar with in An ...

javascriptjqueryhtmlnpm

Tips for reducing the height of the footer without compromising the alignment of the text within

My attempt to reduce the height of my footer in CSS using padding, margin, and other methods was unsuccessful. All of these adjustments either pushed the footer completely out of the bottom or left the text uncentered. footer { background: #fce138; wid ...

htmlcss

Tips for mastering web design techniques

As a budding Web Designer, I am eager to absorb the most efficient techniques utilized in the world of web design. Can anyone recommend some tutorials for mastering the creation of innovative websites using Photoshop, CSS, HTML, and more? ...

jqueryhtmlcssphotoshop

Add a CSS class to a different element when hovering

I have the following HTML structure: <div class="container"> <div class="list-wrapper"> <ul> <li class="item-first"> </li> </ul> </div> <div class="description-wrapper"> <d ...

javascripthtmlcss

What is the most streamlined way to send data from HTML forms using solely JavaScript?

I currently employ jQuery to transmit data from my HTML forms and then I utilize PHP to save it in my database. Below is the code snippet that I am using: HTML FORM: <form id="formpost" action="" method="post" onsubmit="return false"> <input t ...

javascriptphpjqueryhtmlajax

Use the double data type in MySQL to handle null values when blank form fields are submitted

Currently, I am facing an issue with a form that I have created to update a mysql database using PHP and HTML. In my MySQL database, I have set the data type as double (3,1). The problem arises when I submit data to the database and leave some form input f ...

htmlmysqlformsnulldouble

Concentrate and select non-interactive elements with your mouse

Is it possible to set tab index on non-form elements like the div tag? I tried using tab index, but when the div is focused and the enter button is tapped, the ng-click event associated with the div tag is not triggered. <div tabindex="0" role="butto ...

javascripthtmlangularjs

Bug with IOS double tap on Element UI VueJS select input element

Encountering a strange problem on iOS safari or chrome. When attempting to select an option from a dropdown input, the options show up correctly on the first tap, but when trying to actually select an option, it requires two taps to work properly. This is ...

cssiosvue.jsmobile-safarielement-ui

How to centrally align header elements in Bootstrap 4 on mobile devices?

In this setup using Bootstrap 4, I have a header structure as follows: <div class="container"> <div class="row"> <div class="col-md-6"> <div class="navbar-brand"><img src="..."></div> </div> <div class="col-m ...

csstwitter-bootstrapbootstrap-4

Utilize the .not() filter function in JavaScript

I am trying to apply a filter of not(.pseudo-element) using JavaScript, but I am unsure how to add it. So far, I have been able to extract #app from the DOM with the following code: const app = document.getElementById('app') app.style.filter ...

javascripthtmlcss