I'm having trouble making a HTML table behave. It's a wide table, about 44 columns, and it's OK if it stretches way off the user's screen to the right (I want it to).
I'm trying to give each of my columns one of three widths by giving each table header one of three classes:
.c_th_small {
width: 60px;
}
.c_th_medium {
width: 100px;
}
.c_th_large {
width: 500px;
}
I put one of these three tags into my table header cells. But they only size my columns if I give my overall table a Width attribute. If I make my table really wide then these work, but they fight with the table width.
My question is, can I just tell each column how wide it should be and let that force the table to be as wide as it needs to be? I really don't want to set a width for my table, I just want it to be as wide as all the columns put together. This works fine for smaller tables, but this big table seems to resist becoming wide enough.
It sounds like you need to use the CSS rule
table { table-layout: fixed; }
This tells browsers to use the widths of the cells of the first row to determine column widths, instead of also taking account the contents of ther cells.
Related
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've got a fixed width table ( style="width: 100%" ) with dynamic data being placed into the cells. The data varies greatly in terms of width, and some strings exceed the length of the table without spaces. Therefore, I've used table { table-layout:fixed; word-wrap: break-word; } to wrap the text in the columns, and keep the table from exceeding the page width.
However, this results in equally spaced columns, which is not an optimal use of the space of my table, resulting in some cells that are wrapped two or three times, and others that have one word in all that space.
Is there a way to keep a maximum table width, break words, and utilize the browsers layout optimizations for variable width columns?
If you have a column that you always expect to be larger than the others, you should indicate with e.g. <td width="40%">. Also, if there is a column which will always be small, you can set a width to that as well. The more clues you give the browser, the better the layout will look.
I've got a HTML table that has four columns of data, retrieved from a SQL database. The table is styled with CSS to be the full width of the page. The first and third columns are of a fixed size. I want the other two columns to change size with the table but for the two variable width columns to always be the same size.
I've used these styles for columns 1 and 3 (the fixed widths) and the table:
.column1
{
min-width: 120px;
width: 120px;
}
.column3
{
min-width: 140px;
width: 140px;
}
.mytable
{
width: 100%;
}
I haven't set any styles for the two variable width columns. I find that in Firefox the table works as expected but in Internet Explorer the two variable width columns change size depending upon what text is present in the rows.
How can I keep the two variable columns the same width?
EDIT
Not sure if it's worth mentioning but some data crosses multiple columns with colspan="3". This isn't alwyas the case though and the table sizes in the same way whether such a row is present or not. The intention is to create a layout that matches that of a form in Microsoft CRM 4.0. A mix of four columns and two columns (colspan=3 on second column) and rows that can vary in height. It also means that this only needs to work in IE.
Since the width of your table is defined as a percentage, you might consider making .column1 and .column3 a percentage as well. This will then help you define the widths of the two remaining columns.
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%;
}
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.