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*/
```