table with flexible cell width and fixed table width

I've been troubleshooting this issue for days, but I just can't seem to find a solution!

The problem lies within a table used on a webpage. If I don't specify table-layout, I can make one cell width dynamic, but I lose the ability to set 'white-space' or 'overflow'. On the other hand, if I use 'table-layout: fixed', the dynamic cell width is lost, but I can set 'white-space' and 'overflow' properties.

I need a solution that combines both scenarios! How can I achieve this using only CSS?

<table style="width: 50%;">
<tr>
   <td style="width: 20px;">1</td>
   <td style='overflow: hidden; white-space: nowrap;'>
       here is a really long string to hide
   </td>
   <td style='width: 20px;'>3</td>
</tr>
</table>

htmlcss

Answer №1

<div style="width: 50%;">
<p><span style="font-size: 16px;">1</span></p>
<p style="overflow: hidden;height:20px;display: block;">
   here is a super long string to demonstrate the need for text overflow and hidden text. This is a test string to show the purpose of using the overflow property to hide text that extends beyond a certain length. Hopefully, this example effectively shows the concept.
</p>
<p><span style="font-size: 16px;">3</span></p>

Adding display:block + height:20px should solve the issue :-)

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

Are there numerous instances of jQuery references both preceding and following the use of '$.noConflict'?

Managing a large project with thousands of PHP files can be challenging, especially when dealing with conflicting jQuery references that hinder the implementation of a desired plugin. Consider this scenario: <html> <head> ...

javascriptphpjqueryhtml

What is the best way to save longitude and latitude coordinates in a database using the <input> method?

Learn how to use HTML code <html> <body> <p>Press the button below to receive your coordinates.</p> <button onclick="getLocation()">Get Coordinates</button> <p id="demo"></p> <script> var x = doc ...

javascriptphphtmlajaxlaravel

Troubleshooting Bootstrap Column Display Issues on Mobile Devices

I used bootstrap columns to organize my users' information. While they look good on larger screens like laptops and desktops, on smaller phone screens the second column appears to have some excess margin at the top. How can I fix this issue? <div ...

htmlcssbootstrap-4

How about mixing up your backgrounds with an overlay effect for a unique look?

Hey there, I'm currently working on adding random backgrounds to my website through an overlay, but I've hit a roadblock when it comes to displaying them. Here is the code I'm working with: .css / .php #intro { background: ...

javascriptjqueryhtmlcss

Creating space between elements in CSS div elements

I've come across numerous resources on this topic that have already been answered, but none of them have provided a satisfactory solution. Here's the scenario: I have created a basic fiddle showcasing the desired behavior: @ See fidlle If I h ...

htmlcss

Customizing the initial page layout in Elm

I am new to Elm and I need help with a particular issue. Can someone provide guidance or direct me to a useful resource for solving this problem? The challenge I’m facing involves editing the start page of a website by removing specific elements, as list ...

javascripthtmltypescriptsasselm

Elements on the left side are not properly aligned

I've successfully coded the head banner and news containers below the header. However, I'm facing an issue with my left menus: Instead of aligning properly with the header and news containers, they are overlapping them. Here is the HTML Code: ...

htmlcsscss-float

Incorporating .txt files into a static webpage using only HTML and JavaScript

Exploring the realm of web page creation for the first time has left me in need of some guidance. I have successfully added an upload feature for text files on my web page, but I am struggling to embed a text file directly into the page source. With Java s ...

javascripthtml

Is it considered a bad practice to use the record ID on a <tr> element for an editable row within a table?

I am in the process of using jQuery to create a feature that allows users to edit a HTML table containing category names. Currently, I have successfully populated my table using PHP/MySQL. While researching on jQuery - Edit a table row inline, I came acr ...

phpjqueryhtml

Tips for managing media queries in HTML emails on Gmail

When sending out my website's responsive HTML emails, I utilize media queries to ensure optimal display. However, I have noticed a discrepancy in how Gmail/Inbox interprets the max-width parameter in the media query. Instead of referencing the HTML em ...

htmlemailgmailmedia-queriesinbox

How to capture text outside of a HTML tag using Selenium with Python?

I need help extracting the specific text inside a div element that is not enclosed by a label. <div style="color:red;"> <label> Total Amount Due:</label> $0.00 </div> Only interested in retrieving the $0.00 amount from th ...

pythonhtmlselenium-webdriverweb-scrapingdom

Experiencing problems with various React Carousel libraries when it comes to displaying

I have been attempting to integrate Carousel libraries into my react app, but I am encountering a common issue with all of them. The Carousels show the items on the first slide, but subsequent slides do not display any items, even though they exist within ...

javascriptcssreactjsslidercarousel

The appearance of random instances of the letter "L" within text on Internet Explorer 8

Help needed! I'm encountering an issue where mysterious "L" characters are appearing in IE 8. The problem is specifically occurring in the Healthcare Professionals section and the bottom two blocks of the page. Has anyone else experienced this or have ...

htmlcssinternet-explorer-8

Preventing Adjacent Text from Moving Due to a Floated i Element

I have a div with a bootstrap icon positioned at the top right corner. However, I want to center the text horizontally without shifting the position of the icon. Is there a way to achieve this? See my sample code here: https://jsfiddle.net/x1Lvyu6t/3/ ...

htmlcss

specifying the input value pattern restriction in HTML5

Struggling to set a minimum and maximum value for an input text box. Despite my efforts, I haven't been able to make it work. How can I resolve this issue? The current pattern restricts values up to 10 but I need to allow values from 100 to 100000. Wh ...

html

Adjust the size of a div while maintaining its aspect ratio based on the width and height of its parent element using CSS

After exploring various methods to create div aspect ratios using CSS, I had success with a demo. However, I encountered an issue with setting the height of my container when the width-to-height ratio is larger (#1 scenario). https://i.sstatic.net/VNdJ5.p ...

css

Why is the label on my styled checkbox shifting position?

While custom styling a checkbox, I'm facing an issue where the label next to it keeps shifting. When unchecked, it aligns itself at the bottom of the box, but upon checking, it moves to center align with the box. .check { width: 100%; font-we ...

htmlcsscheckbox

I have multiple div containers on my webpage, and I'm looking for a way to dynamically load data into a specific div without having to refresh the entire page using PHP and Code

Is there a way to load data into only the second div tag when clicking on a link, without refreshing the entire page? I want to ensure that the first and third div tags remain static while allowing the second div tag to be dynamic. <div class="first" ...

phpjquerycssajaxcodeigniter

`toggle between classes when navigating pages results in a brief white flicker`

I've developed a single page app where each page is initially set to display:none. To show pages, I add a class called .current-page: .current-page{ display:block; } So in order to switch between pages, I simply toggleClass('current-page&a ...

jquerycss

Is the CSS content-visibility property compatible with background images?

Can CSS content-visibility and contain-intrinsic-size also be used with the background-image property, or do they only work with IMG tags? Will either of these properties have any impact on the following code snippet? <span id="image"> #i ...

htmlcss