Adjusting a column within a CSS table

middle += "<tr class='tRow'>"
               + "<td>"
                  + "<a href='" + output.get(i).get("itemURL") + "'>"
                  + gallery 
                  + "</a>"
               + "</td>"
               + "<td class='title'>"
                  + "<a href='" + output.get(i).get("itemURL") + "'>"
                  + ""+ (output.get(i).get("title")).replaceAll("\"","\'\'")+"" // replaces quatations into '

                  + "</a>"
               + "</td>"
               +

The title column, marked with the class name 'title', should have its width decreased by applying a style sheet rule. It's important that only this specific column is affected, not others in the table. The CSS code to achieve this is:

td.title{
          width:18%;
         }

However, when applying this CSS rule, all columns are being impacted rather than just the targeted one. Some columns may already have different widths not specified by the CSS. I attempted using inline styles as well but encountered the same issue. What could be causing this problem? Thanks for your help.

Additional details: private String getBeginning(int tableNumber) {

      return "<html><head><title>"+ (tableNumber - 1)+"</title>"

          + "</head><body>"
          + "<table id='example' class='tablesorter' cellpadding='3' >" // border='1' cellpadding='1' cellspacing='2'
          + "<thead>"
                 + "<tr class='tHead'>"
                       + "<th/>"
                       + "<th>Title</th>"
                       + "<th>Total Price</th>"
                       + "<th>Currency</th>"
                       + "<th>Condition</th>"
                       + "<th>Location</th>"
                       + "<th>End Time</th>"
                       + "<th>Map</th>"
                + "</tr>"
          + "</thead>"
          + "<tbody>";
}


       middle += "<tr class='tRow'>"
               + "<td>"
                  + "<a href='" + output.get(i).get("itemURL") + "'>"
                  + gallery 
                  + "</a>"
               + "</td>"
               + "<td class='title'>"
                  + "<a href='" + output.get(i).get("itemURL") + "'>"
                  + ""+ (output.get(i).get("title")).replaceAll("\"","\'\'")+"" // replaces quatations into '

                  + "</a>"
               + "</td>"
               + "<td>"
                  + ""+output.get(i).get("total") +""
               + "</td>"
               + "<td>"
                  + ""+output.get(i).get("currency")+""
               + "</td>"
               + "<td>"
                  + ""+condition+""
               + "</td>"
               + "<td>"
                  + ""+output.get(i).get("location")+""
               + "</td>"
               + "<td>"
                  + ""+output.get(i).get("endTime").split("T")[0]+""
               + "</td>"
               + "<td>"
               + "<a href='" + getMap(location, postCode, "0") + "'>"
               + "<img src='" + getMap(location, postCode, "1") + "'> "
               +"</a>"
               + "</td>"
               + "</tr>";

String end ="";

I am currently testing this web app on Firefox 3.6.11 and have not tried it on other browsers yet.

Answer №1

One thing to remember is that when using percentage values for table widths, they are based on the available space within the table itself, not the entire page or containing div. Consider using an absolute value like 200 instead. Also, if you have already set a specific width for the table, adding another width value can complicate things and affect how the table is displayed.

It's important to consider the overall context of your code and whether there are existing width settings on the table. Setting a width for one column in a table with a fixed width may cause other columns to adjust their widths to accommodate, leading to unexpected results. In these cases, it may be best to allow the browser to determine the column sizes dynamically or set each column width precisely for desired appearance.

To learn more about this topic, refer to the HTML specification.

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

Retrieve the most recent ID from the initial table and transfer it to a different table using Java code

I am attempting to add the most recent id from my chapter table into the lesson table. This is the code I have written: String Sql = "INSERT INTO lesson" +"(title, chapter_id, source)" +"VALUES(?,?,?)"; String getId = "SELECT MAX( ...

Is it possible to dynamically change a form's input value using a JavaScript keyup function based on input from other form elements?

My form utilizes the keyup function to calculate the total value of 3 input fields by multiplying them and displaying the result. Below is a fiddle showcasing this functionality: $(document).ready(function () { $(".txtMult1 input").keyup(multInp ...

Is there a confusion in binding static class variables to non-static instance variables? Does it only work when a new object is created

Imagine I have this code in front of me: public class Logic { public static void main(String[] args) { new Logic().process(); } void process(){ A.x = A.y; //will not compile A.x = new A().y; A.y = A.x; // also won ...

Animating CSS transformations with rotation

Explore the World of HTML and CSS <div id="section1"> <div id="box1">WELCOME</div> </div> <div id="section2"> <div id="box2">WELCOME</div> </div> CSS Styles for Transformation #section1 { position: r ...

How to align a tooltip in the center horizontally below its parent element without specifying a fixed width

Is it possible to center a tooltip horizontally under its parent without setting a static width on the tooltip? I am facing this issue because the length of the text in the tooltip varies. Below is the code snippet for reference. Even though adjusting the ...

Pressing the tab key always skips one input field in Angular 11

My issue seems to be quite trivial - when I press the TAB key, it always skips one input element (even though I am not using the "tabindex" property). The browser focus moves from 'A' to 'C', then from 'C' to 'E' and ...

Dynamic button on dialog box could not be found

When I click on the search button, I am having trouble locating a dynamic button element. The Create Account CID is sometimes clickable and sometimes not. <div class="pzbtn-rgt" data-click="..."> <div class="pzbtn-mid" data-click="...."> < ...

Extracting specific rows from a table with Selenium using Java in unique scenarios

In our table, the first row in the tbody acts as the header instead of being located in a thead. To retrieve these headers, I am using the following code snippet. @FindBy(xpath = "//table/tbody/tr[1]/th") private List<WebElement> headerRo ...

Internet Explorer 11 has a problem with excessive shrinking of flex items

I have a flexbox setup with a left and right section, each of equal width. The left side displays an image and the right side contains text. While this layout works fine in Google Chrome, it does not wrap properly in Internet Explorer 11 when the width is ...

Reduce the gap between the content and footer

I'm currently designing a homepage for a press release. I'm facing an issue with a large gap between my content and the footer, which I'd like to reduce. I've tried adjusting the margin-top: 0px in CSS with no success. Various attempts ...

Styling the footer to sit at the bottom of the page with a wider width, overlapping the content

I've encountered an issue where the footer of my webpage overlaps the content when the main content is long and users cannot scroll properly. Additionally, I've noticed that the width of the footer is larger than the header of the website. Below ...

What is the best way to adjust the opacity of a Bootstrap 4 card while keeping the form and buttons contained within unaffected?

Trying to implement the Bootstrap 4 login form available at: Currently troubleshooting two issues with this form: Attempting to adjust the opacity of .card-signin without affecting the elements inside it. How can I change only the card's opacity? S ...

Do not assign value 0xxxxxx to the input text field - Jquery

My question is related to the following input: <input type="text"/> I am setting the value for this input as shown below: $('#input-text').val(012345); However, when I view the input it displays "12345" instead of "012345". What happene ...

How can I make the columns in my table stand out with different background colors?

I'm currently working on implementing alternating background colors for columns in a table. I have successfully applied CSS to a simple table, but I am facing issues when dealing with more complex tables that involve rowspan and colspan. Can anyone of ...

A unique CSS transition effect applied after toggling a class

Greetings everyone I recently created this code pen https://codepen.io/alexyap/full/MmYvLw/. I am facing a challenge with my navigation menu. The transition in works perfectly, but the fade-out effect looks terrible. I'm struggling to figure out this ...

Having a solid grasp of React and Material UI, as well as familiarity with the concept of props and

For my react application, I utilize Material UI (@mui/material). However, I've come to realize that there might be some nuances in how the components interact with each other. For instance, if I nest a MenuItem inside a Box or a Link inside a Typograp ...

Tips for styling a datatable scrollbar with CSS

My preference is to utilize the datatable API when creating tables. $('#datatable-example').dataTable({ "scrollX": true, "info" : false, "fnDrawCallback" : function(oSettings) { $('td').removeClass('sor ...

Creating a table that adapts to different screen sizes using

I'd like to set up a layout where an input element is next to a button, occupying the entire width of the container. Perhaps using a table would be the way to go. In my HTML and CSS setup, I have the following: .css-table { display: table; } ...

Having trouble pushing information into the database using an Observable

I am encountering an issue with an Observable where I anticipate some database insertions to occur upon subscription. However, despite subscribing to the Observable, no DB inserts are made and there are no errors reported. Interestingly, when I directly s ...

How can I prevent Bootstrap from conflicting with my custom styles?

My HTML menu was functioning perfectly with specific CSS styles, until I decided to add a Bootstrap reference in the header: New Link Added <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> Afte ...