emitchell
asked on
How to pad datagrid cells horizontally, not vertically
I want to add padding to the cells in a datagrid. When I change the CellPadding property, it pads both the vertical height as well as the horizontal distance between the cells.
How can I change the horizontal distance between the cells but leave the vertical distance alone.
This is my current datagrid beginning line:
<asp:datagrid id="DataGrid1" runat="server"
DataKeyField="BoatID" AutoGenerateColumns="False
BorderWidth="1px" CellPadding="1" BorderStyle="Solid" ItemStyle-Wrap="False">
...
</asp:datagrid>
How can I change the horizontal distance between the cells but leave the vertical distance alone.
This is my current datagrid beginning line:
<asp:datagrid id="DataGrid1" runat="server"
DataKeyField="BoatID" AutoGenerateColumns="False
BorderWidth="1px" CellPadding="1" BorderStyle="Solid" ItemStyle-Wrap="False">
...
</asp:datagrid>
ASKER
From my CSS O'Reilly book, it appears there are separate attributes, padding-top, padding-right, padding-botton and padding-left. I should be able to use {padding: 0 2 2 0} but I'm not sure how to get this into the <asp:datagrid... /> line.
I tried using the following in the datagrid statement with 8 pixels of padding so that I could tell if I was getting a real effect:
<asp:datagrid id="DataGrid1" style="padding: 0 8px 8px 0;" runat="server" DataKeyField="BoatID" AutoGenerateColumns="False
<Columns>
...
</Columns>
</asp:datagrid>
and the resulting source when I looked at the page in the browser was:
<table cellspacing="0" rules="all" bordercolor="Yellow" border="1" id="DataGrid1" style="border-color:Yellow
...
</table>
I couldn't see the 8 pixels of padding that were supposed to be there! Is there something else that I have to do?
I tried using the following in the datagrid statement with 8 pixels of padding so that I could tell if I was getting a real effect:
<asp:datagrid id="DataGrid1" style="padding: 0 8px 8px 0;" runat="server" DataKeyField="BoatID" AutoGenerateColumns="False
<Columns>
...
</Columns>
</asp:datagrid>
and the resulting source when I looked at the page in the browser was:
<table cellspacing="0" rules="all" bordercolor="Yellow" border="1" id="DataGrid1" style="border-color:Yellow
...
</table>
I couldn't see the 8 pixels of padding that were supposed to be there! Is there something else that I have to do?
You can adjust the height of items within the grid by setting the height attribute of ItemStyle or AlternateItemStyle tag.
ASKER
I'd really like to leave the height alone. All I'm trying to do is add a couple of pixels at the ends of each item in the data grid. The default height is fine as it is.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
change the padding as per your need, for testing i made it 0 0 0 100
myPad
{
padding:0px 8px 8px 0px
}
myPad
{
padding:0px 8px 8px 0px
}
ASKER
Appari,
Thanks for the solution. The key for me was to put the CssStyle="myPad" into the <ItemStyle...> and <AlternatingItemStyle...> tags and then the text:
... class="myPad" ...
showed up in every <td...> tag in the resulting table on the page produced by the <asp:datagrid...> .aspx file.
Having to use a separate style definition is a little clumsy. I wish that there way to define an in-line style but I tried a number of combinations and nothing seemed to work.
Thanks for the solution. The key for me was to put the CssStyle="myPad" into the <ItemStyle...> and <AlternatingItemStyle...> tags and then the text:
... class="myPad" ...
showed up in every <td...> tag in the resulting table on the page produced by the <asp:datagrid...> .aspx file.
Having to use a separate style definition is a little clumsy. I wish that there way to define an in-line style but I tried a number of combinations and nothing seemed to work.
--Michael