Issue with table formatting occurs exclusively in Chrome browser

I'm really struggling to figure this out - the table functions perfectly on Firefox and IE, but not on Chrome.

Take a look at it:

On Chrome:

Here is the CSS for the table:


table {
    padding: 24px;
    margin: 0 auto;
    width: 550px;   
}

The specific styling for td#tadmin:


td#tabmin {
    width: 30px;
    height: auto;
    float: left;
    font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 15px;
}

I've also tried to implement:


table-layout: fixed;

But unfortunately, it doesn't seem to work.

As I was requested, here's how I display the table in PHP using echo:


echo "<table style='padding: 24px; margin: 0 auto; width: 550px;'>".  
"<tr>".
    "<td id=tabmin >".
        "<div class=tabminscale style=text-align:center;>"
        .$row['min']."'"."</div>". 
    "</td>".
        "<td id=tabcom >" .
        "<div id=commentaires>"
           $row['commentaire']."</br>".
        "</td>".
"</tr>".
"</table>";

Answer №1

The code provided is incorrect and needs correction. It is essential to validate your markup using a tool like validator.

To fix the issues, remove the PHP elements and make the following adjustments:

<table style='padding:24px;margin:0 auto;width:550px;'>
    <tr>
        <td id='tabmin'>
            <div class='tabminscale' style='text-align:center;'>foo</div>
        </td>
        <td id='tabcom'>
            <div id='commentaires'>bar<br/></div>
        </td>
    </tr>
</table>

By making these changes your code will be valid and properly structured.

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

Modify the bg class when the checkbox is selected

Currently revamping my portfolio website and could use a hand with some jQuery code. Hoping to make a parent class react to a checkbox within it. Specifically looking to change the background color to #000 when the checkbox is checked. Struggling to figur ...

The navigation bar buttons in my IONIC 2 app are unresponsive on both the

In Ionic 2 for Android, I encountered an issue with the title placement. To resolve this, I applied some CSS to center the title and added left and right buttons to the nav bar. However, when I tried to implement onclick functionality for these buttons, no ...

Is there a way to add a blur effect to the moving elements in the background of a

For a project I'm currently working on involving a full screen styled Google Maps page, I am looking for a way (css, jQuery, or other options...) to overlay a header and slide-in sidebar with a blur effect similar to the iOS frosted/blur effect. I am ...

Creating a layout resembling a table using CSS and HTML without actually using the <table> element

Despite searching on various platforms, I have not found a satisfactory solution to my issue. To demonstrate the problem with using a table, I have attached a screenshot: The bottom two rows are structured as tr and td within a table. Though the alignmen ...

Retrieving the ID from the element that was clicked

Here is a code snippet that allows for the changing of color and text when an href link is clicked. /* Function to change the color of the button upon click */ function changeColor(element) { alert(element.target.id); if (element.innerHTML == "Selec ...

Using JQuery Datatables to output HTML based on JavaScript conditional logic

I am presently working on a project that involves using JQuery Datatables to display my data. Within this project, I am utilizing the datatables render method to format the data before it is displayed. However, I have encountered a challenge where I need t ...

Unable to populate HTML dropdown using AJAX

<script type="text/javascript"> $(document).ready(function () { $.ajax({ url: '/Umbraco/api/RegisterUser/GetCountry', type: 'GET', // Using GET method data: '{}', ...

Creating a dynamic table in JQuery using Datatables to append a new row from user input

I am in the process of developing a webpage that showcases player statistics using a jQuery Datatable. While I have successfully displayed data from the database, I am encountering difficulties when trying to add new players. Even though I implemented an " ...

Can a Unicode character be overwritten using a specific method?

Is there a way to display a number on top of the unicode character '♤' without using images? I have over 200 ♤ symbols each with a unique number, and using images would take up too much space. The characters will need to be different sizes, a ...

Stylish HTML and CSS Tab Navigation

Currently, I am utilizing the Google Engine as part of a class project and have a query regarding css tabbed menus. To address this issue, I stumbled upon a tutorial on creating tabbed menus. You can find the tutorial by following this link: I am interest ...

Encountering the Selenium Webdriver TimeoutException issue: Receiving message timeout from renderer after updating to Chrome 103 in Specflow and refreshing the page

Running automation in a virtual machine, Chrome version updates to 103.0.5060.114(64-bit). However, the Selenium Chrome driver version is 103.0.5060.5300, the latest one in Nuget. Inability to downgrade Chrome poses a problem. Using driver.navigate().refre ...

Storing an ID field across different domains using HTML and JavaScript: Best Practices

Currently, my web app includes a conversion tracking feature that analyzes whether activity "A" by a website visitor leads to action "B." This feature works effectively when the tracking is contained within a single domain but encounters issues across mul ...

Navigating through the vertical and horizontal overflow of an image

When I hover over an image, it scales and the excess part of the image is hidden. However, I want the image to scale from the center by using transform-origin: 50% 50%. The issue arises when I try to scroll or drag around the transformed image - I can&apo ...

Customize Radio Button Color in Bootstrap 3 with JQuery

Here is the code for my radio buttons: <div class="form-group text-danger"> <label class="control-label col-md-4 pull-left text-danger" for="SongTitle">Is a Remix</label> <div class="col-md-8"> ...

Tips for adjusting row height in a fluid table design using div elements

I'm having trouble making a responsive table (a keyboard) where only the cells are resizing instead of the whole keyboard fitting on the screen without any scrolling required. Here is the code I have so far: https://jsfiddle.net/723ar2f5/2/embedded/r ...

Can someone please explain the purpose of row-sm and row-cols-sm-n (where n<12)? I've come across the col-sm-n (where n<12) but I'm unsure about how row-sm is used

From my understanding, when using col-sm-n in Bootstrap, the columns in a row will stack on top of each other when the device screen width is less than the specified size for sm. But what about row-sm? Does it function similarly to col-sm? And what exactly ...

Is there a way to prevent a Bootstrap alert from disappearing on its own?

I'm having trouble with my button's alert feature. When clicked, the alert should display and stay visible until it's closed. However, on my website, the alert quickly flashes on the screen every time the button is pressed. On my jsfiddle ...

Bootstrap 4 sidebar with a static width, when switched to mobile view the main content area vanishes

While searching for a solution to create a fixed width sidebar on Bootstrap 4, I have come across many examples. However, none of them seem to maintain the main content on mobile devices. I have experimented with the following code: <div class="row no ...

Exploring the realm of external variables and scoping within a jQuery function

I am facing an issue with the following code, where I want to execute test() every time the window is resized. var i = 0; var test = (function() { console.log(i++); })(); $(window).resize(function() { test(); }); Code: http://jsfiddle.net/qhoc/N ...

Why is Chrome not caching this resource with the Django Cache-control header?

In an attempt to optimize a Django view, I have applied the cache_control decorator in the following manner: @cache_control( private=True, max_age=5 * 60, # 5 minutes ) def my_view(req): … During testing on the local server, everything wor ...