Question

编辑：如果其他人正在寻找此解决方案，请检查标记为正确的答案下的评论。使用div标签和内联块可以正确显示所有内容。

我正试图占用60％的可用空间。似乎没有什么改变正在显示的内容......表格行占用了100％（或更多）的可用空间而没有将元素包装到下一行。所有数据都是正确的，格式化不会。

任何人都能帮我弄清楚为什么不考虑宽度？

CSS：

/*#region project-data */

.project-data {
    width: 60%;
}

.project-alert {
    padding: 3px;
    text-align: center;
    width: 200px;
    border: 2px solid #999;
}

.project-alert th {
    text-align: center;
}

.al-text {
}

.info-bar {
    height: 8px;
}

.last-reported {
    font-style: italic;
    font-size: small;
}

.al-time {
    font-size: small;
}

/*#endregion */

部分视图：

<table class="project-data">
    <tr>
        @foreach (var item in Model)
        {
            <td>
                <table class="project-alert">
                    <thead>
                        <tr>
                            <th>
                                @item.TypeText
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td class="al-text">@item.AlertText</td></tr>
                        <tr><td class="info-bar" style="background-color:@item.InfoBar"></td></tr>
                        <tr><td class="last-reported">Last Reported</td></tr>
                        <tr><td class="al-time">@item.AlertTime</td></tr>
                    </tbody>
                </table>
            </td>
        }
    </tr>
</table>

Answer 1

在您的情况下，宽度未得到遵守的原因是您拥有nested tables。只需将您的html更改为简单的内容：

 <table class="project-data">
    <tbody>
    @foreach (var item in Model)
    {
                <tr>                       
                    <td> @item.TypeText <td>                           
                </tr>                   

                    <tr><td class="al-text">@item.AlertText</td></tr>
                    <tr><td class="info-bar" style="background-color:@item.InfoBar"></td></tr>
                    <tr><td class="last-reported">Last Reported</td></tr>
                    <tr><td class="al-time">@item.AlertTime</td></tr>


    }
  </tbody>
</table>

您可以参考此JSFiddle来查看简单结构表如何响应您尝试提供的宽度。

ASP.Net表格宽度未正确显示

1 个答案: