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;
}
Related
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 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.
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%;
}
Currently the table is too wide and causes the browser to add a horizontal scroll bar.
CSS:
table {
table-layout:fixed;
}
Update with CSS from the comments:
td {
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
}
For mobile phones I leave the table width but assign an additional CSS class to the table to enable horizontal scrolling (table will not go over the mobile screen anymore):
#media only screen and (max-width: 480px) {
/* horizontal scrollbar for tables if mobile screen */
.tablemobile {
overflow-x: auto;
display: block;
}
}
Sufficient enough.
If the table content is too wide (as in this example), there's nothing you can do other than alter the content to make it possible for the browser to show it in a more narrow format. Contrary to the earlier answers, setting width to 100% will have absolutely no effect if the content is too wide (as that link, and this one, demonstrate). Browsers already try to keep tables within the left and right margins if they can, and only resort to a horizontal scrollbar if they can't.
Some ways you can alter content to make a table more narrow:
Reduce the number of columns (perhaps breaking one megalithic table into multiple independent tables).
If you're using CSS white-space: nowrap on any of the content (or the old nowrap attribute, , a nobr element, etc.), see if you can live without them so the browser has the option of wrapping that content to keep the width down.
If you're using really wide margins, padding, borders, etc., try reducing their size (but I'm sure you thought of that).
If the table is too wide but you don't see a good reason for it (the content isn't that wide, etc.), you'll have to provide more information about how you're styling the table, the surrounding elements, etc. Again, by default the browser will avoid the scrollbar if it can.
table { width: 100%; }
Will not produce the exact result you are expecting, because of all the margins and paddings used in body. So IF scripts are OKAY, then use Jquery.
$("#tableid").width($(window).width());
If not, use this snippet
<style>
body { margin:0;padding:0; }
</style>
<table width="100%" border="1">
<tr>
<td>Just a Test
</td>
</tr>
</table>
You will notice that the width is perfectly covering the page.
The main thing is too nullify the margin and padding as I have shown at the body, then you are set.
Instead of using the % unit – the width/height of another element – you should use vh and vw.
Your code would be:
your table {
width: 100vw;
height: 100vh;
}
But, if the document is smaller than 100vh or 100vw, then you need to set the size to the document's size.
(table).style.width = window.innerWidth;
(table).style.height = window.innerHeight;
Set font-size in viewport-width-related units, e.g.:
table { font-size: 0.9vw; }
This will make font unreadable when page is too narrow, but sometimes this is acceptable.
Put the table in a container element that has
overflow:scroll;
max-width:95vw;
or make the table fit to the screen and overflow:scroll all table cells.
There is already a good solution to the problem you are having. Everyone has been forgetting the CSS property font-size: the last but not least solution. One can decrease the font size by 2 to 3 pixels. It may still be visible to the user and for somewhat you can decrease the width of the table. This worked for me. My table has 5 columns with 4 showing perfectly, but the fifth column went out of the viewport. To fix the problem, I decreased the font size and all five columns were fitted onto the screen.
table th td {
font-size: 14px;
}
For your information, if your table has too many columns and you are not able to decrease, then make the font size small. It will get rid of the horizontal scroll. There are two advantages: your style for mobile web will remain the same (good without horizontal scroll) and when user sees small sizes, most users will zoom into the table to their comfort level.
I want to create a diagram using HTML. I used a table with fixed with columns. Everything looks well, but if the content of the a cell is too long, the column width is expanded. I would like the column width to remain fixed, even if some of the content is hidden.
Is there a way to do so?
Try...
table {table-layout: fixed}
in your stylesheet.
This forces the browser to use the fixed table layout algorithm...
Fixed table layout algorithm:
The horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells
Allows a browser to lay out the table faster than the automatic table layout
The browser can begin to display the table once the first row has been received
(See http://www.w3schools.com/Css/pr_tab_table-layout.asp)
In addition to #barrylloyd's answer, I'd suggest also using:
td,th {
min-width: 3em; /* the normal 'fixed' width */
width: 3em; /* the normal 'fixed' width */
max-width: 3em; /* the normal 'fixed' width, to stop the cells expanding */
}
The min-width might be unnecessary, but it covers all the bases.
How about CSS to address it:
td { overflow: hidden; }
Should probably be enough.