FAQ: How to adjust the column width on the screen index
---
Title:
Category:
Short Name: （重複NG）
Summary:
---
[md]
## Answer
Version 1.4.20.0 and later can be configured using "Cell Width". Earlier versions use "Style".
---
## Overview
Version 1.4.20.0 and later can be configured using "Cell Width". Earlier versions use "Style".
## Limitations
In version 1.4.20.0 and later, "Cell Width" changes take priority over changes made using "Style".
## Operation Procedure Using "Cell Width" (Version 1.4.20.0 and Later)
1. Open the target table.
1. Click "Manage" → "Manage table".
1. Click the "Grid" tab.
1. In the "Current settings" list, click on the item you want to adjust the width for, then click the "Advanced settings" button at the top of the list.
1. Enter the pixel value in "Cell width".
1. Click the "Change" button.
1. Click the "Update" button at the "Command button area".
1. Open the target table's list screen and verify the column width.
## Operation Procedure Using "Styles" (Before Version 1.4.20.0)
1. Open the target table.
2. Click "Manage" → "Manage table".
3. Open the "Styles" tab.
4. Click the "New" button to display the dialog.
5. Enter a title of your choice, such as "Adjust column width on Grid".
6. Enter a style to adjust the column width in Style.
7. Uncheck "All" for the output destination and check "「Index」".
8. Click the "Add" button in the dialog.
9. Click the "Update" button at the "Command button area".
10. Open the screen index of the target table and check the column width.
### Style Examples
### Before Change
### After Change
#### CSS
```
table {
table-layout: fixed;
width: 80%; /* Specify the overall table width. Use 100% for full window width */
}
th[data-name="Title"] {width: 35%;} /* Title column width */
th[data-name="ClassA"] {width: 10%;} /* ClassA column width */
th[data-name="NumA"] {width: 5%;} /* NumA column width */
th[data-name="DateA"] {width: 15%;} /* DateA column width */
th[data-name="DescriptionA"] {width: 25%;} /* DescriptionA column width */
th[data-name="CheckA"] {width: 5%;} /* CheckA column width */
```
## Related Information
[Table Management: List Screen: Item Detail Settings: Cell Width](https://pleasanter.org/ja/manual/table-management-grid-cell-width)
