How to make table not overflow using css

Your display issue is occurring because the LEA "booster" data set is being interpreted as one long word. Something like "common,common,common,..." is looked at by the browser as a single thing instead of multiple distinct words. CSS handles this in most modern browsers using the word-break property. Here is one possible solution where all that was changed is the CSS. Because word-break allows the words to be wrapped to multiple lines, your table doesn't get screwed up anymore. Additionally, a width had to be added to the rule because otherwise the left most column looks terrible.

tr, th, td { 
    border: 1px solid black;
    text-align: center;
    word-break: break-word;
    min-width: 200px;
}

However, the REAL issue you're having is that you're trying to make an array (the booster data set) display as a string. By default, it is joined together with just a comma when you try to force it to be a string. If you handle the case when your data is an array like so, you don't have to change the CSS at all... because you're allowing line breaks more easily since you no longer have one loooong word.

for(var i in set) if(i != "cards") {
    row = $("<tr>").appendTo(con);
    row.append($("<th>").text(i));
    if(typeof set[i] === 'string') {
        row.append($("<td>").text(set[i]));
        // note, you shouldn't assume everything in your data is ONLY a
        // string or an array... other cases should be handled.
    } else {
        // join arrays together with ", " instead of ","
        row.append($("<td>").text(set[i].join(", ")));
    }
}