I'm new to CSS and gave up trying to make my table working - would like to ask for some help.
What I need to do is to display a table occupying 100% of screen width (single row, for example), containing 24 columns (cells). Each cell contains a value of random length. Because of each value is too wide, cell is being extended to display the value (fit the length), and total width of the table exceeds 100% of screen width. I need each cell to occupy 1/24 of screen width and hide characters which does not fit cell width. Of course this should work for resizing this table.
Any ideas how to implement this? I tried playing with
overflow: hidden
but it didn't help much.
Thanks in advance!
Fixed layout
table{
width:100%;
table-layout:fixed;
}
and to hide the data which overflows
td{
overflow:hidden;
}
if you want all table cells same width, apply following property to table
{table-layout: fixed;}
This property is support by almost all browsers. so, you shouldn't worry about it.
Related
I'm trying to create a table e.g. 8 number of columns. It works fine on the desktop screen. However, when trying on a smaller screen or trying to reduce the size of the browser, tds get divided equally and content gets squeezed.
I want to have the min-width of the td to be say 200px. How can we achieve this?
I tried
table-layout: fixed
td { min-width:200px;
}
Apparently, min-width on td does not work.
I also tried putting <td><div style:"min-width:200px"></div></td>
However, this does not work. td's border and the content in the divgets out of placed when doing so.
Is there any idea?
I can use bootstrap 3 as well if that solves the issue.
Thanks.
table-layout: fixed , this attribute (fixed) affects min-width. When I set it to automatic or inherit, and add the style min-width:200px, the td's width will not change when the width of browser's window is shrinked.
I have been trying to force a table to fit in a printable page, regardless of how many items exist and am having trouble doing so. the only way i have found is to change font size but that isn't exactly automatic.
i have found a lot of answers setting with to a specific width, but the vertical side is difficult. I dont want any overflow to occur and resize the text to show all content in that box.
like here
i have been using a setting of 300px wide and 777px tall
Should be as simple as:
table
{
max-height: 300px;
max-width: 700px;
}
table, table * {white-space: nowrap;}
Use in css table-layout:fixed. For more info: https://www.w3schools.com/cssref/pr_tab_table-layout.asp
I'm trying to style a table according to the following requirements and getting nowhere:
the width of some columns must shrink to fit contents.
the width on other columns must divide up remaining available width among themselves.
table width must fill, but not exceed, parent width.
I came up with one approach ... set the shrinking columns width to 1px. That seemed to do the trick until the content of the expanding columns grows and ends up increasing the width of the table to exceed the width of it's parent, which violates the last requirement listed.
Any ideas? I'm broke.
I'm using Compass/Sass hyphenation, which helps with the last requirement (table does not exceed parent width). Works in Chrome perfectly. In Firefox, the table width is just a little too far. This is what my styles look like:
td.id
td.actions {
text-align: right;
/* trick table cells into fitting their content with nowrap and zero width */
white-space: nowrap;
width: 1px;
}
td {
#include hyphenation;
}
Sounds like you are using pixel widths instead of percentages. If you are, try "60%" or another appropriate value. Can you post your code?
td.actions {
table-layout:auto;
}
I would like to know if it's possible, in a table where width=100%, and where each column width are % value, to get for the last column a fixed width?
If yes how?
The short answer would be no, not with CSS in a simple way. It is quite troublesome to mix fixed and relative width for obvious reasons.
There is however a new CSS3 feature calc() that can be used to let the browser calculate the proper width.
Notice Unfortunately it is still just experimental, and has limited browser support.
You could do it using CSS:
#mytable td:last-child {
width: 50px; /* change to whatever you want */
}
If your site requires JavaScript anyway, you could manipulate the width after rendering.
Let the browser render your table with relative column widths close to an ideal but without setting the last one to be fixed.
Read the width of the rendered table.
Subtract the width you would like the last column to have from the table width.
Calculate the width for the remaining columns by percentage using the value from 3. as 100%
Set all column widths programatically
I have a cell that is 10% wide with a couple words in it. When you shrink the window size, the size keeps getting smaller until it matches the length of the text inside and then it stops shrinking. I want it to stay at an exact 10% wide. How do I do this?
Sorry, working with divs is not an option.
This might do the trick:
#your_table {
table-layout: fixed;
}
Tables can (should, as it's up to browsers to implement this) have two types of layouts:
table-layout: fixed: This is the "stupid" table layout. The table doesn't care about its contents and just resizes carelessly.
table-layout: auto: This is the "smart" table layout. The table cares about it's contents and stops resizing cells once the minimum width and height of a cell is reached. This is default table behavior.
Thank you W3C: http://www.w3.org/TR/CSS2/tables.html#propdef-table-layout
It looks like what you really want is a set width. If you say that the table has to be 300px, you can specify that the cell is always 30px. The relative scale is what's causing the problem.
table.myClass{
width: 300px;
}
table.myClass td.myOtherClass{
width: 10%;
}