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

"Stuck: CSS Div Transition Effect Refuses to Cooper

I am looking to incorporate a transition on my div when it is clicked. I've tried using jQuery with this example: http://jsfiddle.net/nKtC6/698/, but it seems to not be working as expected. So, I want to explore another example using CSS: http://jsfid ...

Why is Chrome not enforcing the maximum attribute for input type number in HTML5?

I'm encountering an issue with the following code snippet: <input type="number" max="99" /> While using Google Chrome (and possibly other webkit browsers), it appears that the spinner's up arrow is restricted from going over 99. However, ...

Data structures of advanced complexity within HTML data attributes

I am delighted by the existence of the html5 data attribute. It's great to be able to input a plain string into html attributes and retrieve them using jquery. However, wouldn't it be wonderful to have more than just a basic string? Is there a ...

Acquire the model from a field within an Angular Formly wrapper

I'm in the process of designing a wrapper that will exhibit the model value as regular text on the page. Once the mouse hovers over this text, it transforms into a Formly field, which works perfectly fine. However, I'm encountering an issue where ...

A guide to setting up ChromeDriver or Gekodriver on Ubuntu MATE for Raspberry Pi 2 and 3

Currently, I'm in the process of setting up a Java-Selenium project on a Raspberry Pi connected to a television. Finding compatible chromium or geko drivers for the Raspberry Pi architecture has proven to be quite challenging. ...

Utilize the hexadecimal color code as a string within the darken function

When working with a less style, I have a string variable. @colorString: 'DADADA'; I can convert it into a color: @color: ~'#@{colorString}'; Then, I am able to use @color to define a value in a style: div { color: @color } However ...

The never-ending loading problem at the bottom of the Firefox screen seems

I am facing an issue while trying to open something in Firefox using window.open(). The loading screen seems to never stop, and I cannot pinpoint the reason behind it. Any advice on how to resolve this would be greatly appreciated. View Screenshot: This ...

How come my label and input are showing up in my navigation bar?

For my assignment, I am designing a website layout and facing an issue where the text appears behind the navigation bar instead of below it. I have tried adjusting the margin-bottom to 50px with important tags and setting the nav bar as static. Despite tr ...

What strategies work well for guiding individuals to different destinations based on their user roles, such as administrators and regular users?

In my CMS environment, I am facing a challenge with redirecting users who are not administrators or do not own the document they're trying to edit. The following code snippet is what I have implemented, but it seems that my administrators cannot acces ...

Concealing a block from top to bottom

I currently have a filter that is hidden when clicked, with a transition effect that moves it from the bottom to the top. I have recorded my screen to demonstrate this behavior: . However, I now need the filter to hide from top to bottom instead, essenti ...

What is the best way to show input choices once an option has been chosen from the 'select class' dropdown menu?

When it comes to displaying different options based on user selection, the following HTML code is what I've been using: <select class="form-control input-lg" style="text-align:center"> <option value="type">-- Select a Type --</opti ...

Different custom background images for every individual page in Nuxt

Looking for a unique background-image for each page in my app is proving to be challenging. Currently, I have defined the background-image in style/app.scss. @import 'variables'; @import 'page_transition'; @import url('https://f ...

Changing my PHP contact form from method GET to POST is causing it to malfunction

Feel free to check out my contact form on benlevywebdesign.com, located at the bottom of the page. <form id="form1" action="<?php echo $_SERVER['PHP_SELF']; ?>" enctype="text/plain" method="get"> <fieldset> ...

The art of sketching precise lines encircling a circular shape through the

What is the best way to use a for loop in JavaScript to draw lines around a circle, similar to those on a clock face? ...

Retrieve the URL redirected by JavaScript without altering the current page using Selenium

Is there a way to extract the URL I am supposed to be redirected to upon clicking a button on a website, without actually being redirected? The button triggers a complex Javascript function and is not a simple hyperlink. click() method doesn't meet my ...

arrangement of form labels in material-ui

Is there a way to configure the labels in Material-ui + react forms to be displayed beside input fields for better readability? For example: name [input] title [input] instead of name [input] title [input] I have looked through the documentation b ...

Is it possible to inject JavaScript into the DOM after it has been loaded using an AJAX call?

I have a specific div element identified by the id #id1 that contains clickable links. Upon clicking on these links, an AJAX call is made to retrieve additional links from the server. My current approach involves replacing the existing links within #id1 w ...

Some elements are not responding to margin-top properly

I am facing a problem where 2 elements are not responding to the specified margins of margin: 260px 0 0 0; or margin-top: 260px;. Despite inspecting the elements in IE's dev tools and confirming that the margin is set, the elements appear at the top o ...

Prevent the collapse functionality in a Material-UI Stepper component

Currently in the development phase of a React website using Material-UI, with a focus on incorporating the Stepper component. Is there a method available to prevent the collapse and expansion of each individual StepContent in a vertical Stepper? The goal ...

Position a div container to be aligned at the bottom of an image

I'm having trouble aligning a div container at the bottom of an image. I attempted to modify the position attribute of the image and set its value to "relative." It's a bit challenging to explain, but here are snippets of HTML and CSS code with ...