User Manual

08.14.2024

MANUAL

FAQ: How to adjust the width of the list screen

## Answer Use "[Style](/en/manual/table-management-style)". --- ## Overview If you want to adjust the width size on the list screen, use "[Style](/en/manual/table-management-style)". You can do so by setting the following style. ## Operation procedure 1. Open the target table and open "[Table Management](/en/manual/table-management)" and "[Style](/en/manual/table-management-style)". 1. By writing the following CSS and selecting "[List](/en/manual/table-management-grid)" for "Output Destination", you can specify the width of the entire table or each column on the list screen. 1. When you open the "[List Screen](/en/manual/table-grid)" of the target table, it will be displayed with the specified column width. ### Change Before ![image](https://pleasanter.org/binaries/acd06b62359247b8aac20384036ddad5) ### After Change ![image](https://pleasanter.org/binaries/f9895d212666473e98cc0e1b3ddc78cd) ## Sample Code ##### CSS ``` table { table-layout: fixed; width: 80%; /*Specify the width of the entire table. 100% for the entire window*/ } th[data-name="Title"] {width: 35%; } /*Title column width*/ th[data-name="ClassA"] {width: 10%; } /*Classification A column width*/ th[data-name="NumA"] {width: 5%; } /*Num A column width*/ th[data-name="DateA"] {width: 15%; } /*Date A column width*/ th[data-name="DescriptionA"] {width: 25%; } /*Description A column width*/ th[data-name="CheckA"] {width: 5%; } /*Check A column width*/ ```
TOP
このページをシェアする
記載された商品名、各製品名は各社の登録商標または商標です。 © Implem Inc.