How to resize grid-view column width?


Tags: css,gridview,webforms

Problem :

I am trying to re-size columns width in my gridview that I created using this tutorial, but I am unable to do so. I have been through tens of ways by googling but non of them worked.

Code that is creating problem

<asp:BoundField DataField="CustomerID" HeaderText="CustomerID" HtmlEncode="False" />
<asp:BoundField DataField="Name" HeaderText="Name" HtmlEncode="False" />
<asp:BoundField DataField="Address" HeaderText="Address" HtmlEncode="False" />
<asp:TemplateField> // I don't want to show it in my gridview as it is just being
                    // for showing nested gridview
<ItemTemplate>
</td></tr>

I tried to change column visiblity but then show/hide button doesn't work anymore.

This is how my gridview looks like,

enter image description here

I want to hide last empty column or minimize it's width so it should be hidden and increase description column width, decrease ID number column width and also first column's width,

I even tried CSS way but then it says width 0px however no change in width and ControlStyle-Width="10%" but it didn't worked.



Solution :

dear friend use the following code

    <asp:GridView runat="server" id="testGrid">
    <Columns>
        <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" HtmlEncode="False" ItemStyle-Width="100px" />
        <asp:BoundField DataField="Name" HeaderText="Name" HtmlEncode="False" ItemStyle-Width="100px" />
        <asp:BoundField DataField="Address" HeaderText="Address" HtmlEncode="False" ItemStyle-Width="100px" />
    </Columns>
</asp:GridView>

or if you understand the css then use the following code in which you have to assign the css class to ControlStyle-CssClass property

    <asp:GridView runat="server">
    <Columns>
        <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" HtmlEncode="False" ControlStyle-CssClass="cssclass1" />
        <asp:BoundField DataField="Name" HeaderText="Name" HtmlEncode="False" ControlStyle-CssClass="cssclass2"  />
        <asp:BoundField DataField="Address" HeaderText="Address" HtmlEncode="False" ControlStyle-CssClass="cssclass3" />
    </Columns>
</asp:GridView>

    CSS Howto..

    How to use commas in a CSS variable fallback?

    css: How to float div according to 2nd div in hierarchy

    How to fix the top row and first column in a webpage, with only CSS

    How to change the input field's text color in MaterializeCSS?

    how to make a input tag takes the rest of a td space in css?

    How to add CSS tag to ruby on rail loop?

    How to create a layout with 2 menu bars in css?

    How do I add a mouseover drop shadow effect for circular images?

    How to center vertically and horizontally a heading text using flask-bootstrap

    How to increase checkboxes size with css which work in Google Chrome?

    How to create a Vertical Strikethrough in CSS?

    How do I create a mobile version of Nav Bar [closed]

    How can I change styling and test for every page reload [closed]

    How to control the CSS of the contents that loaded dynamically into iframe?

    How to apply the CSS of navbar-inverse in twitter-bootstrap

    How to get smaller divs to stack to the right of larger divs?

    How to attach a div to a particular dimension in html

    how to change “product details” text to my own text in Virtuemart?

    How does JS DOM manipulation affect CSS rule matching?

    How to make my popup not transparent and sideways draggable?

    Rails How to include a scss file in a specific erb view? [duplicate]

    What's the best way to show (un/ordered) HTML lists as a top-down tree?

    How to place Social media icons on right side of navbar

    How to use a different stylesheet for iphone or android? I can modify only html later on

    How to convert simple navigation to include drop down menus? (Specific situation - have tried conversion)

    How to display mouseover effect in GridView rows using only CSS?

    How do I get an object from d3.data()?

    Why doesn't this site have a Google logo for their use of Google Maps? I want to do this. How? [closed]

    How do I resize an image size automatically loaded in different browsers and screen size?

    How do I change the Mailchimp subscribe button color using inline CSS?