2024年10月1日 星期二

[研究]ASP.NET, WebForm, 如何避免 bootstrap 5.3.3 把 GridView 或 DetailsView 的 Caption 顯示到表格下方

[研究]ASP.NET, WebForm, 如何避免 bootstrap 5.3.3 把 GridView 或 DetailsView 的 Caption 顯示到表格下方

2024-10-01

環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C# + SQL Server 2019 + SQL Server Management Studio (SSMS) 19

********************************************************************************

期望的，也是 GridView 和 DetailsView 的 Caption 預設的情況


bootstrap 5.3.3 把 GridView 或 DetailsView 的 Caption 顯示到表格下方

因為 bootstrap.css 和某些 bootstrap 套件的檔案中包含


table {
  caption-side: bottom;
  border-collapse: collapse;
}


********************************************************************************

可以添加 CSS 設定來解決

    <style type="text/css">
        table {
          caption-side: top;
        }
    </style>

Default.aspx 完整範例

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication5.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <style type="text/css">
        table {
          caption-side: top;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:MyDBConnectionString %>" 
            SelectCommand="SELECT * FROM [MyTable]"></asp:SqlDataSource>
        <asp:GridView ID="GridView1" Caption="標題"
            runat="server" AutoGenerateColumns="False" DataKeyNames="SN" DataSourceID="SqlDataSource1">
            <Columns>
                <asp:BoundField DataField="SN" HeaderText="SN" InsertVisible="False" ReadOnly="True" SortExpression="SN" />
                <asp:BoundField DataField="Field1" HeaderText="Field1" SortExpression="Field1" />
                <asp:BoundField DataField="Field2" HeaderText="Field2" SortExpression="Field2" />
            </Columns>
        </asp:GridView>
    </form>
</body>
</html>

********************************************************************************

或改成

custom.css

table {
    caption-side: top;   
}

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication5.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="custom.css" rel="stylesheet">

</head>
<body>
    <form id="form1" runat="server">
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:MyDBConnectionString %>" 
            SelectCommand="SELECT * FROM [MyTable]"></asp:SqlDataSource>
        <asp:GridView ID="GridView1" Caption="標題"
            runat="server" AutoGenerateColumns="False" DataKeyNames="SN" DataSourceID="SqlDataSource1">
            <Columns>
                <asp:BoundField DataField="SN" HeaderText="SN" InsertVisible="False" ReadOnly="True" SortExpression="SN" />
                <asp:BoundField DataField="Field1" HeaderText="Field1" SortExpression="Field1" />
                <asp:BoundField DataField="Field2" HeaderText="Field2" SortExpression="Field2" />
            </Columns>
        </asp:GridView>
    </form>
</body>
</html>


(完)

相關

張貼者： 於
標籤： , , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)