I need to create a table with three columns. The last two columns should adjust their width according to the content they contain, leaving the remaining space for the first column (which has 100% width).
Any suggestions on how to achieve this using CSS? Currently, the right columns have extra space and look awkward. Any ideas?
To ensure the first column takes up the entire width, set its width to 100%. If needed, apply white-space: nowrap to cells in other columns to prevent content wrapping.
For example:
<table>
<tr><td class="first">first</td><td>second</td><td>third</td></tr>
<tr><td class="first">first</td><td>second</td><td>third</td></tr>
<tr><td class="first">first</td><td>second</td><td>third</td></tr>
</table>
using:
table { width: 100%; }
table td.first { width: 100%; }
Alternatively, for modern browsers without IE6 support:
table { width: 100%; }
table td:first-child { width: 100%; }
(allowing you to remove class="first")
I took a unique approach to tackling this issue, offering more detailed insights in another question. Check out my answer here. Here's the gist of it:
To make columns as narrow as possible, simply add the class shrink.
<table>
<tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
<tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
<tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
</table>
This CSS snippet does the trick:
td.shrink {
white-space: nowrap;
width: 1px;
}
Now you can specify multiple columns to have a minimum width while keeping the others dynamically sized (with potential line breaks).
table {
width: 100%;
}
td {
padding: 10px;
}
td.shrink {
white-space: nowrap;
width: 1px;
}<table>
<tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
<tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
<tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
</table>Trying to synchronize two divs while scrolling. Essentially, I have a page scroll and want to fix the second div when it reaches the top. Please refer to the gif icon attached for clarification. You can view my progress so far here. The current issue in ...
Is there a way to restrict the number of characters in an input field based on its width? I have a dynamic input field with varying widths and I would like users to be able to type without their text extending outside of the input boundary. Using maxLeng ...
Imagine you have a horizontal navigation bar coded as follows: HTML: <ul> <li ng-repeat="navItem in totalNavItems">{{name}}</li> </ul> CSS: ul, li { display: inline-block; } The data for the navigation items is fetched from thi ...
I'm currently experimenting with the FLIP! plugin and attempting to load its content using ajax. However, I've encountered a glitch along the way. It just doesn't seem to be functioning properly. While I can observe the post event taking pl ...
As a beginner in html and css, I decided to follow a tutorial on youtube. The tutorial focuses on creating a navigation bar with dropdown menus using html and css. I wanted the names Ria, Kezia, and Gelia to be displayed when hovering my mouse over the Su ...
Currently, I am experimenting with combining ExtJS and Kendo UI - a unique mix that is taking me off the usual path ;) I have managed to render a Kendo Menu onto an Ext JS (4.2.1) generated Ext.form.Panel In case you want to check it out, here's a F ...
I've created a document, but it's not linking to the external CSS file. I have added .css files in my code, but when I generate the document, it doesn't apply the CSS classes. Here is my code: <?php header("Content-type: application/vn ...
I am facing an issue with my JavaScript link There is a hidden input field named "domain" Below is a div with an onclick script: <div id="button" onclick="window.open('http://www.mylink.nl/?domein=' + document.getElementById('domein&ap ...
I want to create a highcharts graph where the width increases as data points increase. Currently, I have: I am using vuejs with highcharts, but it should work similarly with jquery or other frameworks. <div class="col-md-6" style= ...
When I run `document.getElementsByTagName("body")` on omegle.com using a JavaScript console in Mozilla, I'm getting an empty array. Why is this happening? The body tag appears to be present when looking at the page source. Can anyone explain why this ...
My electron app is loading Vue JS 2 from my local machine, but when I attach my el to an element, it completely empties the element and replaces its contents with a Vue JS comment. What could be causing this issue? index.html <!DOCTYPE html> <htm ...
The website I'm working on has a unique design that requires users to scroll horizontally using the Arrow Keys instead of swiping. To achieve this, I must constantly check for overflow in text or elements each time a new page is loaded, and if necessa ...
Looking at the screenshot below, it is evident that the Hangout app has a fully transparent design with background shadow effect applied to it. I have tried various methods in vain, such as applying CSS styling to the "html" and "body" tags of the page, a ...
I have recently started using Bootstraps Glyphicons and encountered an issue while trying to insert text inside a button with a glyphicon icon: <button type="button" class="btn btn-default pull-left" data-toggle="collapse" data-bind="attr:{'href&a ...
As a newcomer to angular 2 material design, I have noticed the primary, accent, and warn classes that apply specific colors to elements. Are these the only styling options available in Angular Material 2? Are there other classes that can be utilized for cu ...
I'm currently working on implementing a file upload feature with the use of Node.js, Vue, and Multer. Below is the Vue.js front-end code: export default { data(){ return{ selected: "How do you want to input the data?", options: [ ...
I am encountering an issue with the JavaScript on my website: $(function() { var $cells = $("td"); $("#search").keyup(function() { var val = $.trim(this.value).toUpperCase(); if (val === "") { $cells.parent().show(); ...
I recently implemented Bootstrap 4.6 into my project. The page I am working on includes both vertical pills and horizontal tabs. While the vertical pills are displaying correctly, I have encountered an issue with the styling of the horizontal tabs when th ...
I have been given a task to create a calculator by tomorrow using Javascript. Unfortunately, I am currently taking a distance course and Javascript has just been introduced in this assignment. While I am familiar with HTML and CSS, Javascript is something ...
Check out this JS Fiddle: https://jsfiddle.net/wqbn6pe6/2/ This is a simple side navigation, but the grid layout is causing the sidebar not to stretch to the bottom even though it's set at 100% height. Any suggestions or solutions? Here's the ...