css - 无法为 webgrid 列和行设置宽度或高度

Question

我试图调节 webgrid 子表中行的大小，但没有成功。以下是我的表格创建脚本的开头:

@grid.GetHtml(
            htmlAttributes: new { id = "gridT", width = "700px" },
            tableStyle: "webgrid-table",
            columns: grid.Columns(
                    grid.Column("singleUser.RA_Responsible_Person", "RA Responsible Person"),
                    grid.Column("singleUser.Issues_Count", "Issues Count"),
                    grid.Column(header: "Min Deadline", format: (item) => string.Format("{0:dd-MM-yyyy}", item.singleUser.Min_Deadline)),
                    grid.Column(header: "Max Deadline", format: (item) => string.Format("{0:dd-MM-yyyy}", item.singleUser.Max_Deadline)),

                    grid.Column(format: (item) =>
                    {
                        WebGrid subGrid = new WebGrid(source: item.Cases, canPage: true, rowsPerPage: 5);
                        return subGrid.GetHtml(
                            htmlAttributes: new { id = "subT" },
                            columns: subGrid.Columns(
                                    subGrid.Column("Issue_ID", "Issue_ID"),
                                    subGrid.Column("Issue", "Issue"),
                                    subGrid.Column("Case_Status", "Case_Status"),
                                    subGrid.Column("Issued_by", "Issued_by"),
                                    subGrid.Column("Issue_Date", "Issue_Date"),
                                    subGrid.Column("Issue_Type", "Issue_Type"),
                                    subGrid.Column("Server_Name", "Server_Name"),
                                    subGrid.Column("DB_Name", "DB_Name"),
                                    subGrid.Column("Issue_Desciption", "Issue_Desciption", style: "longTextColumn"),
                                    subGrid.Column("RA_Responsible_Person", "RA_Responsible_Person"),
                                    subGrid.Column("Reasons_For_Issue", "Reasons_For_Issue", style: "longTextColumn"),...

我将一些列分配到“longTextColumn”类中，该类应该更宽:

.longTextColumn {
    max-height: 60px;
    width: 350px;
    overflow: hidden;
}

然后，我将 max-height 分配给主表中的每一行，因为我需要将信息放入较小的空间。

    #gridT tr:nth-child(odd) {
        background: #eee;
        max-height: 20px;
        overflow: hidden;
    }

    #gridT tr:nth-child(even) {
        background: #fff;
        max-height: 20px;
        overflow: hidden;
    }

当然，这些东西不起作用，因为大小定义不再适用于单列。我曾经通过在单元格内嵌套 div 来解决这个问题，但是使用这段代码 idk 如何并且我不想这样做。谁能给我一个建议？

提前致谢!

PS:我试图为我的整个表格分配固定宽度 - 它没有帮助。 我知道我分配了冲突的最大高度，但它们都不影响行，所以没关系。另外，我先做了其中一种样式，但没有成功。

Answer 1

毕竟，我已经采用了经过测试的旧解决方案 - 我通过在 td 单元格周围包装一个 div 进行了黑客攻击。非常低效和不必要。我希望有一天好心人会再次押注于我们的智慧，并允许我们在自己的专栏上设定大小。

解决方法如下:

添加了一个类:

                        columns: subGrid.Columns(
                                    subGrid.Column("Issue_ID", "Issue_ID"),
                                    subGrid.Column("Issue", "Issue", style: "long"), .....

和一个脚本:

    <script>
        $(".long").each(function () {
            $(this).wrapInner("<div class='longTextColumn'></div>");
        });
    </script>