Grid Edit mode in a reports datapage change width of one of the columns

[Billp]

I have a results page that I want the users to open in grid edit mode.  The first column needs to be significantly wider than the 2nd and 3rd column.  I have been trying to find a CSS Selector to be able to modify the width since in the standard form it is the same size as the other two columns but I can't find anything unique to identify it.   I am assuming once I find the unique selector I can simply add the CSS in the header of the page and viola?  

[cheonsa]

Hi @Billp,

This post may be helpful with your question:

th:nth-child(1) refers to the first column.  

[Billp]

cheonsa, thank you.  As soon as I saw the nth-child(1) I remembered that syntax existed.  I had forgotten about it.  Thanks

[autonumber]

Hi! Just to add to the answer above, you can also use this code if you have a long text in one of your fields. 

<style>
div[class="HeadCtnr"] th:nth-child(1) {
width: 400px !important;
}
.cbGridCtnr > .BodyCtnr .Cell > .Data:nth-child(1) {
overflow: visible !important;
white-space: nowrap !important;
}
div[class="BodyCtnr"] th:nth-child(1) {
width: 400px !important;
}
</style>

If you want to adjust the width of the Grid Edit, make sure to modify both the code for HeadCntr and BodyCntr.