I have a table inside a div with scrollbars.
There are some columns in the table with width defined. Till then table headers are fine.
But when I add more columns to grid the header test gets wrapped which i don't want, instead i want horizontal scroll to come.
Normal :
http://jsfiddle.net/hVRW7/
More Columns :
http://jsfiddle.net/hVRW7/1/
The quickest fix is to wrap <th>'s labels in spans, then give fixed width to them:
<table>
<thead>
<tr>
<th><span>Label1</span></th>
<th><span>Label2</span></th>
</tr>
</thead>
</table>
Then style as:
th span
{
display:inline-block;
width:300px; /* or what you wish */
}
EDIT see fiddle.
Your issue is that you have defined a limit of 1024px to the width of the table and then you are defining new columns with a total width that adds up to 1430px. All browsers are then trying to do their best to make the information fit within the defined width of 1024px. Since in your given example you are just repeatedly defining the same sets of columns are you sure you need all of them? If not you should narrow them down to only the ones needed and then determine your actual overall width. The defined width of the overall table will take precedence over individual widths in determining the maximum width of the table.
Related
I have a table that has the following requirements:
All columns must have variable widths
All columns must not take up more width than necessary
All cells must preserve white-spaces (white-space:pre/pre-wrap)
All cells must wrap when (and only when) exceeding maximum defined width (1000px)
I'm having trouble accomplishing rule #4.
As long as the whole width of the table fits on screen, there's no problem. However, when the available space is exceeded, the browser will do anything to make it fit by wrapping sooner than I intent. Also smaller columns will decrease in width and start to wrap.
CSS:
table {
width: auto;
}
table td {
max-width: 1000px !important;
white-space: pre-wrap;
word-break: break-word;
word-wrap: break-word;
}
HTML:
<table border="1">
<tr>
<td>Small text, should not wrap</td>
<td>Long text, should wrap at 1000px only; [...]</td>
</tr>
</table>
Please check this JSFiddle
I'm using white-space:pre-wrap, because the content must be able to wrap, even though the original data doesn't contain newlines. When I use white-space:pre, the column widths are exactly right, but obviously the content will overflow beyond the cell. I've tried to overcome this by adding overflow-wrap:break-word, but that didn't work..
Apparently there's no pure-CSS solution to this. In the meantime I've found a reliable work-around with a little bit of html and javascript.
I've put a <div> around the table, and gave it a width of number_of_columns * max_column_width, essentially the maximum width the table would have if all columns exceed the threshold.
This results in the table being rendered the way I intended, however this obviously causes a horizontal scrollbar reaching way beyond the rendered table. Therefore I need to reduce the width of the <div> to the actual width of the rendered table.
div.style.width = table.offsetWidth + 'px';
Not very elegant, but it does the job.
I am playing with the table-layout:fixed, it works almost perfectly for my needs. However, apparently I can not have a column of fixed size that won't change when I add or remove columns dynamically from the table.
Here is the example. If you add some columns you can see that the first column shrinks and the checkboxes kind of pop out of the columns. How can I make the first column have a fixed size while keeping the table-layout:fixed behavior on the other columns?
I am using table-layout:fixed because once I add enough columns, it will add a horizontal scroll bar and will guarantee that the columns have at least the width I specified.
You can try a different approach by not using table-layout: fixed and achieve almost the same result. Also, instead of using width property for the <th>, you can define min-width.
Check this updated fiddle: http://jsfiddle.net/L9rudjng/5/. I moved the inline CSS into CSS box too.
The table will maintain the 500px until it can't hold enough <th>'s with 100px width. Then it will expand and force the horizontal scroll.
I'm posting a screenshot of the element in question. You should be able to see, I am applying element-specific styling removing all margin, padding and setting the width to 0px. No matter what I do, this table data element is abnormally large. I want to significantly reduce its width, but it won't listen to me. I have the feeling this is some obscure HTML algorithm that I know nothing of but can't say. Any ideas?
Update: The answer was that HTML will make sure the table data elements take up the entire width of the table, no matter if you try to narrow individual elements (so in essence, it was some weird HTML algorithm or functionality). That said, I will accept the answer below because it is so thorough it should cover the other possible issues people may run into.
There is some obscurity to how the width of a table cell (<td>) is defined, as official documentation is unclear and allows some behavior to be defined by the browser. But here are a few characteristics that appear stable across the spectrum of browsers.
Managing the Width of HTML Table Cells <td>
Table with Single Cell
In a table that consists of a single cell – in other words, a table with one column and one row – where the width hasn't been explicitly defined in the <table> element, the width can be controlled directly by the <td> element.
This won't work (the td rule will be ignored):
table { width: 100%;}
td {width: 300px;}
The width: 300px fails because the <table> element has a defined width.
However, this will work:
/* table { width: 100%;} */
td {width: 300px;}
DEMO
Table Column with Multiple Cells
To set the width of a table cell in a column with multiple cells the entire column must be adjusted. Any widths assigned to the individual <td>s will be ignored. Simply adjust the width of the table to adjust the width of the <td>s in the column.
DEMO
Table with Multiple Columns and Multiple Rows
To set the width of a table with multiple columns and rows, the Table Column Element (<col>) is ideal because it targets individual columns.
DEMO
The problem described in the question involves a table cell that won't accept a shorter width assignment. The first realization here is that the table cell by default expands to fill 100% of the column width allotted (learn more about <td> default width). The way to reduce the width of this cell is described above.
HOWEVER, I suspect that in some cases the person wanting to reduce the width of a table cell is actually trying to reduce the width of the content inside the cell (like an image or a form input). In these cases, adjusting the table may be unnecessary. All that would be needed is to adjust the width of the content itself, or its container (div, span, figure, etc.).
In this image, the width of the table cells are at 100%, but the width of the input fields vary.
DEMO
colspan
If in fact the need is to reduce the width of a single cell within a column of multiple cells, then you may want to consider the colspan attribute. With colspan, columns can me merged making cells wider. Cells without colspan assigned will be shorter, and appear even shorter when their adjacent cells are hidden.
In this image, display: none has been applied to the bottom right cell of this 2-column table.
DEMO
So, in the case of your table cell that won't budge, consider adjusting the width of the <table> element (if it's a single column table), assign and adjust a <col> element (if it's a multi-column table), adjust the width of the content directly (if that's the only element you want adjusted), or use colspan.
Sorry I can't be more specific about the exact solution in your case. No code was provided for review. But hopefully one of these methods helps you out.
Demo
I'm trying to make a table that contains a horizontal scrollbar where the width of any individual row can be set to whatever I want. I've tried two different approaches to achieve this and they each give me problems:
If I assign a width to my table that is larger than its containing div and apply overflow-x: scroll, the table exceeds the width of its container. However, I have no control over the width of my cells. Setting td{width:'x'px;} doesn't do anything.
If instead I apply table-layout:fixed to the table, I can now adjust the width of individual rows but cannot exceed the width of the table container.
How do I get the best of both worlds? I need the table to exceed the width of the container in order to get the scrollbar, while also being able to set the width of different rows to any value.
HTML table and table cells work this way by design - cells will always be confined to within the width of the table. If you want to size them like you do to normal inline-block elements, you can either:
Use <div class="table"> and <div class="cell"> to markup and style tables.
OR
Change the display mode in CSS. {display: block} for tables, {display: inline-block} for cells. You'd probably also need to fiddle with the display modes of other elements like <tr>, <th>, <thead>, <tbody>...
A little note: just in case you are using tables as a means to layout your page content, please stop and strongly reconsider changing your approach. Tables are a nasty crutch for layout, and should really ONLY be used to display actual tabular data.
Set the position: absolute; for the element that you want to exceed it's container width. But also set position: relative; to its parent, so you can adjust the position.
i have a <table> and many (34) <td>.
I want to display three variable cells e.g. "name", "hobby1", "hobby2" and then I need to display 31 cells (for each day).
The width of the <table> is limited to about 1000px.
In the day cells always a string of the length 3 shall be displayed or nothing.
My problem is that, the cells never have the same width even if set with css.
The first three columns may be fixed too.
How can I manage my table, that all day <td>s (1-31) have the same width - no matter if the content is nothing or XXX?
http://jsfiddle.net/sBYdu/
A couple of css additions can achieve this.
Use a fixed table-layout
Apply width to your table header not the table cell
Apply word wrapping to the table cells
http://jsfiddle.net/nnePW/
table {
table-layout: fixed;
}