My database log table contains information, and clicking a button reveals additional details about a specific log item. However, when the "info" button is clicked (refer to the image below), the displayed information only occupies the width of the "message" column rather than the entire table.
The issue here is that the loaded content does not expand to cover all the cells in the row.
To summarize: How can I make my row span across all the cells' widths?
https://i.sstatic.net/yEnB4.png
_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;
-ms-word-break: break-all; /* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
word-break: break-all;
word-break: break-word; /* Non standard for webkit */
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
border-left: solid 1px black;
}