Table Widget(Traditional Web)には、Column Span、Row Spanというプロパティがあり、セルの水平、垂直方向の結合を指定できます。
HTMLのtd、thタグにある、rowspan、colspanと同じ設定。
結合する操作
行方向
Cell WidgetにはColumn Spanプロパティがあるものの、グレイアウトされていて入力できません。
代わりに、
- MergeしたいCell Widget(同じRow内で横並びのもの)をCtrlキーを押したまま複数選択
- 右クリック
- Table > Merge Cells(下の例では、3つのセルの内、先頭2つにたいしてMergeしている)
選択したCell Widgetが結合して1つになります。また、そのCell WidgetのColumn Spanに選択していたセル数が自動設定されます。
マージしたセルはこのように1つになり、もともと選択していたセル数が、Column Spanプロパティに設定されました。
実行時に出力されるHTML。Service Studio上での設定ときちんと対応しているので、特に説明は必要なさそうです。
列方向
こちらは、Cell WidgetのRow Spanです。
手順は、行方向と基本的に同じで、
- MergeしたいCell Widget(列位置が同じで縦に並ぶもの)をCtrlキーを押したまま複数選択
- 右クリック
- Table > Merge Cells
結合を解除する操作
行方向
- Column Spanに値が入っているCell Widgetを選択
- 右クリック
- Table > Split Cell
列方向
- Row Spanに値が入っているCell Widgetを選択
- 右クリック
- Table > Split Cell
公式ドキュメント
Cell Widgetのドキュメント。プロパティの説明は記載されているのですが、設定方法は載っていません。
https://success.outsystems.com/Documentation/11/Reference/OutSystems_Language/Traditional_Web/Web_Interfaces/Designing_Screens/Cell_Widget