您现在的位置：程式碼之家 >> 編程語言 > >> .NET 網頁程式設計 >> .NET 實例教學

ASP.NET DataGrid 綁定列寬度設置完全指南：ItemStyle 與 HeaderStyle 協同控制

編輯：.NET 實例教學

問題背景

在 ASP.NET WebForms 時代，<asp:DataGrid> 是最常用的數據展示控件。開發者常遇到一個疑惑：為什麼設置了 Width="100%" 卻無法控制單列寬度？ 關鍵在於理解 ItemStyle-Width、HeaderStyle-Width 與表格佈局算法的交互關係。

核心屬性解析

屬性	作用對象	生效條件	優先級
`ItemStyle-Width`	數據行單元格 (`<td>`)	列為 `BoundColumn`/`TemplateColumn` 等顯式列	高
`HeaderStyle-Width`	表頭單元格 (`<th>`)	同上	高
`DataGrid.Width`	整個表格 (`<table>`)	始終	中
`ItemStyle-Wrap="False"`	防止內容換行撐寬	配合固定寬度使用	輔助

標準設置模式

<asp:DataGrid ID="DataGrid1" runat="server" 
    AutoGenerateColumns="False" 
    ShowHeader="False"
    Width="100%" 
    BorderColor="Black" 
    BorderWidth="3px" 
    CellSpacing="1"
    ItemStyle-Wrap="False">

    <ItemStyle BackColor="Snow" Font-Bold="False" />
    
    <Columns>
        <asp:BoundColumn DataField="home_institute" 
            ItemStyle-Width="25%" 
            HeaderStyle-Width="25%" />
        <!-- 其他列同理 -->
    </Columns>
</asp:DataGrid>

關鍵要點

雙向聲明：同時設置 ItemStyle-Width 與 HeaderStyle-Width。瀏覽器表格佈局引擎參考表頭與首行數據計算列寬，缺一不可。
百分比 vs 像素：百分比相對於 DataGrid 寬度（此處 100% 父容器），像素為固定值。混合使用時，瀏覽器先滿足像素列，剩餘空間按百分比分配。
關閉自動換行：ItemStyle-Wrap="False" 防止長文本撐破列寬，配合 CSS overflow:hidden; text-overflow:ellipsis; 實現截斷省略號（需在 ItemStyle-CssClass 中定義）。
AutoGenerateColumns="False"：必須顯式聲明 <Columns>，自動生成列無法精確控制寬度。

進階：CSS 精細控制（推薦現代做法）

雖然 DataGrid 內聯樣式可用，但維護性差。建議改用 CssClass + 外部 CSS：

<asp:BoundColumn DataField="home_institute" 
    ItemStyle-CssClass="col-institute" 
    HeaderStyle-CssClass="col-institute" />

/*** CSS ***/
.col-institute { width: 25%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 768px) { .col-institute { width: auto; min-width: 120px; } }

優勢：響應式、關注點分離、易維護、支援媒體查詢。

常見坑點排查

列寬不生效：檢查是否遺漏 HeaderStyle-Width、或父容器寬度為 0（隱藏/浮動未清除）。
表格超出容器：DataGrid 缺乏 table-layout: fixed。添加 DataGrid1.Attributes["style"] = "table-layout:fixed; width:100%;" 強制固定佈局。
中文內容換行：設置 ItemStyle-Wrap="False" 並配合 CSS word-break: keep-all;。