ASP.NET DataList 列寬度設置技巧：ItemStyle 屬性精確控制列寬高

問題場景

DataList 控件默認渲染為 <table>，列寬由內容撐開，難以精確控制。需固定列寬實現整齊對齊。

核心解決方案

使用 ItemStyle-Width 和 ItemStyle-Height 屬性直接設置單元格樣式：

<asp:DataList ID="DataList1" runat="server" 
    RepeatColumns="3" 
    RepeatDirection="Horizontal"
    Width="100%"
    ItemStyle-Width="33%" 
    ItemStyle-Height="100px"
    OnItemDataBound="DataList1_ItemDataBound"
    OnEditCommand="DataList1_EditCommand"
    OnUpdateCommand="DataList1_UpdateCommand">
    
    <ItemTemplate>
        <div class="item-box">
            <%# Eval("Title") %>
        </div>
    </ItemTemplate>
</asp:DataList>

渲染後 HTML 效果

<table id="DataList1" style="width:100%;">
  <tr>
    <td style="width:33%; height:100px;">...</td>
    <td style="width:33%; height:100px;">...</td>
    <td style="width:33%; height:100px;">...</td>
  </tr>
</table>

進階控制技巧

1. 百分比 vs 固定像素

• ItemStyle-Width="200px"：固定寬度，適合已知內容
• ItemStyle-Width="25%"：自適應容器，配合 RepeatColumns="4"

2. CSS 類替代內聯樣式 (推薦)

<asp:DataList ... ItemStyle-CssClass="dl-item" >

.dl-item {
    width: 250px;
    height: 150px;
    vertical-align: top;
    padding: 5px;
    border: 1px solid #ddd;
    box-sizing: border-box; /* 含 padding/border 在寬高內 */
}

3. 模板內容配合 overflow 處理長文本

<ItemTemplate>
    <div class="item-content">
        <h4><%# Eval("Title") %></h4>
        <p><%# Eval("Summary") %></p>
    </div>
</ItemTemplate>

.item-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* 單行省略 */
    /* 多行省略需 -webkit-line-clamp */
}

4. 響應式調整 (配合媒體查詢)

@media (max-width: 768px) {
    #DataList1 .dl-item { width: 50%; } /* 兩列 */
}
@media (max-width: 480px) {
    #DataList1 .dl-item { width: 100%; } /* 單列 */
}

常見問題

最佳實踐總結

1. 優先使用 ItemStyle-CssClass 分離樣式
2. 配合 table-layout: fixed 強制表格遵守寬度
3. 內容區使用 box-sizing: border-box 防止撐開
4. 響應式場景用 CSS 媒體查詢覆蓋寬度
5. 複雜佈局考慮遷移至 Repeater + CSS Flex/Grid