Put fixed space between two columns in a datalist

BumbleBee picture BumbleBee · Oct 25, 2011 · Viewed 17.1k times · Source

I'm using a datalist to display images. There are two columns per row but the spacing between the columns is too little. Is there a way to place a fixed spacing between the columns?

 <td class ="DLSettings"> 
    <asp:DataList ID="DlReviewImages" runat="server"  
                  RepeatColumns="2" RepeatDirection="Horizontal"
                  HeaderStyle-VerticalAlign="Top">
        <ItemTemplate>
             <table >
                 <tr>
                   <td colspan="2">
                      <table cellspacing="0" cellpadding="0" border="0" class="tableborder">
             <tr>
                           <td align="center">
                              <a href="" target="_blank" runat="server" id="AImage">
                              <img runat="server" id="ThumbnailReviewImage" width="250" height="200" border="0"/>     </a>
                           </td>
                         </tr>
                      </table>
                   </td>
              </tr>
            </table>
        </ItemTemplate>
    </asp:DataList>
 </td>

CSS :

.DLSettings{ 
               border-width:1px;    
    border-color:Black;    
    border-style:solid;    
    background-color: #E3E3E3; 
    padding:5px 10px 30px 30px;
    }

Thanks in advance

BB

Answer

James Johnson picture James Johnson · Oct 26, 2011

I would just use the CellPadding property to increase the spacing between columns:

<asp:DataList ID="DataList1" runat="server" CellPadding="5" ...>

You don't need either of the tables in your ItemTemplate either. They're just taking up space and slowing things down. Try using the ItemStyle for alignment instead:

<asp:DataList ID="DlReviewImages" runat="server" RepeatColumns="2" CellPadding="5" RepeatLayout="Table" RepeatDirection="Horizontal" HeaderStyle-VerticalAlign="Top">  
    <ItemStyle HorizontalAlign="Center" />
    <ItemTemplate>   
          <a href="" target="_blank" runat="server" id="AImage">   
              <img runat="server" id="ThumbnailReviewImage" width="250" height="200" border="0"/>     
          </a>                              
    </ItemTemplate>   
</asp:DataList>