The left border of the FF table vanishes as soon as the overflow-x of the wrapper is set to

There is a peculiar issue when using a table with bordered cells in FireFox. The left table border disappears when the table is placed in a wrapper with overflow-x: auto.

<div style="overflow-x:auto">
  <table style="border-collapse:collapse">
    <tr>
      <td style="border: none;"></td>
    </tr>
    <tr>
      <td style="border: 1px solid black;">a</td>
    </tr>
  </table>
</div>

(view example here)

I discovered a workaround:

<div style="overflow-x:auto; padding-left: 1px">
  <table style="border-collapse:collapse">
    <tr>
      <td style="border: none;"></td>
    </tr>
    <tr>
      <td style="border: 1px solid black;">a</td>
    </tr>
  </table>
</div>

This issue persists across multiple versions of FireFox (from 4 to 56). Strangely, it does not occur on other browsers like IE, Opera, Safari, Android Browser, or Chrome. I could not find any relevant bug reports for this specific situation.

Should I report this as a bug, or am I missing something in the HTML5 spec that explains this behavior?

Answer №1

Since it seems like this behavior is unintentional, I have gone ahead and reported it on Mozilla's bug tracker. A quick fix for now would be to add a left padding of the width calculated as

int( 0.5 * ( left_border_width + 1 ) )
.

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

Eliminating gaps between elements

I recently delved into the world of web design, and although I have a basic understanding of HTML and CSS, I am determined to enhance my skills and knowledge by creating a standard home page. So far, I managed to create a standard navigation bar, and now ...

What is the reason behind Selenium moving the element to the top before triggering a click action in Firefox?

Whenever I attempt to click on a link element in Firefox, it fails to work while in Internet Explorer it functions properly. Upon further investigation, I discovered that Selenium causes Firefox to scroll the webpage so that the targeted element is positio ...

The clash of interests between jQuery and Bootstrap

I'm facing a problem with conflicting jQuery and Bootstrap files in my header.php code. Whenever I include the jQuery file before the bootstrap.js file, it causes issues with the tabs on my website where clicking on them does not navigate me to the co ...

How can you display a variety of preloader gifs depending on the specific ajax requests being made?

Currently, I have implemented a preloader gif for my ajax requests using the following code snippet: $(document).ajaxStart(function () { var position = $('#parentDiv').position(); position.left += (($('#parentDiv').width() / 2) ...

Looking to achieve a stretch-auto-auto column layout in Bootstrap 4 - how can this be done?

Essentially, I am looking for something similar to this: https://i.sstatic.net/ss3Ir.png Can this layout be achieved using columns instead of floats? <div class="clearfix"> <div class="float-left"><button class="rounded btn btn-outline ...

What is the best way to enhance a tool-tip with images or legends?

Currently, I have implemented a tool-tip feature which works for a text box. However, the issue is that users are unaware of the presence of the tool-tip for the text box until they hover over it. My question is, how can I make it more obvious to users t ...

Step-by-step guide on embedding a function in HTML using vbscript

I'm working on a dynamic HTML list that I want to enable or disable based on user input. Typically, you can just use the "enabled" or "disabled" attribute at the end of the select element to control the entire list. However, I'm unsure how to ach ...

Adjusting the position of an image on a webpage as the user scrolls

Looking to add some flair to your website by making an image slide to a specific spot when you scroll? Imagine the page loading with the image sliding elegantly to the left, then as you start scrolling, it smoothly transitions to the center or bottom of th ...

The hover effect for changing the style of one element when hovering over another element is not functioning as

I've encountered an issue with styling a triangle element using the .something:hover .another{...} selector. Can anyone help me understand what might be causing this problem? .actions { display: flex; margin-top: 20px; max-width: 260px; } .a ...

In PHP, the hidden input type doesn't always provide true concealment within a form if the value being passed

I am attempting to populate a hidden input field with the value of an XML string generated from an array. However, when I set the hidden field value using the XML string, it is being displayed in the HTML output. Surprisingly, if I use plain text as the va ...

Unable to modify the positioning of a card in HTML within a Django framework

I am experiencing an issue with the alignment of post cards in the front end of my HTML. When I add multiple posts, the size and alignment of the cards become irregular; some are bigger while others are smaller. How can I ensure that each post card is th ...

The content of the DIV element is not displaying properly when trying to list items

I have a div that is styled with the following CSS properties : HTML <div class="messageContainer"></div> CSS .messageContainer { margin-left: 2px; background-color: #F7F5F2; width: 100%; min-height: 50px; border: solid 1px silver ...

Foundation 4 - image hover effect to display alternate image

I am a newcomer to Foundation 4, but I have some coding experience. Currently, I am in the process of transitioning my photography blog (www.momentaryawe.com/blog) from Wordpress with a custom theme to a custom theme built on Foundation 4. Most aspects of ...

In landscape mode on Safari for iOS, the final item in a vertical flexbox may be cut off

Describing my app: It is structured as a 3-row flexbox column. <div class="app" style="display: -webkit-flex; -webkit-flex-direction: column; -webkit-justify-content: space-around;"> <div class="question-header" style="-webkit-flex: 0 0 0;"&g ...

Saving a CSS-styled image to a database: A step-by-step guide

I have an image and I want to apply CSS effects such as blur to it. After applying the effect, I need to save the modified version of the image in the database. How can I achieve this? Here's my code: Html: <img src="avatar.jpg" class="blur">&l ...

Issue with Bootstrap dropdown functionality within a Bootstrap modal

I am attempting to incorporate a bootstrap dropdown in a form that will be displayed within a bootstrap modal. <div class="modal fade box-sizing" id="createPerson"> <form enctype="multipart/form-data" method="post" name="personCreateForm" novali ...

What is the best way to integrate SVGs into a React project after transitioning from Vanilla JavaScript?

I am currently diving into an Advanced CSS course that explores the implementation of SVG's. However, the approach involves Vanilla JS whereas I aim to incorporate it into a React project. When using Vanilla JS to embed an SVG into a button, you typi ...

Populate a dropdown menu in HTML using a PHP array

I am looking to populate an HTML dropdown using a PHP array. Currently, my code generates an empty dropdown and then displays the array below it on the screen. Below is the HTML snippet. <label for="column1">Variable for Column 1: ...

Is it possible to harness the power of a Typescript array within my HTML while incorporating primeng chips?

My subject line brings up a question: How can I transform the following piece of HTML code? HTML <p-chip label="1 day(s)" styleClass="p-mb-2 p-mr-2 custom-chip"></p-chip> <p-chip label="2 day(s)" styleClass=&qu ...

Add a fresh text field with the click of a button and delete it with another button in Laravel 4

My form includes two fields: phone and email, as shown in the image below. By clicking on the plus button, I would like to add an additional text field to the form below the button. Similarly, by clicking on the minus button, I want to remove the text fie ...