<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.m-table-obvious {
width: 100%;
table-layout: fixed;
}
</style>
</head>
<body>
<div style="width: 150px; border: 1px red dashed">
<div style="display: flex">
<div style="border: 1px blue dashed">
<table class="m-table-obvious"><tbody><tr><td>1</td></tr></tbody></table>
</div>
<div style="border: 1px yellow dashed">
<table class="m-table-obvious"><tbody><tr><td>2</td></tr></tbody></table>
</div>
<div style="border: 1px cyan dashed">
<table class="m-table-obvious"><tbody><tr><td>3</td></tr></tbody></table>
</div>
</div>
</div>
</body>
</html>
URL: https://payroll.jobcan.jp/employees/my_data/payslips
Browser / Version: Firefox 79.0
Operating System: Mac OS X 10.14
Tested Another Browser: Yes Chrome
Problem type: Design is broken
Description: Items are misaligned
Steps to Reproduce:
The page has 5 tables aligned in 3 or 4 columns. Firefox renders the first table very very wide.
Because the page requires a login and a contract, I created a minimum HTML to simulate the problem.
View the screenshot
Browser Configuration
From webcompat.com with ❤️