HTML Overflow issue - Need to display entire content

Question

i want the entire content of the cell displayed in the cell.

But the content first and the third cell in the first row are overflowing. How do i display the entire content without increasing the width of the table columns?

Can someone suggest a fix:

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>

wierd thing is, in fiddle, width is more: jsfiddle.net/0dqejc96 — user3570620
– user3570620, Commented May 3, 2017 at 11:13

Teuta Koraqi · Accepted Answer · 2017-05-03 11:11:27Z

2

One solution for this is to add word-break: break-word; to td tags.

Here is a fiddle with your code: fiddle link

answered May 3, 2017 at 11:11

Teuta Koraqi

1,8981 gold badge12 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anuj Tiwary · Accepted Answer · 2017-05-03 11:17:19Z

1

You can use word-break css property to solve this problem. here is the code replace your table tag with mine

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

Hope this was useful to you

answered May 3, 2017 at 11:17

Anuj Tiwary

3381 silver badge10 bronze badges

Collectives™ on Stack Overflow

HTML Overflow issue - Need to display entire content

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related