Below is a table for reference:
<table width="100%">
<tr>
<td id="td1"></td>
<td id="td2"></td>
<td id="td3"></td>
<td id="td4"></td>
</tr>
</table>
Is there a way to have td1 adjust its width according to the content while ensuring that the combined width of td1 and td2 equals 50% of the parent's width?
If you have full control over the markup, consider using div and applying display: flex; instead of using a table. Using JavaScript might be unnecessary in this case. (Please note the IE11 limitation)
I've provided a simple example to help you start, although I'm not entirely sure about the desired behavior for td2 & td4.
However, if you wish to set a maximum width for those elements, you can refer to this solution:
#td2 {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 200px;
}
Additionally, use the following for #td1:
#td1 {
flex-grow: 1;
}
This will allow #td1 to fill up the space automatically while keeping 200px for #td2.
In general, it is recommended to use classes instead of IDs when working with CSS.
Best of luck implementing these changes!
Hey there! I've set up a text input box for users to link their Tripadvisor page to their profile. I want to make sure that when they paste the URL in, it is checked for the correct format. For example, if someone pastes: or , then allow the link. Ho ...
For my application, I need the user to record a video and have it saved on the server disk instead of downloading it to the client browser. I am currently using getusermedia for this purpose, with the following code: (function(exports) { exports.URL = exp ...
One thing I wanted to achieve was changing the color of a hyperlink once it's clicked. I managed to make it work by using the code below: var current = "home"; function home() { current = "home"; update2(); } function comp() { current ...
Attempting to constantly update the latitude and longitude coordinates from a dynamic API has proven to be a challenge. Despite utilizing jQuery with a set interval of 1000 milliseconds, the data retrieval from the API does not occur as expected. While i ...
I'm currently facing a challenge in extracting the value from my prompt in order to modify a category using a JavaScript function. Typically, I would rely on a form to pass variables to the request.body, but that's not an option here. This is wh ...
I am working with the following controllers and service: angular.module('myApp', []); angular.module('myApp').factory('ShareService', function() { var information = {}; information.data = ""; information.setD ...
I am currently utilizing Bootstrap and JQuery for my project. HTML <div> <ul> <li><strong> Status : </strong><span id="monitorStatusSpan">1111</span></li> </ul> </div&g ...
I am looking to display items in a list with a specific format: |Name | Some other val1| |Very very long no wrap line that...| Some other val2| The right side needs to have a fixed width. The left side should fill al ...
First of all, here is the fiddle link: http://jsfiddle.net/krish7878/h38jn324 I have a simple question. When a panel is clicked and it expands to show its contents, a class 'active' should be added to 'panel-heading'. I came across a ...
<div class="class-one"> <div class="class-two"> lorem ipsum <div class="class-three"> <a href="https://yahoo.com" target="" class="btn btn--primary btn--purple " id="" title="find"><i class="fal fa-fw fa-file-word"></i>& ...
Utilizing react-flexbox-grid in my project has led to the following layout: const SpicyMenu = (props) => ( <List> {props.foodItems.map(foodItem => <SpicyMenuItem key={foodItem.name} {...foodItem}/>)} </List> ); co ...
I am currently working on integrating websocket functionality into my web application using PHP and as an extension for Yii. This will allow me to create a notification system similar to what I have in mind. My starting point is the code available at the ...
I am currently working with a datatable that contains a large amount of data. Within this table, I have included 2 buttons for exporting the data in PDF and CSV formats. One of the columns within my table contains a comma-separated string, and when I expor ...
Is there a secure method to disable a div based on a Razor variable in ASP.NET MVC 4.0? I attempted using a CSS class, but it was easily bypassed with developer tools. .disableddiv { pointer-events: none; opacity: 0.4; } Any advice on how to effectively ...
Is it feasible to add a list of links to multiple HTML files? I was inspired by W3 School's W3 Include functionality, which allows you to import blocks of HTML code into various files simultaneously, making it convenient for making changes across many ...
I currently have index.html with two Vue instances in different files: <!DOCTYPE html> <html lang="en"> <body> <div id="appOne"> </div> <div id="appTwo"> </div> </body> </html ...
Server responses are being received in JSON format, which may contain objects with duplicate keys. When displaying the results, I noticed that only the last value for duplicate keys was showing up. After investigating, I realized this was due to using the ...
While following a tutorial on creating character animations, I encountered an issue. The tutorial, located at , made it easy to make the character move left (the right movement was already implemented). However, I am struggling with how to animate the char ...
I am attempting to use JavaScript to create an element in my HTML using createElement, but there seems to be an issue in my code. HTML <button class="test_button">I am a test</button> <div class="test"></div> ...
Hey there, I apologize for the messy title but I've been searching for an answer for a couple of hours now. <div id="lightbox"> <img src="blabla.png"> <div href="#" id="next" onClick="next(1)"></div> <div href=" ...