2016-06-23 80 views
1

我有一個表格顯示問題/分辨率狀態列表。帶邊距的TD內溢流

下面是一個示例行

enter image description here 正如你所看到的,分辨率是使用CSS margin-left與寬度設定爲100%,但它是大地流到下一個單元格縮進。

我試過display: inline/inline-block/inline-table以及float: leftoverflow-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; 
     } 
+0

你可以請張貼jsfiddle/live鏈接來檢查問題的行動,那麼它會很容易幫助。 –

+0

errrm ...我會嘗試,但從來沒有這樣做。 –

+0

然後你可以請提供實時鏈接看到小提琴你將需要相關的HTML和CSS也。 –

回答

4

因爲您已設置的width100%,它會將子元素的寬度設置爲父元素。不管它是否有縮進。

爲了解決這個問題,你可以使用CSS功能calc

#Log > table tr td .reset { 
    background-color: Silver; 
    padding-left: 10px; 
    margin-left: 20px; 
    width: calc(100% - 20px); // using the calc function to set width 
           // to 100% negative the 20px added on by 
           // the margin-left indentation 
    display: inline-block; 
} 

你當然也可以替代20px與任何你需要的。

我希望這有助於:-)

+1

嗯......我從來不知道那個......謝謝你......作品:) –

+1

@ChrisHammond沒問題!樂於幫助 :-) –