Are divs within tables ignoring overflow settings?

I'm currently working on a calendar project that can be viewed at the following link:

Each table cell in my calendar has a specified width of 14%. This maintains consistency across all columns, and it's crucial for me to keep this 14% intact.

One issue I'm encountering relates to text overflows. If you visit the page, you'll notice event descriptions like 7:00 PM - The Break Weekly, where the word "Weekly" wraps onto a second line. What I'd prefer is for it to display as 7:00 PM - The Break... with an ellipsis overflow effect.

I attempted to address this problem using the following CSS:

.monthTable .monthMain .monthOccur
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Unfortunately, this solution isn't yielding the desired results. While the white-space: nowrap property behaves as intended, the rest doesn't. It causes the table cell's width to exceed 14%.

Is there any way to resolve this issue without resorting to fixed pixel widths?

htmlcss

Answer №1

Make sure to include the CSS property table-layout: fixed; within the .monthTable class. This will ensure that the table maintains its specified widths without being dynamically adjusted by the browser.

Answer №2

Define the width of 

.monthTable .monthMain .monthOccur

.monthTable .monthMain .monthOccur {
border: 1px solid rgb(50, 50, 50);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
padding: 5px;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 90%;
margin: 0 auto;
}

Answer №3

Consider this solution (include width):

.monthTable .monthMain .monthOccur {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

     width: 119px;

     border: 1px solid rgb(50, 50, 50);
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     -khtml-border-radius: 5px;
     border-radius: 5px;
     padding: 5px;
     font-size: 11px;
}

Check out the updated appearance here: https://i.sstatic.net/nxLP4.png

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

Trouble with scrolling on FancyBox2 and Droid 2.3.4

I have encountered an issue with my Droid 2.3.4 where when I view content through iFrame in Fancybox2, scroll bars are not showing up. Despite trying various solutions that I came across, nothing seems to work. Interestingly, all other browsers like iPhone ...

androidjquerycssiframefancybox-2

Disabling the background shadow effect in Angular Material's Accordion

I successfully disabled the background shadow on the Angular Material Accordion in this demonstration by incorporating the following CSS rule: .mat-expansion-panel:not([class*='mat-elevation-z']) { box-shadow: none !important; /* box-shadow: ...

cssangularsassangular-material

When the div reaches the top of the viewport window, call this function

Can you review the code snippet below? I need a function to trigger when the red box's top aligns with the viewport during scrolling. JS Fiddle: http://jsfiddle.net/ay5ttmLk/ HTML <div class="test" style="height:100px;width:70px;"> sadfsadf s ...

javascriptjqueryhtmlcss

How can I increase the element by $100 using a dropdown selection in JavaScript?

Hey there! Looking to create a dropdown list with two shipping options: Special Shipping Normal Shipping <select> <option>Special Shipping</option> <option>Normal Shipping</option> </select> If the user selects Speci ...

javascriptjqueryhtml

How to toggle classes on anchor tags using jQuery for Twitter Bootstrap buttons?

I built a single-page website. The navigation is made up of buttons styled with bootstrap 3. Since it's a single page, the buttons are anchor tags. I'm trying to figure out how to apply an .active class to the last clicked anchor tag. Here is t ...

jqueryhtmlcsstwitter-bootstrapanchor

Issue with content not moving downward when the drop-down menu collapses

I'm facing an issue with adjusting the layout of my pages when the main Menu collapses. The links that drop down from the Menu are staying on top of the content, and I want them to move down as well. Unfortunately, since some of my pages are integrate ...

htmlcss

JS: Initiating a new keypress operation

When I press the Tab key, I want it to do something different instead of its default action. Specifically, I have a text box selected and I would like it to add spaces (essentially making the textarea behave like a text editor). How can I trigger this type ...

javascriptjqueryhtml

Max-height is disregarding the CSS transition

My goal is to implement a CSS transition that triggers when a button is clicked, causing it to fade out and disappear while another element simultaneously takes its place. I have almost achieved the desired effect, but there's an issue. When I add th ...

css

Ways to stop bootstrap tabs from ruining inactive content? [keeping track of tab status]

Although Bootstrap tabs are useful, a common issue is that content on inactive tabs is removed from the page flow. When switching to a new tab, the previous tab's display attribute is set to none instead of using visibility: hidden or other methods. ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Align FontAwesome icons of various sizes vertically in a bullet-point list

Our website is built using Bootstrap v4.6.2 and FontAwesome 5.15.4. The following HTML code snippet displays an unordered list with FontAwesome icons of different sizes (0.8em vs 0.44em). <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/ ...

htmlcssbootstrap-4font-awesome-5

Conceal the column title for order items in the WooCommerce admin panel

I've been attempting to hide certain columns within the administrative section of Woocommerce, but have had no success with the code I'm using. I'm currently stuck and my question is: Is there a way for me to conceal specific column names i ...

csswoocommerceorders

Guide on Disabling Horizontal Scrolling in a Website's Navigation Bar Using Bootstrap

Instead of disabling my horizontal scroll completely, I want to remove the scroll from specific elements like my NavBar. When I scroll, the Navbar moves along with it which ruins the design. I only want the horizontal scroll to be enabled for certain parts ...

htmlcssfrontendbootstrap-5

Slider - incorporating a heading onto a video with HTML styling

Is there a way to display a title on a slider when one of the slides contains a video? Here is an example code snippet: <!-- Swiper--> <div data-height="100vh" data-min-height="480px" data-slide-effect="fade" class="swiper-container swiper-s ...

javascriptcsshtmlslider

Separating the web address path and extracting just two segments

How do I extract specific parts of a user-entered path in JavaScript? For example, if the user enters the following path: /content/mypath/myfolder/about/images/April/abc.jpg I only want to grab: April/abc.jpg $(document).ready(function(){ $(' ...

jqueryhtmlarrayssplit

"What is the best way to programmatically set all options as selected in an HTML select element using JavaScript

There are two select tags in HTML. The first one includes all the countries in the world, while the second only contains the countries that the user has selected. <form action="/fixsongs.fix"> <table> <tr> < ...

javascripthtml

Altering pointer during drag操作

Is it feasible to customize the cursor during a drag operation? I've been exploring ways to achieve this for some time now. My goal is to replace the default 'not-allowed' cursor that appears when dragging an object with a different cursor. ...

javascriptjquerycssdragmouse-cursor

Creating space between DIVs in a Bootstrap 4 modal: Easy steps to follow

What is the best way to add spacing between DIVs in a Bootstrap 4 modal? https://i.sstatic.net/1XXgN.jpg HTML <div class="form-group clearfix row"> <div class="col-lg-3 pd-30 card bg-info border-radius-5 box-shadow text-center justify-conte ...

htmlbootstrap-4bootstrap-modal

Dealing with CSS Overflow Issues: Fixing the Scroll Bug

My current project involves creating a page with fixed links at the top and submit buttons at the bottom. The content in the middle is scrollable using overflow:auto. I've noticed that when I resize the browser window, the scrollbar slowly disappears ...

css

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 ...

htmlangularjs

Ordering styles in Material UI

I've spent countless hours customizing this element to perfection, but the more I work on it, the more of a headache it gives me. The element in question is an outlined TextField, and my focus has been on styling its label and border. Initially, I th ...

javascripthtmlcssreactjsmaterial-ui