Can I control the table column width on listing pages?

[austin-hoover]

Description

I would like to keep the date on one line.

https://austin-hoover.github.io/notes/books/

[dragonstyle]

The HTML table is computing the column widths based upon the widest item (your longest title and author). Adding CSS to the listing page to force the date to be wider like:

<style>
.listing-date {
    width: 100px;
}
</style>

Should do it (you could also make a CSS file or add this to an existing CSS file).

[mcanouil]

Additionally, you could avoid word break for some columns:

.listing-date {
  & a {
    word-break: normal;
  }
}

See https://developer.mozilla.org/fr/docs/Web/CSS/word-break for possible values.
Current value in Quarto is word-break: keep-all;.

[cscheid]

@dragonstyle @rich-iannone I wonder if we could detect that a column is entirely made of dates, and then add a class that has word-break: normal by default.

[rich-iannone]

@cscheid That's a good idea. Another option might be to use non-breaking hyphens (#8209;) in place of ASCII hyphens when dateStyle is "YYYY-MM-DD". I tested this in a listing page and the date definitely does not break across lines.

[cscheid]

Huh - I like that one even better, because we probably know the date style and can use #8209; when appropriate..

[dragonstyle]

That is a fun idea- in the meantime we do support date-format as an option under listing as well - so you can provide a date format yourself that uses a different (non-wrapping) separator.

[SHogenboom]

Is there a more general solution that allows you to set the width of each of the columns?

My current listing:

I would like to tweak the width of the first column so that the titles are easily readable. This would obviously reduce the width of the second column. Then for the third column I wouldn’t mind the styling, though a list (because they are categories) would perhaps be preferred.

Any help is appreciated!

[dragonstyle]

One idea would be to use CSS to target the column, something like:

table td:nth-child(1)  {
  width: 100px;
}

or perhaps

table td:nth-child(1)  {
  white-space: nowrap;
}