Question

I am using a table as a calendar (well, jquery UI datepicker is) and each cell is significantly larger, specifically in width, than I expect it to be.

Each of the td’s with a date in them is about twice as wide as the actual characters that make up the day. All this is is a span tag within a td. When investigating with Firebug, the base size of the span has this extra width in it. There is no padding, margin, border affecting it.

What CSS defines the width of my span? Shouldn’t it hug the text it contains?

Answer 1

The cells in a jQuery-UI datepicker usually look like one of these:

<td><span>X</span></td>
<td><a>X</a></td>

The stylesheet contains something like this (with possible theme-specific variations in the numbers):

.ui-datepicker td span,
.ui-datepicker td a {
    display: block;
    padding: .2em;
    /* ... */
}

So the <span> and <a> are set to display: block inside the table cells and given a bit of padding (0.2em in this case). That padding is where your extra width is coming from; also, the display:block will make them wide enough to fill their parent so all the cells in a column will line up properly.

So adjust your theme or override the .ui-datepicker td span and .ui-datepicker td a CSS to use less padding. You might want to have a look at the padding on .ui-datepicker td as well but that’s usually quite small.