The table's width exceeds the appropriate size

Take a look at the code snippet below

<%-- 
    Document   : index
    Created on : Feb 7, 2014, 1:03:15 PM
--%>

<%@page import="java.util.Map"%>
<%@page import="java.util.Iterator"%>
<%@page import="analyzer.DataHolder"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <h1><center>Web Site Analizer</center></h1>
        <br/>
        <form action=http://localhost:8080/WebSiteAnalizer/SiteAnalizer method=post>
            Enter the Percentage (0-100): <input type="Text" name="percentage">
            <br/><br/><br/>

            Enter the Words (Separated from New Line (/n)): <br/>
            <textarea name='wordList' value='wordList'></textarea>            
            <br/><br/>

            <input type="submit" value="Submit">

        </form>

        <%@page import="java.util.List" %>
        <%@page import="java.util.ArrayList" %>
        <%@page import="java.util.HashMap" %>

        <%

            List<DataHolder> dataHolder = (ArrayList)request.getAttribute("list");
            HashMap hashMap = (HashMap)request.getAttribute("wordMap");

            if(hashMap==null)
                               {
                out.println("Hashmap null");
            }

            if(dataHolder!=null && dataHolder.size()>0)
            {
               out.println("</br>");
               out.println("<table border='1'><th>Primary Key</th><th>Original Hash</th><th>Matching Words</th><th>Non Matching words</th>");

                for(int i=0;i<dataHolder.size();i++)
                {
                    DataHolder d = dataHolder.get(i);

                    int primaryKey = d.getPrimaryKey();
                    String originalHash = d.getOriginalHash();
                    ArrayList matchingWords = d.getMatchingWords();
                    ArrayList unMatchingWords = d.getUnmatchingWords();

                    StringBuffer matchingWordsStr = new StringBuffer("");
                    StringBuffer unMatchingWordsStr = new StringBuffer("");

                    //Populating Strings
                    for(int m=0;m<matchingWords.size();m++)
                    {

                        Iterator iter = hashMap.entrySet().iterator();

                        while(iter.hasNext())
                        {
                            Map.Entry mEntry = (Map.Entry)iter.next();

                            if(mEntry.getValue().equals(matchingWords.get(m)))
                            {
                                //out.println(matchingWords.get(m)+" : "+true);
                                matchingWordsStr.append(mEntry.getKey());
                                matchingWordsStr.append(",");
                            }
                        }

                    }

                    for(int u=0;u<unMatchingWords.size();u++)
                    {
                        Iterator iter = hashMap.entrySet().iterator();

                        while(iter.hasNext())
                        {
                            Map.Entry mEntry = (Map.Entry)iter.next();

                            if(mEntry.getValue().equals(unMatchingWords.get(u)))
                            {
                                //out.println(matchingWords.get(m)+" : "+true);
                                unMatchingWordsStr.append(mEntry.getKey());
                                unMatchingWordsStr.append(",");
                            }
                        }
                    }


                    out.println("<tr>");

                    out.println("<td>");
                    out.println(String.valueOf(primaryKey));
                    out.println("</td>");

                    out.println("<td>");
                    out.println(originalHash);
                    out.println("</td>");

                    out.println("<td>");
                    out.println(matchingWordsStr);
                    out.println("</td>");

                    out.println("<td>");
                    out.println(unMatchingWordsStr);
                    out.println("</td>");

                    out.println("</tr>");



                }
               out.println("</table>");
            }

        %>
    </body>
</html>

The generated table in this code is too wide to fit on the screen due to lengthy String values. For instance, when "Original Hash" consists of 10,000 characters, it displays in one continuous line. Is there a way to ensure the length fits within the screen width?

Note that I am primarily a developer and not proficient in design or scripting languages.

Answer №1

To prevent long words from extending beyond their containers, apply the following CSS styling:

td{
   word-wrap:break-word;
}

Answer №2

To ensure consistent table column width regardless of text length, consider setting the table-layout to fixed as discussed in this Stack Overflow post. It's also recommended for performance reasons to consolidate individual println statements into a single println that outputs a string containing all your HTML code.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Demonstrate a array of values at varying angles within a circle using the functionalities of HTML5 canvas

Looking to utilize HTML5 Canvas and Javascript for a project where I need to showcase various values (depicted by dots possibly) at different angles within a circle. For example, data could include: val 34% @ 0°, val 54% @ 12°, val 23% @ 70°, a ...

The "date" field seems to be malfunctioning on iOS devices exclusively

I'm having issues with a simple HTML CSS form that includes an input type="date" field which is not working on iOS devices. <fieldset class="form-group border p-3"> <div class="row mx-auto"> <legend class=" ...

Guide on generating a video thumbnail using JavaScript Application

Searching for a way to easily create a thumbnail from a video for uploading alongside the video itself to a server? I've been looking for JavaScript libraries to simplify the process without much luck. The scenario involves the user selecting a video ...

How do I print a QTableWidget using QT5 and resize the table to fit perfectly on one side of an A4 sheet?

My QT5 application is designed to generate a monthly rota/timesheet in csv format, which can be easily read and printed using Excel or LibreOffice. However, I want to enhance the functionality by printing the table directly from Qt to the printer. I have ...

Error Message: NoClassDefFoundError in Google Play Services/Maps

I tried to follow this Google Maps tutorial shared in this link, but encountered a runtime error resulting in the crashing of the application. I have attempted to find a solution by looking at other related questions, but so far, I have not been successful ...

It seems that using the SVG <mask> tag is necessary for Firefox to display correctly, but it causes issues with CSS mask in

I need assistance with masking content using an external SVG image. Currently, I'm using the following code: #homepage-banner .desktop-slider.masked { -webkit-mask:url(news-panel-mask.svg) left top no-repeat; /* Chrome/Safari (Webkit) */ mask: ur ...

How can I troubleshoot the issue of my Thymeleaf HTML file not displaying a list of objects in my Spring application?

Struggling with displaying a list of People in the view by passing it as a modelAttribute Snippet of code related to the issue: @Controller @RequestMapping("/people") public class PeopleController { private final PersonDAO personDAO; @Autowired pub ...

Creating vibrant squares using HTML and CSS

My objective is to incorporate 3 input options for selecting the color, size, and amount of cubes. The image below showcases my peer's final project, but unfortunately, he refused to share the code with me. We were given a basic template to begin with ...

Transforming ASCII character representations in UTF-8 encoding to unique special characters

After scouring the web, I have come across numerous questions similar to mine, but none of them quite fit my specific issue. The problem arises when using a third-party JSON web API, as the JSON response sometimes contains special characters that are inco ...

Failure to link style sheet to document

Experiencing some difficulties with a seemingly simple task that I can't figure out. When I check my code in the browser, none of my styles are being applied to the HTML elements. The style sheet is located in the same folder as the main document, and ...

Using a personalized font in your RShiny application

I'm interested in integrating a unique custom font into my Rshiny App. I have a feeling that the necessary code should be placed within tags$style, but I am unsure of the exact syntax needed for this integration. Below is an example code snippet: ui ...

Changing pages in Django with a single click of a line: A step-by-step guide

As a beginner in Django, I am looking to create views that change when a line in an HTML tag is clicked. The idea is to open a new view named after the hash inside the <code>Hash tag. {% load staticfiles %} <!DOCTYPE html> <html lang="fr"&g ...

The CSS style tag does not function in Safari

I am trying to dynamically load background images using CSS based on the display resolution using the @media keyword. This method works perfectly in Firefox and Chrome, but unfortunately, it does not seem to work in Safari. Is there something I might be ...

Unable to transfer a file between two directories in the Linux file system using Java programming

I have encountered an issue while trying to move files from one location to another within the Linux file system. The source directory is on one file system, and the destination directory is mounted onto the same file system. I attempted to use the File.re ...

Angular: How to Disable Checkbox

Within my table, there is a column that consists solely of checkboxes as values. Using a for loop, I have populated all values into the table. What I have accomplished so far is that when a checkbox is enabled, a message saying "hey" appears. However, if m ...

In Javascript, the DOM contains multiple <li> elements, each of which is associated with a form. These forms need to be submitted using AJAX for efficient

I have a list element (ul) that includes multiple list items (li), and each list item contains a form with an input type of file. How can I submit each form on the change event of the file selection? Below is the HTML code snippet: <ul> ...

The process of integrating a generic LinkedList into a Stack or Queue class using Java

In my current project, I am tasked with implementing a LinkedList data structure in stack and queue classes. All the classes, including my LinkedList, are of generic type <E>. However, I have been encountering numerous overflow and null pointer excep ...

Utilizing jQuery to Perform Calculations with Objects

Can someone help me with a calculation issue? I need to calculate the number of adults based on a set price. The problem I'm facing is that when I change the selection in one of the dropdown menus, the calculation doesn't update and continues to ...

Div overlaps div on certain screen dimensions

When the screen size falls within a specific range, typically in the low 1000s, there is an issue where my content div overlaps completely with the navigation div. It appears as if both divs are positioned at the top of the page. Below is the HTML code sn ...

Activate the function for items that are overlapping

Here is a scenario I am working on: HTML <body> <div> <p>Text</p> </div> <body> JQuery $('div').click(function(){ $(this).find('p').fadeToggle('fast'); }); $('bo ...