Table column widths

What every other table example on this site has to settle and none of them shows on its own: how wide each column ends up. The theme leaves tables at auto layout and gives a column a role rather than a width, because the column count is never fixed -- the manage display form declares six header entries over eight real columns and spans a region row across all of them, and fixed layout would size all of that from the first row and ignore the rest. There are four roles and this page is each of them doing something: a column that shrinks to its contents and stops, the one column allowed to take whatever the others did not want, a column given a fixed measure in characters that wraps inside it, and a column that is empty in every row and collapses to nothing. The same table is then repeated with nothing applied, so the difference is the page rather than the description of it. Below that are the three things the roles rest on: a table too wide for the page, which scrolls sideways instead of being crushed; cells holding values with nowhere to break, which would otherwise set the minimum width of their column by themselves; and a header that stays put while its table scrolls in both directions, which used to be two features that could not be switched on at once. Nothing here is saved and the data is made up, so the page renders the same on every site.

One table, four roles

Every column here declares one of the four roles, and between them they decide the whole layout. The check box and the operations shrink to their contents and stop; the title takes everything the others did not want; the summary is given a fixed measure in characters and wraps inside it; the notes column is empty in every row and collapses to nothing. Only one column is allowed to grow -- with none, auto layout shares the slack out in proportion to content and the table shifts every time the data does; with two, they split it, which is rarely what anyone wanted. The role is declared once, on the column, and the component puts it on the header cell and on every body cell beneath it: auto layout sizes a column from the widest content in it, so a role on the header alone leaves a long cell free to widen the column anyway.

Components, with a role on every column
Component Summary Operations
Card An image, a heading and a short run of text, linked as a whole, used wherever a list of things has to be shown as something other than a list.
Hero The first thing on a page: a heading, a paragraph and at most one call to action, over a background that may or may not be an image.
Primary navigation The menu of the site, which collapses into a toggle below the breakpoint and keeps its submenus reachable by keyboard at every width.
Pager Links to the pages either side of this one, with the current page announced rather than linked.
Search box A single field and a submit button, which is a form and therefore has to say so to a screen reader.

The same table with nothing declared

Identical data through the same component, with the roles left off the columns. This is what auto layout does when nobody tells it which column matters: the summary is the widest content in the table, so it takes most of the width and the component names are squeezed against it, the empty column still holds a share of the table, and the operations column is as wide as whichever dropbutton happens to have the longest label. Nothing here is broken -- it is the browser guessing, and it guesses again whenever the content changes.

Components, left to the browser
Component Summary Notes Operations
Card An image, a heading and a short run of text, linked as a whole, used wherever a list of things has to be shown as something other than a list.
Hero The first thing on a page: a heading, a paragraph and at most one call to action, over a background that may or may not be an image.
Primary navigation The menu of the site, which collapses into a toggle below the breakpoint and keeps its submenus reachable by keyboard at every width.
Pager Links to the pages either side of this one, with the current page announced rather than linked.
Search box A single field and a submit button, which is a form and therefore has to say so to a screen reader.

Wider than the page

Sixteen columns, none of which can be dropped. The table sits in the scroll container the component wraps every table in, so it keeps its natural width and the container scrolls sideways rather than the columns being crushed into the space available. The pairing that makes that work is on the table itself: `width: auto` with `min-width: 100%`. With the `width: 100%` a table would otherwise inherit, it can never exceed its container, so the columns shrink to their minimum and overflow anyway -- and no scrollbar ever appears, which is the failure this looks like when it goes wrong. The figures are set to the right, which is the other thing a column carries besides its width.

Sixteen quarters of something
Measure Q1 2023 Q2 2023 Q3 2023 Q4 2023 Q1 2024 Q2 2024 Q3 2024 Q4 2024 Q1 2025 Q2 2025 Q3 2025 Q4 2025 Q1 2026 Q2 2026 Q3 2026 Q4 2026
Page views 1,000 1,137 1,274 1,411 1,548 1,685 1,822 1,959 2,096 2,233 2,370 2,507 2,644 2,781 2,918 3,055
Unique visitors 2,000 2,137 2,274 2,411 2,548 2,685 2,822 2,959 3,096 3,233 3,370 3,507 3,644 3,781 3,918 4,055
Form submissions 3,000 3,137 3,274 3,411 3,548 3,685 3,822 3,959 4,096 4,233 4,370 4,507 4,644 4,781 4,918 5,055
Search queries 4,000 4,137 4,274 4,411 4,548 4,685 4,822 4,959 5,096 5,233 5,370 5,507 5,644 5,781 5,918 6,055
Downloads 5,000 5,137 5,274 5,411 5,548 5,685 5,822 5,959 6,096 6,233 6,370 6,507 6,644 6,781 6,918 7,055

Values with nowhere to break

A machine name, a namespaced class and a URL are each a single word as far as the browser is concerned, so each one sets the minimum width of its column by itself and squeezes everything beside it. The theme puts `overflow-wrap: break-word` on every cell for that reason -- it is the floor the rest of this page stands on. The two sized columns here go further and ask to break inside a word, which is safe precisely because they are sized: a column that reports a smaller minimum is a column the growing one takes the space of, and these two measured 33px and 31px wide when they were capped without also being floored.

Long identifiers in narrow columns
Machine name Class Source
mantra_starter_preprocess_field_ui_table Drupal\mantra_examples\ColumnWidthExamples https://example.com/admin/structure/types/manage/article/form-display
field_contributors_target_id_default_value Drupal\Core\Render\Element\Table https://example.com/admin/reports/status/php?highlight=opcache
views_view_table__content__page_1__operations Drupal\views\Plugin\views\style\Table https://example.com/sites/default/files/2026-08/a-very-long-file-name.pdf

A sticky header that scrolls sideways

Scroll this table down and the header stays; scroll it sideways and the header goes with it. Those two used to be mutually exclusive here. Core sticks a header by cloning it into an element fixed to the viewport, which cannot survive a table that scrolls horizontally -- the clone stays put while the columns move underneath it -- so the theme used to switch the scroll container off whenever a header was sticky. The script is turned off in the theme info file and the header is stuck with CSS `position: sticky` instead. That comes with a condition worth knowing: sticky sticks to the nearest scrollport, which is the container rather than the page, and a container with no height of its own never scrolls vertically -- so a sticky header inside one simply leaves the screen with the page. A sticky table is therefore given a bounded height and scrolls in both axes, which is why this one has a scrollbar of its own and the four above do not.

Thirty rows and seventeen columns
Component Q1 2023 Q2 2023 Q3 2023 Q4 2023 Q1 2024 Q2 2024 Q3 2024 Q4 2024 Q1 2025 Q2 2025 Q3 2025 Q4 2025 Q1 2026 Q2 2026 Q3 2026 Q4 2026
Component 1 421 510 599 688 777 866 955 1,044 1,133 1,222 1,311 1,400 1,489 1,578 1,667 1,756
Component 2 842 931 1,020 1,109 1,198 1,287 1,376 1,465 1,554 1,643 1,732 1,821 1,910 1,999 2,088 2,177
Component 3 1,263 1,352 1,441 1,530 1,619 1,708 1,797 1,886 1,975 2,064 2,153 2,242 2,331 2,420 2,509 2,598
Component 4 1,684 1,773 1,862 1,951 2,040 2,129 2,218 2,307 2,396 2,485 2,574 2,663 2,752 2,841 2,930 3,019
Component 5 2,105 2,194 2,283 2,372 2,461 2,550 2,639 2,728 2,817 2,906 2,995 3,084 3,173 3,262 3,351 3,440
Component 6 2,526 2,615 2,704 2,793 2,882 2,971 3,060 3,149 3,238 3,327 3,416 3,505 3,594 3,683 3,772 3,861
Component 7 2,947 3,036 3,125 3,214 3,303 3,392 3,481 3,570 3,659 3,748 3,837 3,926 4,015 4,104 4,193 4,282
Component 8 3,368 3,457 3,546 3,635 3,724 3,813 3,902 3,991 4,080 4,169 4,258 4,347 4,436 4,525 4,614 4,703
Component 9 3,789 3,878 3,967 4,056 4,145 4,234 4,323 4,412 4,501 4,590 4,679 4,768 4,857 4,946 5,035 5,124
Component 10 4,210 4,299 4,388 4,477 4,566 4,655 4,744 4,833 4,922 5,011 5,100 5,189 5,278 5,367 5,456 5,545
Component 11 4,631 4,720 4,809 4,898 4,987 5,076 5,165 5,254 5,343 5,432 5,521 5,610 5,699 5,788 5,877 5,966
Component 12 5,052 5,141 5,230 5,319 5,408 5,497 5,586 5,675 5,764 5,853 5,942 6,031 6,120 6,209 6,298 6,387
Component 13 5,473 5,562 5,651 5,740 5,829 5,918 6,007 6,096 6,185 6,274 6,363 6,452 6,541 6,630 6,719 6,808
Component 14 5,894 5,983 6,072 6,161 6,250 6,339 6,428 6,517 6,606 6,695 6,784 6,873 6,962 7,051 7,140 7,229
Component 15 6,315 6,404 6,493 6,582 6,671 6,760 6,849 6,938 7,027 7,116 7,205 7,294 7,383 7,472 7,561 7,650
Component 16 6,736 6,825 6,914 7,003 7,092 7,181 7,270 7,359 7,448 7,537 7,626 7,715 7,804 7,893 7,982 8,071
Component 17 7,157 7,246 7,335 7,424 7,513 7,602 7,691 7,780 7,869 7,958 8,047 8,136 8,225 8,314 8,403 8,492
Component 18 7,578 7,667 7,756 7,845 7,934 8,023 8,112 8,201 8,290 8,379 8,468 8,557 8,646 8,735 8,824 8,913
Component 19 7,999 8,088 8,177 8,266 8,355 8,444 8,533 8,622 8,711 8,800 8,889 8,978 9,067 9,156 9,245 9,334
Component 20 8,420 8,509 8,598 8,687 8,776 8,865 8,954 9,043 9,132 9,221 9,310 9,399 9,488 9,577 9,666 9,755
Component 21 8,841 8,930 9,019 9,108 9,197 9,286 9,375 9,464 9,553 9,642 9,731 9,820 9,909 9,998 10,087 10,176
Component 22 9,262 9,351 9,440 9,529 9,618 9,707 9,796 9,885 9,974 10,063 10,152 10,241 10,330 10,419 10,508 10,597
Component 23 9,683 9,772 9,861 9,950 10,039 10,128 10,217 10,306 10,395 10,484 10,573 10,662 10,751 10,840 10,929 11,018
Component 24 10,104 10,193 10,282 10,371 10,460 10,549 10,638 10,727 10,816 10,905 10,994 11,083 11,172 11,261 11,350 11,439
Component 25 10,525 10,614 10,703 10,792 10,881 10,970 11,059 11,148 11,237 11,326 11,415 11,504 11,593 11,682 11,771 11,860
Component 26 10,946 11,035 11,124 11,213 11,302 11,391 11,480 11,569 11,658 11,747 11,836 11,925 12,014 12,103 12,192 12,281
Component 27 11,367 11,456 11,545 11,634 11,723 11,812 11,901 11,990 12,079 12,168 12,257 12,346 12,435 12,524 12,613 12,702
Component 28 11,788 11,877 11,966 12,055 12,144 12,233 12,322 12,411 12,500 12,589 12,678 12,767 12,856 12,945 13,034 13,123
Component 29 12,209 12,298 12,387 12,476 12,565 12,654 12,743 12,832 12,921 13,010 13,099 13,188 13,277 13,366 13,455 13,544
Component 30 12,630 12,719 12,808 12,897 12,986 13,075 13,164 13,253 13,342 13,431 13,520 13,609 13,698 13,787 13,876 13,965