Is there a way to maintain column width when there are multiple columns present? When the user clicks the + to view additional data, the Product Type column ends up looking uneven due to width issues.
I attempted to use style="width:300px;", but unfortunately, it did not have the desired effect.
https://i.sstatic.net/vfLjS.png
https://i.sstatic.net/o7kih.png
Please review the code at the following link: https://jsfiddle.net/chanthida/vfLzt4mw/1/
Thank you.
Consider utilizing min-width: 300px; in place of width: 300px;.
Here is a snippet to demonstrate:
$(".click-collapse").on('click', function() {
$(this).find('i').text(function(_, value){return value=='-'?'+':'-'});
$(this).nextUntil('tr.click-collapse').slideToggle(100);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div style="overflow-x: auto;white-space: nowrap;">
<table border="1">
<tr>
<th>Room Type</th>
<th style="min-width:300px;">Product Type</th>
<th>2019-11-14</th>
<th>2019-11-15</th>
<th>2019-11-16</th>
<th>2019-11-17</th>
<th>2019-11-18</th>
<th>2019-11-19</th>
<th>2019-11-20</th>
<th>2019-11-21</th>
<th>2019-11-22</th>
<th>2019-11-23</th>
<th>2019-11-24</th>
<th>2019-11-25</th>
<th>2019-11-26</th>
<th>2019-11-27</th>
<th>2019-11-28</th>
<th>2019-11-29</th>
<th>2019-11-30</th>
<th>2019-12-01</th>
<th>2019-12-02</th>
<th>2019-12-03</th>
</tr>
<tr>
<td>Superior </td>
<td> RB - NRF </td>
<td>1650</td>
...
</tr>
<tr class="click-collapse">
<td> <a style="cursor: pointer;"> Click me <i>-</i> </a></td>
<td colspan="21"></td>
</tr>
<tr>
<td></td>
<td>
test test test test test test test
</td>
<td>-</td>
...
</tr>
<tr>
<td></td>
<td>
test 2
</td>
<td>-</td>
...
</tr>
<tr class="click-collapse"></tr>
</table>
</div>This should work seamlessly for you.
Appreciate your attention.
Consider the following:
width: 15%;
If the text in a column is too lengthy, you may want to explore the option of utilizing the substring function
OR you could attempt removing the white-space: nowrap; property from the styling of the first div.
To achieve this design, apply
box-sizing: border-box; min-width: 300px;Hope this solution suits your requirements. :)
table td {
box-sizing: border-box;
min-width: 300px;
}<div style="overflow-x: auto;white-space: nowrap;">
<table border="1">
<tr>
<th>Room Type</th>
<th style="width:300px;">Product Type</th>
<th>2019-11-14</th>
<th>2019-11-15</th>
<th>2019-11-16</th>
// Remainder of the code continues...
</tr>
// Additional table rows continue...
</table>
</div>I'm having trouble figuring out how to display a total price after a selection is made. My goal is to take the selected value, multiply it by 100, and then use the updateTotal function to show the total. // Gather Data & Prices for Updating Dynamic P ...
With two images available, I need to display one image at a time based on an input regex pattern. Here is the code snippet: <input type="password" ng-model="password" placeholder="Enter Password"/> <img src="../close.png" ng-show="password != [ ...
Encountering an issue while attempting to display a Google calendar in a webview, an error is displayed: [INFO:CONSOLE(0)] "Refused to display 'https://accounts.google.com/ServiceLogin?service=cl&passive=1209600&continue=https://www.google.co ...
I am currently working on a basic webpage that will showcase a list of disciplines. When a discipline is selected, relevant information will be displayed below. The code snippet available here demonstrates the functionality I am aiming for. However, I hav ...
Hey there! I'm trying to extract the URL value of an iframe on this website: I've checked the view page source but couldn't find the iframe. Looks like it's loaded after the page is fully loaded through JavaScript. Could it be that ...
I am still getting the hang of using Bootstrap 4 and I'm trying to make sure the dropdown fits inside a div. I've come up with the following code using Bootstrap 4 to try and achieve this, but it's not working as expected: <div class="p- ...
I'm having trouble adjusting my page to fit the resolution of the screen. The image I'm using is 1920 pixels wide, but it's extending beyond the window. Click this link for the code and images: index1.html and style1.css are not needed. < ...
Recently diving into the world of Nodejs and mongoDB, I am excited to create two distinctive pages: one for users to update their account details such as profile picture, email, and name - all of which would be saved into the database; and another for re ...
I am currently working on developing a user-friendly recipe app with Node/Express. Users are able to access a 'new recipe' HTML form where they can easily add as many ingredients as they desire by clicking the 'add ingredient' button. U ...
I am currently in the process of updating a row on Parse using PHP and have created the following function: if (isset($_GET['updateHistory'])) { updateHistory($_GET['updateHistory']); } if (isset($_GET['ye ...
I need assistance in merging 24 images with single dashes highlighted into a base circle image using PHP GD, JS or CSS. All images are in PNG format. Your help would be greatly appreciated. ...
I am facing difficulties importing Bootstrap features such as modal in a Vue component that uses installed packages like bootstrap, popper.js, and jquery. I am working with nuxtjs for this project. Unfortunately, when trying to import these features, I en ...
Hey there, I'm facing an issue with creating a sidenav next to a div containing paragraphs and images. I can't seem to make both the sidenav and the other div appear inline. If anyone has any insights on how to solve this problem or spot what I&a ...
Currently, I am using the following code to change the class of elements on touch: ontouchstart="$(this).addClass('select');" ontouchend="$(this).removeClass('select');" I was wondering if there is a more efficient way to achieve this ...
Currently, I am working on transitioning a website that I created in the Atom text editor to an ASP.NET environment. To adhere to best practices, I have decided to implement the MODEL VIEW CONTROLLER design pattern in this project. While attempting to ad ...
<ul style="text-align: center;"> <li style="margin: 0; padding-bottom: 23px; font-size: 32px; vertical-align: middle;"> <div style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px;">[%code1%]</ ...
I am currently working on a website: When I try to schedule a visit by clicking the link (located in the lower left side of the white area in the center of the page), a form is supposed to open in a modal window. However, when I click on the text box ask ...
Currently, I have a text input that is centered horizontally when typing text. However, I want it to be positioned at the top instead. See the following code: height: 143px; width: 782px; font-family: 'Roboto Mono'; background: #FFFFFF; border ...
My objective is to include a "Read More" link alongside a text block, which should appear next to the text without forming a new line or block. The challenge lies in the fact that the content of the text block is created using TinyMCE, resulting in various ...
Currently, I am facing a task where I have a table with a column filled with textboxes. My goal is to eliminate the textboxes using jQuery/JavaScript while retaining the values within them. Here are a couple of methods I have attempted: // removes both t ...