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

Question

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

我正在尝试让一张 table 占用 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 */

局部 View :

<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

在您的情况下不考虑宽度的原因是您有嵌套表格。只需将您的 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查看一个简单的结构表将如何响应您尝试提供的宽度。