Table stretches out in Google Chrome and Opera webbrowser when I refresh the page

Question

I made an HTML table,

But when I refresh my page it's totally stretched out in Google Chrome and in the Opera webbrowser. It's also tested in Internet Explorer and Firefox and there it stays the normal table.

The subnormal table after page refresh looks like:

Under this you can see the CSS part of my table:

.rdThemeDataTableCell, table.rdAgDataTable td {
    background-color: #fff;
    padding: 4px;
}

td.rdThemeDataTableCell.rdCgPositionCellXAxis {
    background-color: #ffffff;
    border-style: none;
}

td.rdThemeDataTableCell.rdCgPositionCellXAxis {
    background-color: #ffffff;
    border-style: none;
}

Now I don't know how this comes that it works in some browser and in some it doesn't, but it needs to work everywhere.

Answer 1

I don't know whether this might help you or not.

The padding, border seems to be varying in different browsers. To the best of my knowledge your problem is related to a specific browser.

There are ways to target a specific browser and apply custom styling to presice content where the problem located.

-WebKit- For Chorme, Opera

@media screen and (-webkit-min-device-pixel-ratio:0) {    
    .ar #form-wrapper {
        width: 330px;
    }      
}

moz-document For Firefox:

 @-moz-document url-prefix() {       
    .submit_btn {
        padding-bottom: 5px;
    }
}

Link regarding other browser tricks.

Answer 2

The answer was that I used a time input, but my time picker didn't have a style class. This created the problem that Chrome and Opera couldn't react well on it.