HTML 溢出问题 - 需要显示全部内容

Question

我想在单元格中显示单元格的全部内容。

但是第一行的第一个和第三个单元格的内容溢出了。如何在不增加 table 列宽度的情况下显示全部内容？

有人可以提出修复建议吗：

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>
      <th width="5%" id="regexMatched">RegexMatched (Yes/No)</th>
      <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>
    
      <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>
        
        </tbody>
       </table>
    
    <script>
        
    </script>
    </body>
    </html>

Answer 1

一个解决方案是将 word-break: break-word; 添加到 td 标签。

这是一个 fiddle 代码：fiddle link

Answer 2

可以使用分词css 属性来解决这个问题。这是用我的

替换你的 table 标签的代码

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

希望这对你有用

HTML 溢出问题 - 需要显示全部内容

HTML Overflow issue - Need to display entire content

html

javascript

jquery

overflow