css 相关问题

这是默认下拉单选无复选框无按钮列表代码（在WebAPP.NET框架中）：这是默认下拉单选无复选框无按钮列表代码（在WebAPP.NET框架中）： <asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:ODWConnectionString_Live %>" SelectCommand="SELECT DISTINCT ISNULL(NULLIF(CZF_ODW, 'NA'), 'Other') AS CZF_ODW FROM dbo.WebAppTestView;"></asp:SqlDataSource> <td class="required" align="right" style="text-align: right;"> <span class="catchment">Catchment Zone:</span> </td> <td> <asp:DropDownList ID="ddlField1" runat="server" CssClass="textfield" Width="200px" OnSelectedIndexChanged="ddlField1_SelectedIndexChanged" style="width: 182px; margin: 9px;" DataSourceID="SqlDataSource3" DataTextField="CZF_ODW" DataValueField="CZF_ODW" AppendDataBoundItems="true"> <asp:ListItem Value="All"></asp:ListItem> </asp:DropDownList> </td> </td> 需要将上面的下拉列表代码转换为带按钮的多选复选框下拉列表。好吧，如果可能的话，使用列表框可以进行多项选择，但当然会占用更多的屏幕空间。 asp.net 中没有内置的多选组合框（DropDownList）。因此，您可以采用第三方库。一个相当常见的选择是名为 select2 的 jQuery 插件。下一个问题是 select2 加载项无法与 asp.net DropDownList 很好地配合，但如果您放入 HTML“select”元素，它确实可以正常工作。事实证明 DropDownList 无论如何都是基于 HTML select 元素的。事实上，如果您使用 runat="server" 标记选择，那么您的功能与下拉列表非常相似。唯一缺少的功能是 autopostback="true"。而且你没有注意到你是否需要这种能力。让我们构建一个示例，并假设我们需要组合框的自动回发。为此，我们添加 JavaScript onchange 事件（客户端），然后只需单击表单上的按钮即可。该按钮（最终）应该用 style="display:none" 隐藏。因此，我们的标记如下所示： <div style="float: left"> <h4>Select Multiple Cites</h4> <select id="DropDownList1" runat="server" clientidmode="static" datatextfield="City" multiple="true" style="width: 500px" onchange="mychange()"> </select> <script> function mychange() { $('#Button1').click() } </script> </div> <div style="float: left; margin-left: 35px; margin-top: 40px"> <asp:Button ID="Button1" runat="server" Text="Show Hotels" ClientIDMode="Static" CssClass="btn" OnClick="Button1_Click" /> </div> <div style="clear: both; height: 20px"></div> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID" CssClass="table" Width="40%"> <Columns> <asp:BoundField DataField="FirstName" HeaderText="FirstName" /> <asp:BoundField DataField="LastName" HeaderText="LastName" /> <asp:BoundField DataField="HotelName" HeaderText="HotelName" /> <asp:BoundField DataField="City" HeaderText="City" /> <asp:BoundField DataField="Description" HeaderText="Description" /> </Columns> </asp:GridView> <script> $(document).ready(function () { console.log("on page load select2 combo box setup") $('#DropDownList1').select2() }); </script> 我们背后的代码是这样的： Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not IsPostBack Then LoadData() End If End Sub Sub LoadData() Dim rstHotels As DataTable rstHotels = MyRst("SELECT City FROM tblHotels WHERE City is not null GROUP BY City") DropDownList1.DataSource = rstHotels DropDownList1.DataBind() End Sub Protected Sub Button1_Click(sender As Object, e As EventArgs) LoadGrid() End Sub Sub LoadGrid() Dim strSQL As String = "SELECT * FROM tblHotelsA" Dim strWhere As String = "" Dim cmdSQL As New SqlCommand() Dim ParamCount As Integer = 0 Dim sP As String = "" For Each MyPick As ListItem In DropDownList1.Items Debug.Print($"Item = {MyPick.Text} selected = {MyPick.Selected}") If MyPick.Selected Then If strWhere <> "" Then strWhere &= "," ParamCount += 1 sP = $"@P{ParamCount}" strWhere &= sP cmdSQL.Parameters.Add($"@P{ParamCount}", SqlDbType.NVarChar).Value = MyPick.Text End If Next If strWhere <> "" Then strSQL &= $" WHERE City IN ({strWhere}) " End If strSQL &= " ORDER BY HotelName" cmdSQL.CommandText = strSQL Dim dt As DataTable = MyRstP(cmdSQL) GridView1.DataSource = dt GridView1.DataBind() End Sub 请注意，在上面，我们仍然使用 SQL 参数，因此代码不会受到潜在的 SQL 注入的影响。当然，如果您不需要也不希望自动回发，那么您可以删除按钮以及附加到 select 元素的 onchange JavaScript 代码。

javascript html css asp.net bootstrap-4

回答 1 投票 0

无法将表格标题置于固定（粘性）位置

我有一个包含很多行的 HTML 表格，我试图使表格标题在滚动时具有粘性。但我无法让标头粘住或保持在固定位置。超文本标记语言我有一个包含很多行的 HTML 表格，我试图使表格标题在滚动时具有粘性。但是我无法让标头粘住或保持在固定位置。 HTML <section> <table> <thead> <tr> <th>A <th> <th>B <th> <th>C <th> <th>D <th> <th>E <th> <th>F <th> <th>G <th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> </tbody> </table> </section> CSS section { width: 100%; overflow-x: scroll; overflow-y: hidden; } table { width: 250%; } th { text-align: left; position: sticky; } thead { position: sticky; } 发生这种情况的原因有很多：位置粘性不适用于 <thead> 或 <tr>，仅适用于<th> 如果元素的任何父元素上的溢出设置为隐藏、滚动或自动，则位置粘性很可能不起作用。如果任何父元素设置了高度，位置粘性可能无法正常工作。如果表格 display 设置为 block 或 table 等属性之外的其他内容，位置粘性将不起作用许多浏览器仍然不支持粘性定位。查看哪些浏览器支持position：sticky。检查祖先元素是否设置了溢出（例如溢出：隐藏）；尝试切换它。您可能必须在 DOM 树上爬得比您预期的更高。这可能会影响你的位置：粘在后代元素上。简单的例子添加类和布局应该不难。 body { margin: 0; padding: 2rem; } table { text-align: left; position: relative; border-collapse: collapse; } th, td { padding: 0.25rem; } tr.red th { background: red; color: white; } tr.green th { background: green; color: white; } tr.purple th { background: purple; color: white; } th { background: white; position: sticky; top: 0; /* Don't forget this, required for the stickiness */ box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4); } <table> <thead> <tr class="red"> <th>Name</th> <th>Age</th> <th>Job</th> <th>Color</th> <th>URL</th> </tr> </thead> <tbody> <tr> <td>Lorem.</td> <td>Ullam.</td> <td>Vel.</td> <td>At.</td> <td>Quis.</td> </tr> <tr> <td>Quas!</td> <td>Velit.</td> <td>Quisquam?</td> <td>Rerum?</td> <td>Iusto?</td> </tr> <tr> <td>Voluptates!</td> <td>Fugiat?</td> <td>Alias.</td> <td>Doloribus.</td> <td>Veritatis.</td> </tr> <tr> <td>Maiores.</td> <td>Ab.</td> <td>Accusantium.</td> <td>Ullam!</td> <td>Eveniet.</td> </tr> <tr> <td>Hic.</td> <td>Id!</td> <td>Officiis.</td> <td>Modi!</td> <td>Obcaecati.</td> </tr> <tr> <td>Soluta.</td> <td>Ad!</td> <td>Impedit.</td> <td>Alias!</td> <td>Ad.</td> </tr> <tr> <td>Expedita.</td> <td>Quo.</td> <td>Exercitationem!</td> <td>Optio?</td> <td>Ipsum?</td> </tr> <tr> <td>Commodi!</td> <td>Rem.</td> <td>Aspernatur.</td> <td>Accusantium!</td> <td>Maiores.</td> </tr> <tr> <td>Omnis.</td> <td>Cumque?</td> <td>Eveniet!</td> <td>Mollitia?</td> <td>Vero.</td> </tr> <tr> <td>Error!</td> <td>Inventore.</td> <td>Quasi!</td> <td>Ducimus.</td> <td>Repudiandae!</td> </tr> <tr> <td>Dolores!</td> <td>Necessitatibus.</td> <td>Corrupti!</td> <td>Eum.</td> <td>Sunt!</td> </tr> <tr> <td>Ea.</td> <td>Culpa?</td> <td>Quam?</td> <td>Nemo!</td> <td>Sit!</td> </tr> <tr> <td>Veritatis!</td> <td>Facilis.</td> <td>Expedita?</td> <td>Ipsam!</td> <td>Omnis!</td> </tr> <tr> <td>Vitae.</td> <td>Cumque.</td> <td>Repudiandae.</td> <td>Ut?</td> <td>Sed!</td> </tr> <tr> <td>Accusantium.</td> <td>Adipisci.</td> <td>Sit.</td> <td>Maxime.</td> <td>Harum.</td> </tr> <tr class="green"> <th>Name</th> <th>Age</th> <th>Job</th> <th>Color</th> <th>URL</th> </tr> <tr> <td>Qui!</td> <td>Accusamus?</td> <td>Minima?</td> <td>Dolorum.</td> <td>Molestiae.</td> </tr> <tr> <td>Vero!</td> <td>Voluptatum?</td> <td>Ea?</td> <td>Odit!</td> <td>A.</td> </tr> <tr> <td>Debitis.</td> <td>Veniam.</td> <td>Fuga.</td> <td>Alias!</td> <td>Recusandae!</td> </tr> <tr> <td>Aperiam!</td> <td>Dolorum.</td> <td>Enim.</td> <td>Sapiente!</td> <td>Suscipit?</td> </tr> <tr> <td>Consequuntur.</td> <td>Doloremque.</td> <td>Illum!</td> <td>Iste!</td> <td>Sint!</td> </tr> <tr> <td>Facilis.</td> <td>Error.</td> <td>Fugiat.</td> <td>At.</td> <td>Modi?</td> </tr> <tr> <td>Voluptatibus!</td> <td>Alias.</td> <td>Eaque.</td> <td>Cum.</td> <td>Ducimus!</td> </tr> <tr> <td>Nihil.</td> <td>Enim.</td> <td>Earum?</td> <td>Nobis?</td> <td>Eveniet.</td> </tr> <tr> <td>Eum!</td> <td>Id?</td> <td>Molestiae.</td> <td>Velit.</td> <td>Minima.</td> </tr> <tr> <td>Sapiente?</td> <td>Neque.</td> <td>Obcaecati!</td> <td>Earum.</td> <td>Esse.</td> </tr> <tr> <td>Nam?</td> <td>Ipsam!</td> <td>Provident.</td> <td>Ullam.</td> <td>Quae?</td> </tr> <tr> <td>Amet!</td> <td>In.</td> <td>Officia!</td> <td>Natus?</td> <td>Tempore?</td> </tr> <tr> <td>Consequatur.</td> <td>Hic.</td> <td>Officia.</td> <td>Itaque?</td> <td>Quasi.</td> </tr> <tr> <td>Enim.</td> <td>Tenetur.</td> <td>Asperiores?</td> <td>Eos!</td> <td>Libero.</td> </tr> <tr> <td>Exercitationem.</td> <td>Quidem!</td> <td>Beatae?</td> <td>Adipisci?</td> <td>Accusamus.</td> </tr> <tr> <td>Omnis.</td> <td>Accusamus?</td> <td>Eius!</td> <td>Recusandae!</td> <td>Dolor.</td> </tr> <tr> <td>Magni.</td> <td>Temporibus!</td> <td>Odio!</td> <td>Odit!</td> <td>Voluptatum?</td> </tr> <tr> <td>Eum.</td> <td>Animi!</td> <td>Labore.</td> <td>Alias!</td> <td>Fuga.</td> </tr> <tr> <td>Quia!</td> <td>Quis.</td> <td>Neque?</td> <td>Illo.</td> <td>Ad.</td> </tr> <tr> <td>Officiis.</td> <td>Exercitationem!</td> <td>Adipisci?</td> <td>Officiis?</td> <td>In?</td> </tr> <tr> <td>Voluptates?</td> <td>Voluptatum.</td> <td>Nihil.</td> <td>Totam?</td> <td>Quisquam!</td> </tr> <tr> <td>Soluta.</td> <td>Tempore!</td> <td>Cupiditate.</td> <td>Beatae.</td> <td>Perspiciatis.</td> </tr> <tr> <td>Porro.</td> <td>Officia?</td> <td>Error.</td> <td>Culpa?</td> <td>Fugit.</td> </tr> <tr> <td>Et?</td> <td>Nemo.</td> <td>Nisi?</td> <td>Totam!</td> <td>Voluptate.</td> </tr> <tr> <td>Saepe?</td> <td>Vero.</td> <td>Amet?</td> <td>Illo!</td> <td>Laborum!</td> </tr> <tr class="purple"> <th>Name</th> <th>Age</th> <th>Job</th> <th>Color</th> <th>URL</th> </tr> <tr> <td>Atque!</td> <td>Tenetur.</td> <td>Optio.</td> <td>Iure.</td> <td>Porro.</td> </tr> <tr> <td>Atque.</td> <td>Alias.</td> <td>Doloremque.</td> <td>Velit.</td> <td>Culpa.</td> </tr> <tr> <td>Placeat?</td> <td>Necessitatibus.</td> <td>Voluptate!</td> <td>Possimus.</td> <td>Nam?</td> </tr> <tr> <td>Illum!</td> <td>Quae.</td> <td>Expedita!</td> <td>Omnis.</td> <td>Nam.</td> </tr> <tr> <td>Consequuntur!</td> <td>Consectetur!</td> <td>Provident!</td> <td>Consequuntur!</td> <td>Distinctio.</td> </tr> <tr> <td>Aperiam!</td> <td>Voluptatem.</td> <td>Cupiditate!</td> <td>Quae.</td> <td>Praesentium.</td> </tr> <tr> <td>Possimus?</td> <td>Qui.</td> <td>Consequuntur.</td> <td>Deleniti.</td> <td>Voluptas.</td> </tr> <tr> <td>Hic?</td> <td>Ab.</td> <td>Asperiores?</td> <td>Omnis.</td> <td>Animi!</td> </tr> <tr> <td>Cupiditate.</td> <td>Velit.</td> <td>Libero.</td> <td>Iste.</td> <td>Dicta?</td> </tr> <tr> <td>Consequatur!</td> <td>Nobis.</td> <td>Aperiam!</td> <td>Odio.</td> <td>Nemo!</td> </tr> <tr> <td>Dolorem.</td> <td>Distinctio?</td> <td>Provident?</td> <td>Nisi!</td> <td>Impedit?</td> </tr> <tr> <td>Accusantium?</td> <td>Ea.</td> <td>Doloribus.</td> <td>Nobis.</td> <td>Maxime?</td> </tr> <tr> <td>Molestiae.</td> <td>Rem?</td> <td>Enim!</td> <td>Maxime?</td> <td>Reiciendis!</td> </tr> <tr> <td>Commodi.</td> <td>At.</td> <td>Earum?</td> <td>Fugit.</td> <td>Maxime?</td> </tr> <tr> <td>Eligendi?</td> <td>Quis.</td> <td>Error?</td> <td>Atque.</td> <td>Perferendis.</td> </tr> <tr> <td>Quidem.</td> <td>Odit!</td> <td>Tempore.</td> <td>Voluptates.</td> <td>Facere!</td> </tr> <tr> <td>Repudiandae!</td> <td>Accusamus?</td> <td>Soluta.</td> <td>Incidunt.</td> <td>Aliquid?</td> </tr> <tr> <td>Quisquam?</td> <td>Eius.</td> <td>Obcaecati?</td> <td>Maxime.</td> <td>Nihil.</td> </tr> <tr> <td>Minus.</td> <td>Magni?</td> <td>Necessitatibus?</td> <td>Asperiores.</td> <td>Iure.</td> </tr> <tr> <td>Ipsa!</td> <td>Temporibus.</td> <td>Non!</td> <td>Dolore.</td> <td>Veritatis.</td> </tr> <tr> <td>Ea!</td> <td>Officia?</td> <td>Doloribus?</td> <td>Deleniti?</td> <td>Dolorem!</td> </tr> <tr> <td>Sequi?</td> <td>Molestias!</td> <td>Nesciunt.</td> <td>Qui.</td> <td>Doloribus?</td> </tr> <tr> <td>Id.</td> <td>Enim?</td> <td>Quam!</td> <td>Sunt!</td> <td>Consequuntur.</td> </tr> <tr> <td>Reprehenderit?</td> <td>Ut?</td> <td>Veritatis!</td> <td>Corporis!</td> <td>Ipsa.</td> </tr> <tr> <td>Blanditiis!</td> <td>Veniam!</td> <td>Tenetur.</td> <td>Eos?</td> <td>Repellat!</td> </tr> <tr> <td>Enim?</td> <td>Atque!</td> <td>Aspernatur?</td> <td>Fugit.</td> <td>Voluptatibus!</td> </tr> <tr> <td>Nihil.</td> <td>Distinctio!</td> <td>Aut!</td> <td>Rerum!</td> <td>Dolorem?</td> </tr> <tr> <td>Inventore!</td> <td>Hic.</td> <td>Explicabo.</td> <td>Sit.</td> <td>A.</td> </tr> <tr> <td>Inventore.</td> <td>A.</td> <td>Nam.</td> <td>Beatae.</td> <td>Consequatur.</td> </tr> <tr> <td>Eligendi.</td> <td>Illum.</td> <td>Enim?</td> <td>Dignissimos!</td> <td>Ducimus?</td> </tr> <tr> <td>Eligendi!</td> <td>Fugiat?</td> <td>Deleniti!</td> <td>Rerum?</td> <td>Delectus?</td> </tr> <tr> <td>Sit.</td> <td>Nam.</td> <td>Eveniet?</td> <td>Veritatis.</td> <td>Adipisci!</td> </tr> <tr> <td>Nostrum?</td> <td>Totam?</td> <td>Voluptates!</td> <td>Ab!</td> <td>Consequatur.</td> </tr> <tr> <td>Error!</td> <td>Dicta?</td> <td>Voluptatum?</td> <td>Corporis!</td> <td>Ea.</td> </tr> <tr> <td>Vel.</td> <td>Asperiores.</td> <td>Facere.</td> <td>Quae.</td> <td>Fugiat.</td> </tr> <tr> <td>Libero?</td> <td>Molestias.</td> <td>Praesentium!</td> <td>Accusantium!</td> <td>Tenetur.</td> </tr> <tr> <td>Eveniet.</td> <td>Quam.</td> <td>Quibusdam.</td> <td>Eaque?</td> <td>Dolore!</td> </tr> <tr> <td>Asperiores.</td> <td>Impedit.</td> <td>Ullam?</td> <td>Quod.</td> <td>Placeat.</td> </tr> <tr> <td>In?</td> <td>Aliquid.</td> <td>Voluptatum!</td> <td>Omnis?</td> <td>Magni.</td> </tr> <tr> <td>Autem.</td> <td>Earum!</td> <td>Debitis!</td> <td>Eius.</td> <td>Incidunt.</td> </tr> <tr> <td>Blanditiis?</td> <td>Impedit.</td> <td>Libero?</td> <td>Reiciendis!</td> <td>Tempore.</td> </tr> <tr> <td>Quasi.</td> <td>Reiciendis.</td> <td>Aut?</td> <td>Architecto?</td> <td>Vero!</td> </tr> <tr> <td>Fuga!</td> <td>Illum!</td> <td>Tenetur!</td> <td>Vitae.</td> <td>Natus.</td> </tr> <tr> <td>Dolorem?</td> <td>Eaque!</td> <td>Vero?</td> <td>Quibusdam.</td> <td>Deleniti?</td> </tr> <tr> <td>Minus.</td> <td>Accusantium?</td> <td>Ab.</td> <td>Cupiditate.</td> <td>Atque?</td> </tr> <tr> <td>Hic.</td> <td>Eligendi.</td> <td>Sit?</td> <td>Nihil.</td> <td>Dolor.</td> </tr> <tr> <td>Quidem.</td> <td>In?</td> <td>Nesciunt?</td> <td>Adipisci.</td> <td>Neque.</td> </tr> <tr> <td>Eos.</td> <td>Incidunt!</td> <td>Quis?</td> <td>Quod?</td> <td>Vitae!</td> </tr> <tr> <td>Ullam!</td> <td>Facilis.</td> <td>Tempora!</td> <td>Accusantium.</td> <td>Consequuntur?</td> </tr> <tr> <td>Numquam?</td> <td>At.</td> <td>Incidunt.</td> <td>Tenetur?</td> <td>Voluptatem.</td> </tr> <tr> <td>Iusto?</td> <td>Inventore.</td> <td>Molestias.</td> <td>Accusantium.</td> <td>Sunt.</td> </tr> <tr> <td>Repellendus!</td> <td>Ex.</td> <td>Magnam.</td> <td>Odit!</td> <td>Iste?</td> </tr> <tr> <td>Id!</td> <td>Reiciendis?</td> <td>Rem.</td> <td>Quae!</td> <td>Laborum?</td> </tr> <tr> <td>Exercitationem?</td> <td>Maiores.</td> <td>Minima.</td> <td>Nemo!</td> <td>Sequi.</td> </tr> <tr> <td>Qui.</td> <td>Impedit?</td> <td>Reprehenderit.</td> <td>Distinctio.</td> <td>Natus?</td> </tr> <tr> <td>Suscipit!</td> <td>Tenetur.</td> <td>Cumque!</td> <td>Molestiae.</td> <td>Fugiat?</td> </tr> <tr> <td>Sunt?</td> <td>Quis?</td> <td>Officia.</td> <td>Incidunt.</td> <td>Voluptate.</td> </tr> <tr> <td>Possimus.</td> <td>Mollitia!</td> <td>Eveniet!</td> <td>Temporibus.</td> <td>Mollitia!</td> </tr> <tr> <td>Incidunt.</td> <td>Fugiat.</td> <td>Error.</td> <td>Odit.</td> <td>Cumque?</td> </tr> <tr> <td>Maxime?</td> <td>Qui!</td> <td>Sapiente!</td> <td>Natus.</td> <td>Soluta?</td> </tr> </tbody> </table> 您只能在 position="sticky" 元素上设置 th（而不是 thead） th { /* ... */ position: sticky; top: 0; /* Don't forget this, required for the stickiness */ } 从.table-section中删除溢出设置： .table-section { width: 100%; /*overflow-x: scroll;*/ /*overflow-y: hidden;*/ padding-bottom: 20px; }

css html-table sticky

回答 2 投票 0

无法让表头处于固定位置（粘性）

所以我有一个html表格，我试图使表格标题在滚动时具有粘性，因为会有很多行，但它不起作用。我无法让标头粘住或留在...

css angular html-table

回答 2 投票 0

如何将元素在图像上（垂直）居中？ [已关闭]

我希望记分板垂直居中。我尝试了不同的方法，但它们就是行不通，可能是覆盖了 CSS 代码，但我不知道。（https://i.sstatic.net/M6JCLCKp.png...

html css

回答 1 投票 0

如何在React Native中实现实体盒阴影效果？

有没有其他人尝试在 React Native 中实现这一效果？：具有实体阴影效果的组件，可产生深度错觉。你可能知道 React-Native 不支持 CSS box-sh...