Question

我有一个表格，其中包含数据库中日志的信息，当您单击按钮时，您将获得有关该特定日志项目的额外信息。当您点击＆＃34;信息＆＃34;按钮（见下图）它将显示此信息。

问题是加载的信息只会占用＆＃34;消息的宽度。列而不是表的整个宽度。

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>元素作为一种表格。< / p>

请更改您的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>

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

1 个答案: