Can we maintain the flexibility of TDs while having a fixed TABLE?

Edit 08.02.2017: I am not required to support every browser since I am utilizing the latest electron-framework, which is based on Chromium 56.0.2924.87

I have an editable table that is preloaded with data before allowing user edits. In order to print this table in A4 Format without exceeding a certain width, I need to ensure it remains within the given dimensions.

The complication arises when using 

table-layout:fixed;
width:100%;

as the editable TDs lose their fluidity. Although I understand the contradiction - something being both fixed and fluid simultaneously isn't possible...

However, I am confident that in 2017 there must be a way to achieve a fixed table while keeping the TDs fluid.

Here is an example without the fixed table: https://jsfiddle.net/stjkd2xs/

As shown, with shorter words, the table fits inside its parent container. The TDs are fluid. But longer words cause the table to break out of its boundaries.

Here is an example with a fixed layout: https://jsfiddle.net/jdedo87z/

In this case, the table expands to fill the entire parent container, which is desirable. However, the TDs have fixed widths, which is less than ideal.

I am seeking a solution where the TDs can behave in a fluid manner within a fixed-width table.

  • Is there a pure CSS method to accomplish this?
  • Are there other approaches to resolving this contradiction?
  • Sidenote: I am considering scrapping the table altogether and using divs instead...

Thank you for any advice or suggestions.

Regards, Megajin

htmlcsselectron

Answer №1

That's not the typical way tables are utilized...

However, you might consider something along these lines:

.freak-box{width:300px; height:300px; border:1px solid red;}
.phreak{position:relative; max-width:400px; margin-right:100px; border:1px solid blue;}
.squishy-inside{position:absolute; width:100%; display:inline;}
<div class="phreak">
  <div class="freak-box">
    <div class="squishy-inside">
      When Tom returned home from the park, he was greeted by an unsettling scene - a lamp on the floor and strange noises emanating from the kitchen. Concern for his wife, Sarah, crept into his mind. Was she safe? Was she in the midst of the source of those eerie sounds?
    </div>
  </div>
</div>

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

Unfinished card or cut-off content within a bootstrap accordion

Greetings to the StackOverflow community! I am facing an issue with my accordion and card setup, where the card is not fully displayed within the button at the bottom. The following image illustrates the problem: https://i.sstatic.net/aSFsc.png Here is ...

jquerycssbootstrap-4

Crafting a traditional timepiece with canvas

Trying to create an analog clock using canvas. I wrote some code but I'm struggling with adjusting the speed of the clock hands (hours, minutes, and seconds). When I run the app, the hands are spinning too fast and leaving lines all over the clock. Is ...

javascripthtmlcanvas

The Bootstrap Dynamic Navbar is not adjusting for mobile devices because of the addition of a logo

Struggling to incorporate a logo into the navbar of my website. It looks good on larger screens, but causes the navbar to break on smaller screens. View without the logo: Click Here View with the logo and resizing issues: Click Here I think I can make th ...

htmlcsstwitter-bootstrap

What is the process for configuring data-internal time and height on a bootstrap carousel?

Despite trying to adjust the height and data-interval time, I am unable to get the desired effect. The image is not sliding as intended. How can I resolve this issue? .carousel img{ height: 50%; } .carousel-inner .carousel-item { transition: -webk ...

htmlcssbootstrap-4

How can Selenium be used to verify if an HTML5 validation has been activated?

When testing my web application with Selenium, I rely on HTML5 form validations for all the form validation. Is there a method in Selenium to verify if a form/input validation was triggered? ...

htmlselenium

A CSS selector that can target a neighboring element with the identical class

How can I use a CSS selector to highlight the last adjacent elements with the same class? In the example code below, the first three and last two elements share the same class. However, I am looking to specifically highlight Two, Threee and Six, Seven. & ...

csscss-selectors

Can HTML be injected into a Knockout custom element?

I am currently developing a custom knockout element and I would like to inject some HTML into it, similar to what can be done with polymer. My goal is to achieve something along the lines of: ko.components.register('hello-world', { template ...

htmlknockout.js

Incorporating information collected from a modal form into a table using vue.js

insert code hereThis single page application allows users to input data into a modal, which is then automatically added to a table on the main page. var modal = document.getElementById('modalAdd'); var modalBtn = document.getElementById(' ...

javascripthtmlvue.js

Ensure that clicking on various links will result in them opening in a new pop-up window consistently

I am facing an issue with my HTML page where I have Four Links that are supposed to open in separate new windows, each displaying unique content. For instance: Link1 should open in Window 1, Link2 in Window 2, and so on... The problem I'm encounter ...

javascripthtmlbrowser

Tips for inputting a password using Selenium webdriver when the password style is set to display:none

Currently, I am facing an issue with logging in to a page that has both a login and password field (betmarathon[d.o.t]com) using Selenium Webdriver. While Selenium is able to enter the login correctly, I am encountering difficulties when it comes to enteri ...

javahtmlseleniumauthenticationvisible

Choosing items within a category

For quite some time now, a question has been bothering me. I've been delving deeper into CSS lately and have made the decision to avoid using jQuery in this Drupal project to stay clear of custom code. The issue arises with a class that is applied to ...

csscss-selectors

Tips for increasing the width of a div wrapper to accommodate the table within it

I'm currently using the dataTable library with external plugins, and I want the wrapper width to adjust automatically. Even if the width of th elements exceeds the viewport width, I don't want the div width to exceed 100%. How can I make the di ...

cssdatatables

Angular JS does not display the bold tag for specific words

I'm currently working on an Angular JS application and receiving text from the server that needs to be displayed on my website. The text received from the server is: "My name is <b> John </b>" with b tags. Unfortunately, when I display ...

htmlangularjs

Chrome displaying fonts with top-notch rendering

I am facing an issue with @fontface specifically in Google Chrome where the font appears to be rendered too high on the page. Interestingly, when I switch the font to Arial, the display is fine across all browsers. However, as soon as I switch back to the ...

csshtmlgoogle-chromefontsfont-face

Is there a way to trigger the type() function once the erase() function finishes its execution?

Experience a typing animation JS with two functions that work correctly: the type() function activates when the type button is clicked, and the erase() function triggers upon clicking the Erase button. Now, the challenge is to introduce a new function cal ...

javascripthtmljquery

Placing a text box above a perfectly centered container

Attempting to create an informative text box and feeling like the solution should be straightforward, but perhaps missing something crucial. After a few attempts and consulting with the powerful GPT, seeking advice here. The current appearance is as follo ...

htmlcsssass

Looking to apply CSS selectors with variables to target all TD elements within a specific table?

Looking to apply CSS properties to all td IDs for rows in a table? Instead of individually targeting each ID like this: .idName1, idName2, idName3, idName4, idName5 {background-color: ##4CAF50;} You can simplify the process by using a PHP variable to ind ...

phpcss

Update the styling of each div element within a designated list

Looking for a way to assist my colorblind friend, I am attempting to write a script. This is the layout of the page he is on: <div class="message-pane-wrapper candy-has-subject"> <ul class="message-pane"> <li><div style=" ...

javascripthtmlcss

Radio button fails to be marked as selected

Currently, I am conducting a test on , and one of the tasks involves styling Radio Buttons using JavaScript (jQuery). Despite my repeated attempts to reconstruct the code, I always encounter the same issue: although JS successfully sets the input radio but ...

javascriptjqueryhtmlradio-button

How can I make a button that functions when clicked using items generated from a database?

@olafmoriarty, I appreciate your help with the initial bit, you were right on point. After experimenting further, I realized that your solution is linked to the Todo ID. However, what I need is for the solution to be based on the Status of a Todo Item. Fo ...

javascriptphphtml