Question

我是.NET的新手。我正在将现有的HTML和asp.net网站转换为响应式网站。我使用no table的方法将ASP DataGrid转换为响应式，并且除了列标题重叠之外，它工作得很好。 DataGrid列是类似

的元素

<asp:BoundColumn DataField="M_DATENAME" HeaderText="Day"></asp:BoundColumn>

其中一些列包含<span>元素，因此，在较小的屏幕尺寸下，如果在td之前添加标题，这些列将重叠。

所以我尝试了两种方法：

根据Udemy course使用data-title或data-th属性：

no-more-tables td:before { content: attr(data-title); }

但是，问题是asp BoundColumn没有名为data-title或data-th的属性

第二种方法是根据example->问题手动添加标题：某些列设置为“不可见”，并且仅在某些情况下可见。因此，这些标头文本有时会重叠。

那我的问题怎么解决？

或者如何将BoundColumn HeaderText添加为content css属性的值，而不是data-title或data-th。

Answer 1

我找到了解决问题的办法。实际上，问题是由具有空值（空）的DataGrid列引起的，因此，在显示标题时，这些单元格没有显示，因此与下一个单元格重叠。为了达到这个目的，我做了以下工作： 1）我为每个BoundColumn和TemplateColumn添加了<ItemStyle CssClass="headerStyle5"/> 2）然后，在CSS中，我没有使用绝对列位置添加标题，而是使用在步骤1中添加的headerStyle名称来引用列，如下所示：

#no-more-tables td[class="headerStyle1"]:before { content: "Date"; }
#no-more-tables td[class="headerStyle2"]:before { content: "Day"; }
#no-more-tables td[class="headerStyle10"]:before { content: "Remarks"; }

3），我在VB.NET中编写了以下代码，以循环遍历所有空单元格，并添加一个仅带有空格的标签，以使该单元格显示

Dim i As Integer
For i = 0 To DataGrid1.Columns.Count - 1

    If e.Item.Cells(i).Text.Trim Is Nothing Or e.Item.Cells(i).Text.Trim = "" Then
        Dim sosoLabel As New Label
        sosoLabel.Text = "<label>&nbsp;</label>"
        e.Item.Cells(i).Controls.Add(sosoLabel)

    End If
Next

现在它运行良好：)

ASP DataGrid asp：BoundColumn的响应表（没有更多表）

1 个答案: