Column Stretching in Tables

When a Table component is inserted into Show Detail Item, certain conditions must be met for Show Detail Item to allow the Table component to be stretched, namely:

There is only one child inside of Show Detail Item

The
StretchChildren attribute on Show Detail Item is set to
first

The child has no width, height, border, margin, or padding property set

You do not have to set the width and height properties of Table for the component to be stretched.

To stretch a table column, you set a value on the
columnStretching attribute of Table. Valid values of
columnStretching are:

none: No column is stretched. This is the default. For optimal performance, use the default.

blank: An empty, blank column will be automatically inserted after the table's last column. The blank column will be stretched to fill up any unused space inside the visible portion of the browser. The table row background colors will then span the entire width of the table.

last: The last column will be stretched to fill up any unused space inside the viewport of the browser.

If you want a specific column to stretch, in the
columnStretching field of the Table component in the Property Inspector, specify the id of the column using the prefix
column:. For example, if the column id is
myCol1, enter
column:myCol1 in the
columnStretching field.

You will not see column stretching in the visual editor.

Note: Since you are not binding the table to any data source in the example, when the page is run, you will see only the column headings (and not the empty table cells).