html - 如何让表格中的每一行都占据所有单元格的空间？

Question

我的数据库中有一个包含日志信息的表格，当您单击一个按钮时，您会获得有关该特定日志项的额外信息。当您单击“信息”按钮(见下图)时，它将显示此信息。

问题是加载的信息只会占用“消息”栏的宽度，而不是整个表格的宽度。

TL;DR:如何让我的行占据所有单元格的空间？

_LogPartialLayout.cshtml

<div class="table" id="logtable">
    <div class="row">
        <div class="cell" id="tableth">
            message
        </div>
        <div class="cell" id="tableth">
            timestamp
        </div>
        <div class="cell" id="tableth">
            level
        </div>
        <div class="cell" id="tableth">
            customerName
        </div>
        <div class="cell" id="tableth">

        </div>
    </div>

    @foreach (var item in Model.Logs)
    {
        <div class="row">
            <div class="cell" id="tabletd">
                @Html.DisplayFor(modelItem => item.message)
            </div>
            <div class="cell" id="tabletd">
                @Html.DisplayFor(modelItem => item.timeStamp)
            </div>
            <div class="cell" id="tabletd">
                @Html.DisplayFor(modelItem => item.level)
            </div>
            <div class="cell" id="tabletd">
                @Html.DisplayFor(modelItem => item.Name)
            </div>
            <div class="cell" id="tabletd">
                <input type="button" id="extra-info-button" name="answer" value="Info" onclick="showDiv(@item.id.ToString())" />
            </div>
        </div>
        <div class="row">
                <div id="@item.id.ToString()" style="display:none;" class="answer_list">
                    <strong>Uri:</strong><br /> @item.Uri <br /><br />
                    <strong>Method:</strong><br /> @item.Method <br /><br />
                    <strong>HttpStatus:</strong><br /> @item.HttpStatus <br /><br />
                    <strong>RequestHeaders:</strong><br /> @item.RequestHeaders <br /><br />
                    <strong>RequestContent:</strong><br /> @item.RequestContent <br /><br />
                    <strong>ResponseHeaders:</strong><br /> @item.ResponseHeaders <br /><br />
                    <strong>ResponseContent:</strong><br /> @item.ResponseContent <br /><br />
                </div>
        </div>
    }
</div>

样式表.css

.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }

.answer_list{
    font-family: monospace;
    text-align:left;
    /*word-wrap: break-word;*/
    /* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
    -ms-word-break: break-all;
    word-break: break-all;

     /* Non standard for webkit */
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    border-left: solid 1px black; 
}

Answer 1

使用 colspan要跨越多列的表格单元格的属性。

编辑:我看到你没有使用 <table>但实际上滥用 <div>元素作为一种表格。

拜托，请更改您的 HTML 以使用 <table>因为它用于数据表，这是:

<table id="logtable">
    <thead>
        <tr>
            <th>message</th>
            <th>timestamp</th>
            <th>level</th>
            <th>customerName</th>
            <th></th>
         </tr>
     </thead>
     <tbody>
 @foreach (var item in Model.Logs)
 {
        <tr>
            <td>@Html.DisplayFor(modelItem => item.message)</td>
            <td>@Html.DisplayFor(modelItem => item.timeStamp)</td>
            <td>@Html.DisplayFor(modelItem => item.level)</td>
            <td>@Html.DisplayFor(modelItem => item.Name)</td>
            <td><input type="button" id="extra-info-button" name="answer" value="Info" onclick="showDiv(@item.id.ToString())" /></td>
        </tr>
        <tr>
            <td id="@item.id.ToString()" style="display:none;" class="answer_list" colspan="5">
                    <strong>Uri:</strong><br /> @item.Uri <br /><br />
                    <strong>Method:</strong><br /> @item.Method <br /><br />
                    <strong>HttpStatus:</strong><br /> @item.HttpStatus <br /><br />
                    <strong>RequestHeaders:</strong><br /> @item.RequestHeaders <br /><br />
                    <strong>RequestContent:</strong><br /> @item.RequestContent <br /><br />
                    <strong>ResponseHeaders:</strong><br /> @item.ResponseHeaders <br /><br />
                    <strong>ResponseContent:</strong><br /> @item.ResponseContent <br /><br />
                </td>
        </tr>
    }
    </tbody>
</table>