HTML CSS的行爲與它在jsfiddle中的行爲不同

我在這裏有以下jsfiddle演示：https://jsfiddle.net/gatorreina/0rcev6ux/5/，我喜歡它的行爲，因爲它截斷了列中第一個表的溢出。HTML CSS的行爲與它在jsfiddle中的行爲不同

但是，當我將完全相同的代碼複製並粘貼到我的dancer2模板中時，我得到以下結果。

<!DOCTYPE html> 
<head> 

<script src="/javascripts/jquery-1.11.3.min.js"></script> 

<script src="/javascripts/bootstrap.min.js"></script> 

<script src="/javascripts/jquery.js"></script> 

    <!-- Latest compiled and minified CSS --> 
<link href="/css/bootstrap.min.css" rel="stylesheet"> 

<link rel="stylesheet" href="/css/bootstrap-theme.min.css"> 

<!-- Latest compiled and minified JavaScript 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
--> 

<!-- for controlling style of numberic sponsor amount field --> 
<style> 
body{ margin:1em; } 
body *{ font-family:sans-serif } 

input[type=number]{ 
    font-size:1em; 
    width:8.5em; 
    padding:3px; 
    margin:0; 
    border:1px solid #000000; 
    border-radius:5px; 
    text-align:center; 
} 

input[type=checkbox]{ 
    font-size:1em; 
    width:1.5em; 
    padding:6px; 
    margin:0; 
    border:1px solid #000000; 
    border-radius:10px; 
    text-align:center; 
} 



</style> 

<!-- table { width: 100%; table-layout:fixed; } 
table td { overflow: hidden; } --> 

<script> 
function validateForm() { 
    var i; 
    i=true; 
    $('.list-group-item').each(function() { 
     if((!$(this).find('input[type=checkbox]').is(':checked'))&&($(this).find('input[type=number]').val()!="")&&($(this).find('input[type=number]').length)) { 
      i=false; 
     } 
    }); 
    if (!i) 
    { 
     alert("You must check the box if you want to sponsor this challenge!"); 
    } 
    return i; 
}; 
</script> 


</head> 

<body> 
<div class="container" style="margin-top:20px;"> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <form role="form" action="../../openchallenges" method="POST" onsubmit="return validateForm()"> 
     <h4 class="text-center">Heading</h4> 
     <div class="well" style="max-height: 300px;overflow: auto;"> 
      <ul class="list-group fancy-list-items"> 
      <table style="width: 100%; table-layout: fixed;"> 

       <tr class="list-group-item"> 
       <td style="width:45px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">I want this column to truncate</td> 
       <td style="overflow: hidden; text-overflow: ellipsis">This one is fine</td> 
       </tr> 

      </table> 
      </ul> 
     </div> 
     </form> 
    </div> 
    </div> 
</div> 




</body> 
</html>

標題

I want this column to truncate This one is fine

任何想法可能是什麼問題呢？我正在使用Firefox。

來源

2016-01-23 gatorreina

這有點含糊。你可以檢查你的瀏覽器的開發工具，定位'td'，並確保一些樣式不會干擾？ – 2016-01-23 22:12:51

什麼瀏覽器？它在MS Edge – Bindrid

Firefox中對我有用。不知道如何在開發人員工具中定位td。但它是在jsfiddle完全相同的CSS和HTML，所以我不清楚如何可能會失去樣式。 – gatorreina

當我試着評論<link rel="stylesheet" href="/css/bootstrap.min.css">它的工作原理 - 列將被截斷。不過，我需要bootstrap.min.css所以我註釋掉它，並試圖：

.PLRSNAME-col { 
    /*width: 100%; 
    min-width: 1px;*/ 
    max-width: 50px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 



<td class="PLRSNAME-col">I want this column to truncate</td>

而且它現在的作品 - 列截斷。

來源

2016-01-24 02:02:28 gatorreina

HTML CSS的行爲與它在jsfiddle中的行爲不同

回答

相關問題