Problems

Tables and Cells: How to alter the height and width

Below are notes about an issue that faculty have been experiencing when working with tables in Pressbooks. Comments are welcomed.

Reported problem

How can the width and height of a table and its cells be adjusted?

What we know so far

After some testing, here are some items that have been determined about tables:

  1. Column size looks like it can be set using absolute pixel values:<td style=”width: 500px”> will generate a table cell 500px wide. If no other styling is applied, then any other cells in the same column (in different rows) will also adopt the 500px width.
  2. Table width seems to automatically stretch to 100%, regardless of the content inside – I can’t find a way to make the outer frame of the table condense to anything smaller.
  3. Row height can be set by using absolute pixel values:<tr style=”height: 100px”> will generate a row 100px high.
  4. Does this mean center-aligning a table? This doesn’t seem possible right now, and as stated earlier, tables seem to take up 100% width regardless.
  5. Again, it’s possible to set absolute pixel widths to columns, as shown in #1. However, the tricky part comes when it comes to filling the table with different-sized columns that need to be in proportion to one another (e.g. one column that’s 75% of the table width, and 2 more that are 12.5%). Setting percentage-based columns is very finnicky; for example:<tr>
    <td style=”width: 75%”>Sanskrit:</td>
    <td style=”width: 12.5%”>mātár</td>
    <td style=”width: 12.5%”>pitár</td>
    </tr>will not fill the width of the table, even though 75 + 12.5 + 12.5 = 100. The trick is to give one of the columns an arbitrarily large but absolute (e.g. 1000px) pixel width. This will cause all of the other columns to adhere to their percentages properly. For example:<tr>
    <td style=”width: 75%”>Sanskrit:</td>
    <td style=”width: 1000px”>mātár</td>
    <td style=”width: 12.5%”>pitár</td>
    </tr>or,<tr>
    <td style=”width: 1000px”>Sanskrit:</td>
    <td style=”width: 12.5%”>mātár</td>
    <td style=”width: 12.5%”>pitár</td>
    </tr>will both generate the proper proportions (75-12.5-12.5), even though the column given an absolute width isn’t actually 1000px wide.
Other discoveries:
  1. Table height can be set:<table style=”height: 220px”>

    </table>

    will lock the table frame’s height at 220px. If this is higher than the actual table, then a large gap will appear beneath the contents of the table. If it’s smaller than the contents of the table, then a vertical scrollbar will appear. Hypothetically, we can use this to lock all tables to a specific height if we determine there’s an advisable max-height (e.g. we discover that tables should be no taller than 500px; we can simply type <table style=”height: 220px”> for all tables.

Comments are closed.