DEV Community

Mobeen Ahmed
Mobeen Ahmed

Posted on

My pay tables kept getting cut off on phones. The fix was showing less, not shrinking more.

#webdev #css #frontend #php

I build small calculator tools that run entirely in the visitor's browser. One of them is a Canada overtime calculator, and it kept failing the same way on phones: the Pay column was cut off on the right, and the per-day table lost its last column too.

The first fix looked right. I gave the tables a fit-to-phone rule: fixed layout, full width, smaller padding, normal wrapping. It did not work. The screenshot after that fix showed the same cut-off columns.

There were two causes, and they stacked.

First, the hours were shown twice. A cell said 40.00 (40:00), decimals and clock time in one cell. On a desktop that reads nicely. On a phone, in a four-column table, it is just too wide.

Second, the last column was forced not to wrap by the main stylesheet:

.breakdown td:last-child, .breakdown th:last-child {
  text-align: right;
  white-space: nowrap;
}
Enter fullscreen mode Exit fullscreen mode

My mobile rule used table.breakdown td, which has lower specificity than .breakdown td:last-child, so the no-wrap rule won for the Pay column. The table was not really allowed to fit.

The fix was to show less in the tables, not to shrink the text further:

  1. Tables now show decimals only, 40.00 instead of 40.00 (40:00). The stat cards above the tables still show both formats, so nothing is lost, it is just not repeated in the narrowest place.
  2. The mobile rule now overrides the last column explicitly, with a selector that actually beats the base rule: 
@media (max-width: 600px) {
  table.breakdown {
    table-layout: fixed;
    min-width: 0;
    width: 100%;
  }
  table.breakdown th, table.breakdown td {
    padding: 5px 3px;
    font-size: .8rem;
    white-space: normal;
    word-break: break-word;
  }
  table.breakdown td:last-child,
  table.breakdown th:last-child {
    white-space: normal;
  }
}
Enter fullscreen mode Exit fullscreen mode
  1. The script got a new version query, so phones do not keep serving the old cached file. That part sounds boring until you forget it once and spend an hour debugging a fix that is already live.

The lesson I keep relearning: a table that overflows on a phone is rarely a font-size problem. It is usually a content problem. If a cell carries two formats of the same number, or a column is forbidden to wrap, no amount of padding tweaks will save it. Cut the duplicated information first, then let the table wrap.

The calculator this came from is the Canada overtime calculator on mytimecardcal.com, if you want to see the result on a phone.

Top comments (0)