Limit the cell dimensions to a specific width and height

I initially set fixed widths and heights for the cells, but we decided to move away from that approach. Now I want the cells to be able to shrink and expand freely, but I also want them to stop resizing once they reach a certain width.

  <table align="center" class="data_extract vert_scroll_table" >
              <tr>

                  <c:forEach var="heading" items="${results.headings}"> 

                      <th class="data_extract">${heading}</th>

                  </c:forEach>
              </tr>
              <c:forEach var="row" items="${results.data}">
                  <tr>
                      <c:forEach var="cell" items="${row}" varStatus="rowStatus">
                          <td class="data_extract">
                              <c:choose>
                                    <c:when test="${results.types[rowStatus.index].array}">
                                    <c:set var="comma" value="," />
                                        <c:forEach var="elem" items="${cell}" varStatus="cellStatus">
                                            <c:set var="myVar" value="${cellStatus.first ? '' : myVar} ${elem} ${cellStatus.last ? '' : comma}" /> 
                                        </c:forEach>
                                        <span class="mouseover_text" title="${myVar}">${myVar}</span>
                                    </c:when>
                                  <c:otherwise>
                                        ${cell}
                                  </c:otherwise>
                              </c:choose>
                          </td>
                      </c:forEach>
                  </tr>
              </c:forEach>
              </table>

css:

table.data_extract
{

 border: 2px gray solid;
 border-collapse: collapse;
 }

td.data_extract,
th.data_extract,
table.data_extract td,
 table.data_extract th

{

 text-align: center;
 font-size: 7.5pt;
 white-space: normal;


 }

Answer №1

Include the following in your td.data_extract rule:

max-width: {choose a specific width}
and
min-width: {choose a specific width}
.

Answer №2

To ensure a minimum width and height for elements, consider using CSS min-width and min-height properties.

Here are some helpful resources on these properties:

For more information on setting minimum heights, check out: http://codecademy.com/cssref/pr_dim_min-height.asp

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

Tips for establishing a universal onkeydown listener for all frames within a webpage?

Working with a complex legacy multi-frame webpage that needs to be compatible with IE-11 and responsive to hotkey events has brought up some challenges. It appears I can't simply declare a JavaScript method in the parent page. Rather, it seems that e ...

Parcel JS: The function tree.render is missing or not defined

Every time I attempt to execute the production build command npm run build or npx parcel build index.html, this error occurs. My project consists of simple HTML and CSS, without any React or third-party libraries. What could be causing this issue? I have t ...

Utilizing jQuery to enable a div to follow the touchmove or mousemove events while also automatically

I am looking to create a basic function in my jQuery script. I want the pages to slide horizontally in response to the movement of a finger or cursor on the screen. While there are many plugins available for this purpose, I prefer a simple, customized solu ...

Continue to alter elements by stacking them on top of each other

Currently, I am in the process of familiarizing myself with CSS3 3D transforms. However, I am encountering difficulties in keeping elements that are undergoing transformation on top of other elements. If you'd like to take a look at what I have accom ...

Obtaining the element ID with Selenium WebDriver in cases of dynamic IDs

I am encountering an issue with the drop-down image element. I have attempted various methods to select the element, but none of them seem to be working. This may be due to the fact that both elements are identical and their IDs are dynamic. I did manage ...

Problem encountered in Firefox using Selenium: Invalid expression SyntaxError when dealing with Div tags in XPath

I encountered an error while attempting to automate a sample Qlikview web report using Selenium Browser: Firefox Xpath returned by FirePath: .//*[@id='58']/div[2]/div/div[1]/div[4]/div[1] Exception: **Exception**: Exception in thread "main ...

Strange Appearance of Angular Material Slider

I am experiencing some issues with my slider and I'm not exactly sure what's causing them. [] .big-container { display: block; padding-left: 10px; padding-right: 10px; padding-top: 10px; margin-bottom: 10px; } .question { display ...

Divide the string into two halves and display them in separate div elements

I am in need of a code that can split a string in half. For instance, if the inputted name is "Trishy", which consists of 6 letters, the first 3 letters should be placed into the second li within the <ul class="hardcover_front">, while the remaining ...

Tips for achieving a repeating transparent background image

I am trying to achieve a similar effect as shown in this example: http://jsfiddle.net/abalter/k8G3C/ The background image I'm using is transparent with the logo and text overlaying it. My issue arises when I set the background image to repeat-y. It ...

I am not encountering any error messages, but when I attempt to click on the form, the mouse cursor does not change to the expected form type

While there are no errors showing up in the Chrome Developers Error code, I am facing an issue with my form where the text fields are not visible. It should be a simple task, but it has turned into a headache for me. I would greatly appreciate any help i ...

Tips for disabling autofocus on textarea when it is initially created in Internet Explorer browser

By clicking a button, I can generate a new <textarea></textarea>. However, in Internet Explorer, the cursor automatically moves to the newly created text area. Is there a way to prevent this from happening? ...

Learn the process of covering the entire screen with a video

I'm attempting to achieve this: IMG Below is the code snippet I've been using: <div class="container" id="containervideo"> <div id="video"> <div class="box iframe-box"> <div class="container"> ...

Prevent individual elements from shifting around on browser resizing within a React form

Having issues with a React form that includes an image gallery and input fields. import React, { Component } from 'react'; import ImageGallery from 'react-image-gallery'; import { Container, Row, Col, InputGroup, Button, FormControl, ...

Running a function in NodeJS and sending a response to the client: A step-by-step guide

Currently, I am working on encrypting some text for an HTML project. The encryption code I have requires a node.js server to run the function, but unfortunately, I am unable to execute it in my original HTML code. As a beginner in JavaScript, I find it cha ...

How can I customize a CSS media class?

In my project, I am using a CSS library that includes the following class: @media only screen and (max-width: 480px) { .nav-tabs>li { margin-bottom:3px; } .nav-tabs>li, .nav-tabs>li>a { display:block !important; ...

How can I focus on a particular P element within this Div using CSS?

I am attempting to target a paragraph element within the code snippet below. I want to create a class that applies text-shadow to the text of that specific paragraph. However, I am unsure which class to focus on and what the correct syntax should be. I in ...

WordPress CSS & JS files failing to enqueue properly

My attempt to integrate my CSS and JS files with WordPress has not been successful. Although my CSS works through the Custom CSS tab, this is not an ideal solution. Below is the code from my functions.php file for your reference. Can you help me troublesho ...

How to use TypeScript to set a value in ng2-ckeditor

I have implemented two ckeditor instances using *ngFor: <div class="form-group" *ngFor="let lang of languages"> <span>Legal text in {{lang.translate}} {{lang.abbr}}</span> <ckeditor id="{{lang.abbr}}" formControlName="{{lang.abbr} ...

Swapping out an ImageButton for a custom-styled icon

I am in need of replacing an ImageButton within a GridView ItemTemplate with an icon that is defined in a CSS style. My usual approach would be to replace the ImageButton with a hidden button and then use JQuery to trigger a click event on the hidden butt ...

Tips for Using AngularJS to Filter End DatesI'm trying to figure out how to filter

Hey everyone, I'm looking to filter items based on a date range (Start and End Date), specifically using the daterange functionality in my meanjs app. Check out My Plunk for reference. Please take a look at my plunker for more context. I am disp ...