我有一個表格顯示問題/分辨率狀態列表。帶邊距的TD內溢流
下面是一個示例行
正如你所看到的,分辨率是使用CSS margin-left
與寬度設定爲100%,但它是大地流到下一個單元格縮進。
我試過display: inline/inline-block/inline-table
以及float: left
和overflow-x: hidden
的所有變化,但我無法獲得留在TD中的「銀條」。
ETA:我不是太巧用CSS :(但我想:)
標記
<div id="Log">
<table style="width: 100%">
<tr>
/* other cells removed */
<td>
@Html.DisplayFor(model => item.LogEntry.Status)
@if (!string.IsNullOrWhiteSpace(item.LogEntry.ResetMessage))
{
<br />
<span class="reset">
@Html.DisplayFor(model => item.LogEntry.ResetMessage)
</span>
}
</td>
/* other cells removed */
</tr>
</table>
</div>
CSS
#Log {
}
#Log > table {
color: white;
margin-top: 5px;
margin-bottom: 5px;
}
#Log > table tr th {
background-color: darkblue;
}
#Log > table tr td {
background-color: midnightblue;
}
#Log > table tr th,
#Log > table tr td {
border: thin solid white;
vertical-align: top;
color: white;
padding: 5px;
}
#Log > table tr td .reset {
background-color: Silver;
padding-left: 10px;
margin-left: 20px;
width: 100%;
display: inline-block;
}
你可以請張貼jsfiddle/live鏈接來檢查問題的行動,那麼它會很容易幫助。 –
errrm ...我會嘗試,但從來沒有這樣做。 –
然後你可以請提供實時鏈接看到小提琴你將需要相關的HTML和CSS也。 –