My HTML table has columns with fixed widths, except for one that I want to expand to fill the remaining space with a minimum width set. I attempted using width: auto, but it didn't achieve the desired result of filling the leftover space.
My HTML table has columns with fixed widths, except for one that I want to expand to fill the remaining space with a minimum width set. I attempted using width: auto, but it didn't achieve the desired result of filling the leftover space.
This method may not be the most conventional approach to coding tables, but it allows you to define the table width and set specific widths for the first two tds while leaving the third td width unspecified: JS Fiddle
<table width="100%">
<tr>
<td bgcolor="blue" width="100">test</td>
<td bgcolor="red" width="100">test2</td>
<td bgcolor="yellow">test3</td>
</tr>
</table>
If you're looking to create a table that adjusts its width based on the content within a min-width container, here is an example to guide you:
Check out this CodePen link for a live demo.
To achieve this effect, set fixed widths for all columns or give them a width of 1px and use white-space: nowrap; to conform to the content width. Next, assign a width of auto to the space-filling columns while setting the table width to 100%.
Here's a simple HTML example:
<div>
<table>
<tbody>
<tr><td>Some Content</td><td>Fill Column</td></tr>
</tbody>
</table>
</div>
For the CSS styling:
div {
display: inline-block;
min-width: 500px;
background-color: lightgrey;
border: 10px solid grey;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid black;
padding: 0 25px;
line-height: 30px;
white-space: nowrap;
width: 1px;
}
td:last-of-type {
color:red;
width: auto;
}
Hope this helps! There are numerous ways to achieve your desired outcome, so feel free to experiment.
Apologies for my poor English writing :) I am attempting to float two divs side by side in a fixed position, without using percentages. This code works well on most browsers but is not compatible with IE 6. HTML <div class="right"></div> < ...
Currently, I am delving into frontend development and honing my CSS skills. In my latest project, I have incorporated a mat card which can be viewed in the linked image https://i.sstatic.net/TEDcg.png. Below is an excerpt of my code: <div class=&quo ...
I've been trying to align the text in the excerpt of a widget called "To-Do List" on the left sidebar. I attempted to set the text-align property to left for the excerpt text, targeting the p tag within the .widget_ultimate_posts, .uw posts using CSS ...
I'm facing an issue with a layout containing a div that expands to the screen size upon clicking a button. Initially, the div has enough content to necessitate scrolling. However, after collapsing back to its original size, the scroll bar disappears a ...
As a hobby, I have been exploring ways to automate questionnaires that I used to manually deal with for years. It has always intrigued me how best to streamline this process, and now I am taking the opportunity to indulge in my passion and enhance my JavaS ...
Is there a way to adjust the font weight in the header of a Bootstrap 4 modal? As an added challenge, I'm also interested in changing the font color to #7f7f7f... <div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" r ...
I need help creating an XPath to select a div with the class "membername" using the parameter "Laura". <div class="label"> <div class="membername"></div> David </div> <div class="label"> < ...
Issue - ng-model is not generating dynamically. I have dynamic input boxes and I am attempting to create ng-model dynamically like test[1], test[2], etc. However, when inspecting the form with Firebug, all input elements only show - test[shiftnumber]. HT ...
Incorporated media queries in my design to adjust the width of certain elements on the page according to the browser's width. These are the queries I am using: @media screen and (min-width:1024px) @media screen and (max-width:1024px) Chrome, Safari, ...
When using the direction property for a label with windows style directory paths containing backslashes, I encountered an issue. The purpose of using direction:rtl; was to display the end part (file names) of the path. However, I found that I am getting th ...
Currently, I am tackling a project for my course and I am seeking to modify the body's background color on my website randomly by leveraging the setInterval technique in my JavaScript file. Any suggestions on how to achieve this task? ...
I'm working on creating a program that can tally the number of dots on dominoes in an image, such as the one shown here: https://i.sstatic.net/NKHXl.jpg My goal is to develop this functionality using JavaScript. I've attempted to learn how to u ...
I'm curious - is there a way to customize the CSS3 resize property? div { resize: both; overflow: auto; } Basically, I am looking for a horizontal resize with a vertical bar instead of the default handle. Take a look at the images for reference. ...
https://i.sstatic.net/WIBWr.jpg Is there a way to change the cursor behavior during element drag using HTML5 default drag and drop with TypeScript? I have tried various methods like changing from ev.target.style.cursor to "grab" cursor, adjusting dropEffe ...
My goal is to compare the value of a single text box, labeled as "totalmarkstoall", with multiple arrays of text boxes labeled as "marksscored". The JavaScript code below is set up to compare these values using a key up function. The issue I am facing is ...
After creating the FXML structure below, I attempted to define a border in CSS for the Image by using code in the customerform.css file: <VBox id="customerFormPane" styleClass="customerForm" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.exampl ...
I am currently using the ajaxtoolkit:AsyncFileUpload and I'm curious if there is a way to customize the button that comes with it? <ajaxtoolkit:AsyncFileUpload Width="200" ID="filImageUpload" ThrobberID="imgUploadProgress" OnUploadedComplete= ...
Issue with Scroll Functionality in Generic List Component On the main page: <ion-header> <app-generic-menu [leftMenu]="'left-menu'" [rightMenu]="'client-menu'" [isSelectionMode]="isSelectio ...
In an attempt to view all "cards" on the California State Lotto page: There are X draws, each represented by a 'Card': Sample Card <div class="card"><div class="card-header" id="heading-1"><button class="accordion--toggle w-100 ...
I am facing an issue where I have 3 divs with content inside them, and the two smaller ones are aligning at the bottom of the larger div. Despite no presence of margin or padding, this alignment mystery has left me puzzled. body { width: 100% } .cont ...