0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Table WidgetのRow/Column Span設定

Posted at

Table Widget(Traditional Web)には、Column Span、Row Spanというプロパティがあり、セルの水平、垂直方向の結合を指定できます。

HTMLのtd、thタグにある、rowspan、colspanと同じ設定。

結合する操作

行方向

Cell WidgetにはColumn Spanプロパティがあるものの、グレイアウトされていて入力できません。
代わりに、

  1. MergeしたいCell Widget(同じRow内で横並びのもの)をCtrlキーを押したまま複数選択
  2. 右クリック
  3. Table > Merge Cells(下の例では、3つのセルの内、先頭2つにたいしてMergeしている)

image.png

選択したCell Widgetが結合して1つになります。また、そのCell WidgetのColumn Spanに選択していたセル数が自動設定されます。

マージしたセルはこのように1つになり、もともと選択していたセル数が、Column Spanプロパティに設定されました。
image.png

実行時に出力されるHTML。Service Studio上での設定ときちんと対応しているので、特に説明は必要なさそうです。
image.png

列方向

こちらは、Cell WidgetのRow Spanです。
手順は、行方向と基本的に同じで、

  1. MergeしたいCell Widget(列位置が同じで縦に並ぶもの)をCtrlキーを押したまま複数選択
  2. 右クリック
  3. Table > Merge Cells

結合を解除する操作

行方向

  1. Column Spanに値が入っているCell Widgetを選択
  2. 右クリック
  3. Table > Split Cell

image.png

列方向

  1. Row Spanに値が入っているCell Widgetを選択
  2. 右クリック
  3. Table > Split Cell

公式ドキュメント

Cell Widgetのドキュメント。プロパティの説明は記載されているのですが、設定方法は載っていません。
https://success.outsystems.com/Documentation/11/Reference/OutSystems_Language/Traditional_Web/Web_Interfaces/Designing_Screens/Cell_Widget

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?