HTML溢出問題 - 需要顯示整個內容

但是第一行的內容第一個和第三個單元溢出。我如何顯示整個內容而不增加表格列的寬度？

有人建議可以修復：

function sortTable(f,n){ 
 
    var rows = $('#mytable tbody tr').get(); 
 

 
    rows.sort(function(a, b) { 
 

 
     var A = getVal(a); 
 
     var B = getVal(b); 
 

 
     if(A < B) { 
 
      return -1*f; 
 
     } 
 
     if(A > B) { 
 
      return 1*f; 
 
     } 
 
     return 0; 
 
    }); 
 

 
    function getVal(elm){ 
 
     var v = $(elm).children('td').eq(n).text().toUpperCase(); 
 
     if($.isNumeric(v)){ 
 
      v = parseInt(v,10); 
 
     } 
 
     return v; 
 
    } 
 

 
    $.each(rows, function(index, row) { 
 
     $('#mytable').children('tbody').append(row); 
 
    }); 
 
} 
 
var f_errorStringOfCurrentDataSet = 1; 
 
var f_errorStringOfMatchedDataSet = 1; 
 
var f_testCaseNameOfCurrentDataSet = 1; 
 
var f_regexMatched = 1; 
 
$("#errorStringOfCurrentDataSet").click(function(){ 
 
    f_errorStringOfCurrentDataSet *= -1; 
 
    var n = $(this).prevAll().length; 
 
    sortTable(f_errorStringOfCurrentDataSet,n); 
 
}); 
 
$("#errorStringOfMatchedDataSet").click(function(){ 
 
    f_errorStringOfMatchedDataSet *= -1; 
 
    var n = $(this).prevAll().length; 
 
    sortTable(f_errorStringOfMatchedDataSet,n); 
 
}); 
 
$("#testCaseNameOfCurrentDataSet").click(function(){ 
 
    f_testCaseNameOfCurrentDataSet *= -1; 
 
    var n = $(this).prevAll().length; 
 
    sortTable(f_testCaseNameOfCurrentDataSet,n); 
 
}); 
 
$("#regexMatched").click(function(){ 
 
    f_regexMatched *= -1; 
 
    var n = $(this).prevAll().length; 
 
    sortTable(f_regexMatched,n); 
 
});

table { 
 
    padding: 0; 
 
    border-collapse: collapse; 
 
    border: 1px solid #ccc; 
 
    margin-top: 20px; 
 
    table-layout: fixed; 
 
    width: 90%; 
 
} 
 

 
td { 
 
    border: 1px solid #ccc; 
 
    padding: 5px; 
 
} 
 

 
tr:nth-child(even) { 
 
    background-color: #f2f2f2 
 
} 
 

 
th, td { 
 
    overflow: hidden; 
 
    padding: 5px; 
 
    text-align: left; 
 
}

<!DOCTYPE html> 
 
    <html> 
 
    <body> 
 
    <style> 
 
     
 
    </style> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
    <h2>Summary: </h2> 
 
    <br> 
 
    
 
    <br> 
 
    
 
    
 
    <table border="1" id="mytable"> 
 
     <thead> 
 
      <tr> 
 
      <th width="25%" id="testCaseNameOfCurrentDataSet">TESTCASENAME</th> 
 
    \t \t <th width="5%" id="regexMatched">RegexMatched (Yes/No)</th> 
 
    \t \t <th width="25%" id="errorStringOfCurrentDataSet">ERROR_STRING_CURRENT_DATASET</th> 
 
      <th width="25%" id="errorStringOfMatchedDataSet">ERROR_STRING_REF_DATASET</th>   
 
      <th width="5%">PICTU Detail</th> 
 
     </tr> 
 
     </thead> 
 
    
 
     <tbody> 
 
    
 
    \t \t <tr style="color: red"> 
 
       <td>moviee.movieemovieemoviee.movieemovieemoviee.movieemovieemoviee.moviee</td> 
 
       <td>NO</td> 
 
       <td>ABCDE:[bbb-aa-gg 999-99] (Excellent Check) Monkey String ABCDE:[moviee 990-505] moviee to commit 3 small moviee/moviee/moviee: in file /dogg/summariz/abc/mmmm/movieemoviee/moviee/movieemoviee/moviee/movieemoviee/Small/movieemoviee/movieemoviee.1_</td> 
 
       <td>ABCDE:[abc-vd-Common 17-69] moviee moviee: moviee moviee moviee moviee moviee moviee</td> 
 
       <td><a href=http://mnbvcz01:5601/app/banana#/template/abc-DELETEDD-PICTU?embed=true&reportType=abc&_a=(filters:!(),options:(darkTheme:!f),query:(query_string:(analyze_wildcard:!t,lowercase_DELETEDD_terms:!f,query:'_id:movieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemoviee.movieemovieemoviee%20OR%20_id:17.movieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemoviee.movieemovieemovieemovieemovieemovieemovieemoviee')),title:'abc%20DELETEDD%20PICTU',uiState:())&_g=(refreshInterval:(display:Off,pause:!f,value:0),time:(from:now-1y,mode:quick,to:now))>link</a></td> 
 
      </tr> 
 
    \t \t \t \t 
 
     </tbody> 
 
     </table> 
 
    
 
    <script> 
 
     
 
    </script> 
 
    </body> 
 
    </html>

這個

來源

2017-05-03 user3570620

你可以添加一個小提琴？ – Abhidev

奇怪的是，在小提琴中，寬度更多：https://jsfiddle.net/0dqejc96/ – user3570620

你的小提琴壞了。刪除你的風格標籤。 – Huelfe

一種解決方案是增加word-break: break-word;到td標籤。

這裏是你的代碼小提琴：fiddle link

來源

2017-05-03 11:11:27

可以使用Word斷CSS屬性來解決這個問題。這裏是代碼和我的更換你的表標記

<table border="1" id="mytable" style ="word-break: break-word;">

希望這是對你有用

來源

2017-05-03 11:17:19

HTML溢出問題 - 需要顯示整個內容

回答

相關問題