マージンを持つTD内のオーバーフロー・スパン

Question

私は表に問題/解決状況のリストを表示しています。あなたが見ることができるように

ここではサンプル行は

だ、解像度がmargin-left CSSを使用してインデントさと幅と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; 
     } 

Answer 1

をしようとしていますwidth〜100%の場合、子要素の幅を親要素それがインデントされていても問題ありません。

#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に置き換えることができます。

を使用すると、CSS機能 calcを使用することができ、これを修正するには。

私は、これは