Table with expanded width, cut off cell content

As I work on building an HTML table, I've encountered a challenge. The table code looks like this:

This is the structure of my table:

<table class="table" style="font-size:22px; width:100%">

I want to ensure that everything fits within the page's width. If the content exceeds the width, I would like the team names to be truncated with an ellipsis. Can this be achieved using HTML?

Here's what I have attempted so far:

<style>
  table td {
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
  }    
</style>

You can view the results in this Fiddle: http://jsfiddle.net/wn6c6yeL/

htmlcsstwitter-bootstrap

Answer №1

Yes, it is definitely achievable. All you have to do is include the max-width property in your CSS for the td element. Here's an example:

table td {
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
    max-width:150px;
}

SEE DEMO

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

The output produced by ASP.NET remains unaffected by JQuery or JavaScript interference

I am facing an issue with manipulating a dynamically generated directory tree in HTML format using JavaScript. I have a piece of code that generates the tree server-side in ASP.NET and then tries to add a '+' at the end of each list item using jQ ...

c#jqueryasp.netcss

Displaying TestNG Reporter information in Gradle-generated HTML test reports

I've been searching high and low for a solution to my problem with no luck, so I'm turning directly to you. Is there any way to display TestNG's Reporter output in Gradle HTML reports? Here's the scenario: I have multiple testNG test m ...

htmlgradlereporttestng

Using jQuery to append content with a variable as the source

Recently delving into jQuery and encountering an issue with getting my variable inside src when using append. Either it's not functional at all, or just displaying the variable name in string form in the console. Here is the code causing trouble: va ...

javascriptjqueryhtml

Mastering the art of using transitions in conjunction with display properties

I'm trying to achieve a fade-in effect with the CSS property display:block. Here's my HTML code: <div>Fade</div> And here's my CSS code: div { display: none; transition: 2s; } div:hover { display: block; } Unfortunately, thi ...

htmlcss

The Sticky Navigation Bar Disappears After a Certain Scroll Point

Looking for some help with my website's navbar - it works fine until I scroll past the blue section, then it disappears along with other elements. Any suggestions on how to fix this? Thanks! <!DOCTYPE html> <html lang="en"> <h ...

htmlcssnavsticky

What is the best approach to ensure the navbar is responsive based on the viewport size?

I am working on creating a responsive webpage that will show different navigation based on the viewport size. Currently, I have written this JavaScript code: var shownav = document.getElementById('show-nav'); if (screen.width < "720"){ ...

javascripthtmlcssresponsive

Vue Page fails to scroll down upon loading

I am facing a challenge with getting the page to automatically scroll down to the latest message upon loading. The function works perfectly when a new message is sent, as it scrolls down to the latest message instantly after sending. I've experimented ...

javascripthtmlfirebasevue.jsdom

What could be causing my PrimeReact dropdown component to ignore the custom class styles?

Within my Project, I am utilizing multiple Prime React dropdown components and I am aiming to customize one of them with a unique style. In my CSS, I have established global styles to overwrite the default settings for all the dropdowns. However, when tryi ...

javascripthtmlcssreactjsprimereact

I need to access a webpage using VBA without relying on Internet Explorer for logging in

I need to access the website by logging in. However, I am facing difficulty in using it. Unfortunately, I am unable to share the username and password due to confidentiality reasons. Below is the code snippet that I have: Sub checkdownload() Dim u ...

htmlvba

The browser is able to cache the selected state of a select tag and will disregard any instances where selected=

When rendering a drop down box, I include a currently selected value using selected="true". <select id="dropDown"> <option selected="true" value="1">value2</option> <option value="2">value3</option> <option va ...

htmlbrowser

Is it possible to maintain a fixed footer while utilizing async/ajax functions?

Looking for a reliable solution to have a fixed footer that adjusts based on the page content? I've tested multiple samples, but they all fall short when it comes to incorporating AJAX elements. Is there a fixed footer out there that truly works seaml ...

javascriptjqueryhtmlcss

What steps can I take to guarantee that my grid always accommodates its child without being too small?

My current setup involves utilizing a grid layout to arrange elements in the z-direction. However, I have encountered an issue where a child element extends beyond the boundaries of the grid element: #z-stack { display: grid; border: 5px solid ...

htmlcsscss-grid

The alignment of the background images is off

I am attempting to give a container a background image and then create two div tags using the col-md-6 classes from Bootstrap. The main div's background image is of grass texture, while the two inner divs have a skeleton of a football court as their b ...

htmlcss

Retrieving CSS style values with Node.js

I am looking to design a new CSS style that includes the lowest and highest values. table[my-type="myStyle"] { width: 255.388px !important; } This code snippet is included in numerous CSS files within my style directory. ...

javascriptjquerycssnode.jsnodes

Is there a way to modify the text color of the navigation bar in Bootstrap?

How can I customize the text color of the navigation links in my Bootstrap navbar? I want to specifically change the color of the nav-links to purple while keeping the main title on the left unchanged. Here is the code snippet: <!DOCTYPE html> < ...

htmlbootstrap-4

modify rectangular section in drupal rather than numerical block

Currently, I am attempting to modify blocks within my Drupal 7.x website using the Zen base theme. While I have been successful in adjusting the CSS styles of the blocks based on their numbers in the block.css file, I find this method quite confusing. Is ...

cssdrupal-7drupal-theming

Creating a responsive canvas and image container in fabric.js involves adjusting the layout and size of the

I am working with fabric.js and canvas to dynamically add an image from a URL. I would like to make the canvas responsive based on the resolution. How can this be achieved? Here is my current code: <canvas id="panel" width="700" height="350"></ ...

htmlfabricjs

Adjust Vue FilePond dimensions

I am currently working with a Vue Filepond and trying to ensure that it fills the height of its container. My Vue Filepond setup also involves Vuetify. Whenever I attempt to set values in the CSS, they are constantly overridden by 76px. Although fill-hei ...

javascriptcssvue.jsfilepond

Implementing the rotation of an element using 'Transform: rotate' upon loading a webpage with the help of Jquery, Javascript, and

A div element designed to showcase a speedometer; <div class="outer"> <div class="needle" ></div> </div> The speedometer animates smoothly on hover; .outer:hover .needle { transform: rotate(313deg); transform-origin: ce ...

javascriptjqueryhtmlcsscss-animations

Adjust the width of the table's td elements

I am looking to create a table similar to the one shown above. Here is my implementation. Please review my JSFiddle. HTML: <table border="0" id="cssTable"> <tr> <td>eredgb</td> <td><a href="self">0 ...

htmlcss