I am trying to achieve the following table layout:
Third column fits to content in the cells.
The last one is fixed to 100px.
The two first columns share the rest space with the proportion.
Related
I want to resize the TableWidget's cell to have different width instead of having the same width for all columns...
I've tried to use ui->tableWidget->setColumnWidth(4, 10); and give the fourth column a fixed width but this has done no effect as you can see in the photo below:
I am retrieving some data where the number of entities is variable and are displayed as columns in my table. I wish to have fixed widths for all the columns. But when I try to do this, I find that the widths are not obeyed, and each column is stretched as per available total space.
Example sandbox:
https://codesandbox.io/s/frosty-sid-ceugx?file=/src/App.js
But just by removing the column width on a single table, I am able to get all the other columns to obey their widths, and only this one column now keeps stretching.
Example sandbox:
https://codesandbox.io/s/sweet-flower-wuq2b?file=/src/App.js
How can I enforce widths on all the columns, and not have the table stretch the entire width? Do note that I would like to avoid specifying total table width as this is variable based on the data being loaded.
Solved this. Set style={{ width: "auto", tableLayout: "auto"} on the 'Table' tag.
Demo:
https://codesandbox.io/s/hungry-surf-vb4ts?file=/src/App.js
My Bootstrap page begins with a single row with two columns. In the first column there is some text content that varies in size. The right column will have a background image and the text in that column will always be about the same size. I want the right column to stretch to always be the same height as the left column and to also stretch when the user resizes the window so much that the right column becomes its own row beneath the left column. May I ask how to do this?
If you are using Bootstrap 3 and you don't want to use flexbox or Bootstrap 4, have a look here:
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
It's pretty robust, just add classes for the row and desired columns (I usually use row-md-height and col-md-height, for smartphones it's usually not needed.
I'm trying to build a three-column page with a fixed-fluid-fluid layout and equal column heights.
I found this:
http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-32-fluid-fluid-fixed/
it got me most of the way, but the columns aren't equal height.
I've also tried using CSS tables and it works except when scaling, the columns overlap.
Any ideas?
Edit: I was able to make this work just fine using CSS tables. I preferred that method for making the columns equal height anyway. The overlapping columns, it turns out, was a result of some floated content in my fixed left column. When I removed the float, the page scaled fine.
I have a complex table layout (jsfiddle). This is a long report with many sections and each section has a table in it.
The first two columns of the tables should have a fixed width to make sure they align nicely.
The third column should grow to fit the text inside of it without wrapping (it's always a single word).
The last column should always fill the remaining space.
When I just specify the widths of the first two columns and give the last column 100% width, then the last column fills the available space (good) but the widths of the first two columns are ignored.
When I give the table table-layout: fixed;, then the width of the first two columns works but the last two columns occupy the same screen space since I can't give the third column a fixed width.
Is there a solution for this?
Note: The solution doesn't need to work on IE! FF 12+ and Chome 21+ is enough.
Specify a general table with (e.g. '100%'). Then you only need to specify the widths of the first two columns. Therefore the two others behave like desired.
Here is the fixed fiddle.
In a nutshell:
Remove td.type { width: 100%; }
Add width:0.1em; to td.name