CODEWITHSUNDEEP
javascripthtmlcss
Xavier Horn
Xavier Horn

Reputation: 123

How to make table not overflow using css

I have this fiddle. It is used to learn information about a certain Magic: The Gathering card or set that you would like to learn about. If you were to type in LEA to the input then hit the Find Set button, it returns the info about the Limited Edition Alpha set. The only problem is that this doesn't keep the table within the window; the table spills over. If you type in Sen Triplets and hit Find Card, it returns the card info for Sen Triplets. This table stays within the window, how do I make the set one do this as well?

Upvotes: 0

Views: 65

Answers (1)

Jonathan Walters
Jonathan Walters

Reputation: 414

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(", ")));
    }
}

Upvotes: 1

Related Questions