Ways to Customize <td> Elements Within a <table> Container

Currently, I am utilizing jsp along with css to style the <td> within the <table> tag. My desired code format is shown below:

https://i.sstatic.net/WJjA8.png

However, what I am currently receiving is:

https://i.sstatic.net/bLyvd.png

#bengalistorycontainer{
width:100%;

}
table.my-special-table {
  width: 10px;
height: 10px; 

border: 1px rgb(89,89,89) solid;

}
 
  <table class="my-special-table">
<tr>
            <c:forEach begin="1" end="${classfile}" var="i"varStatus="loop">
                <c:choose>
                    <c:when test="${classfile eq i}">
                        <td>${1}   </div></td>
                    </c:when>
                    <c:otherwise>
                        <td><a href="#">${2}</a></td>
                    </c:otherwise>
                </c:choose>
            </c:forEach>
        
   <c:if test="${totalpagenumber != 1}">
     <td>  <a href="#">next</a> </td>
    </c:if>
     

jsfiddle

Can you please point out what I might be doing incorrectly?

Answer №1

Make sure to update your code with the changes below:

#bengalistorycontainer{
  width:100%;
}
table.my-special-table td{
  width: 10px;
  height: 10px; 
  border: 1px rgb(89,89,89) solid;
}
<table class="my-special-table">
   <tr>
       <c:forEach begin="1" end="${classfile}" var="i"varStatus="loop">
                <c:choose>
                    <c:when test="${classfile eq i}">
                        <td>${1}   </div></td>
                    </c:when>
                    <c:otherwise>
                        <td><a href="#">${2}</a></td>
                    </c:otherwise>
                </c:choose>
            </c:forEach>
        
   <c:if test="${totalpagenumber != 1}">
     <td>  <a href="#">next</a> </td>
    </c:if>

Ensure that you are targeting the td element within the table, not just the table itself. Remember, details matter! :)

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

What is the best method for enlarging the central image in Owl Carousel?

Could someone help me with implementing Owl Carousel to achieve this design? I have attempted it, but unfortunately, it is not working as expected. Your assistance in fixing the issue would be greatly appreciated. Please find the necessary code below: ...

Issue with the formatting of the disabled button

I am facing an issue with styling a disabled button. Whenever I try to apply custom styling, it reverts back to the default styling. I have already cleared my cache but the problem persists. The button is disabled using JavaScript with document.getElementB ...

Transmitting HTML and CSS code to the server for seamless conversion into a PDF file

I recently started using a tool called GemBoxDocument that allows me to convert HTML files into PDFs. Their website provides sample code demonstrating how to convert an existing file on a server (source): using System; using System.Linq; using System.Tex ...

I utilized Bootstrap to validate the form, however, despite the validation, the form is still able to be submitted. What steps can I take to

I have implemented form validation using Bootstrap's 'needs-validation'. However, I am facing an issue where the form still gets submitted even when the validation fails. What I want is for the form submission to be prevented if the validati ...

The margin-top property in CSS is not functioning as intended for a specific pixel value when applied to

I'm having trouble with positioning an icon using margin-top: -35px; under #menu. When I click on the icon, the side navigation bar doesn't work properly. However, if I adjust it to -15px, the side navigation bar displays correctly. Can someone h ...

Tips for presenting styled HTML content within a dynamic list using HTML and JavaScript

Is there a way to display HTML formatted text within a dynamic list in HTML? I've tried implementing it, but the tags are being displayed instead of the formatted text. Here's an example of the code: <!DOCTYPE html> <html> <body> ...

Strange glitches and slow loading problems plaguing website. (GoDaddy)

TackEmporium.com Lately, I have been revamping my website, which was originally given to me by a friend. I have been making slight adjustments to update its appearance while keeping its classic look with enhanced resolution and cleaned-up HTML5 code. Rec ...

Alter the class generated by ng-repeat with a click

I currently have a dynamically generated menu displayed on my website, and I am looking to apply a specific class to the active menu item based on the URL (using ngRoutes). The menu items are generated from a $scope.menu object, so my initial thought was t ...

Adding the <a> tag causes Superfish to malfunction

I've been struggling to get the latest Superfish menu code working with lists that include the <a> tag. I've double-checked everything, but it seems like I'm missing something obvious. Can anyone help me figure out what's wrong? ...

Are you in need of a flexbox list that can be scrolled

How can I create a scrollable ul element? Currently, it appears that the ul flexbox extends beyond the browser window. html <div class="container"> <div class="header"> Untitled </div> <ul/> <li>1</li> ...

I am experiencing an issue with the interaction between my "label" tag and "summary" tag. The details are not opening when I click on the label. Can someone please provide guidance on how to resolve this

I have reviewed the question here, but it does not provide an answer, and there's also this related question. However, my question has a slightly different angle. I am encountering an issue where adding another element inside the summary tag prevents ...

Including a logo and navigation bar in the header while collaborating with different subregions

I'm having trouble getting a picture to display in the header alongside a horizontal menu. I've divided the header into two sections: img and navbar (html). The navbar is showing up correctly, but the image isn't appearing. Any suggestions o ...

JavaScript form button press tracker

Hello! I've been tackling a challenge involving a JavaScript function to count button clicks. The catch is, the button type is set to submit, causing the page to reload every time I click it. Below is the snippet of code that contains the problemati ...

Having trouble rendering components due to conflicts between React Router and Semantic UI React

Below is the code in my App.js: import { useRecoilValue } from 'recoil'; import { authState } from './atoms/authAtom'; import { ToastContainer } from 'react-toastify'; import { ProtectedRoute } from './layout/ProtectedRou ...

Font may seem more slender in Firefox and Safari compared to Chrome where the appearance is impeccable

I am currently working on achieving consistent font appearance across Mac Chrome, Safari, and Firefox (IE compatibility to be addressed later). My experiments have included: -webkit-font-smoothing: subpixel-antialiased; The font appears almost identica ...

Resizing Bootstrap Modal using React with a Personalized Dimension

Is there a way to manually set the width of Bootstrap's Modal React component on my website? I want to be able to define the width in pixels, and if possible, use a const object in the .jsx file for CSS. If not, I can resort to using a .css file. Be ...

How to create a see-through background using three.js

I am new to working with three.js and recently came across a codepen that caught my attention. However, I am facing difficulties while trying to change the background color. After exploring various questions related to this issue, I attempted to add { alp ...

Load information from a JavaScript object when the user clicks dynamically

My challenge involves utilizing a JavaScript object that contains video information such as title and source URL. Within my HTML, I have image placeholders and the goal is to trigger a modal pop-up (using Twitter Bootstrap modal) of the specific video when ...

Allow users to modify multiple rows in a customizable table with Flask

I am currently working on a web application that utilizes Flask/Python as the back-end with SQLite, and HTML/CSS/JS (Bootstrap) for the front-end. In one specific section of the application, users should be able to edit multiple fields simultaneously in a ...

Whole page scrolling instead of just inner div scrolling

Once again, I find myself tinkering with CSS... In the current setup, the map container is scrolling on its own, separate from the rest of the content within the container. How can I enable the entire page to scroll when additional content is added to the ...