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

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>

stylesheet.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>