Develop Reference

How to make cells automatcially go to a new row

I have a table that is 650px wide and I add words to this table...each word is in its own cell.
However if I have too many words then it expands the table.
What I want to do is allow it to limit the X and auto go to a new row or under the current content so it doesn't resize the table.
I thought about calculating the width of each cell using JS..but it says each is 0px as the cells are created programmatically using JS.

Perhaps a table is not the best solution for you, since it doesn't have this functionality.
You could try simple <div>'s, they will wrap, but you could also have a look at the newer, and more advanced, Flexbox. Have a look at the Wrapping section on that page.

I got it work by using
#tGrammar {
display: block;
}
#tGrammar td {
display: inline-block;
}
in CSS
and in JS where is tChoicesMain is table
tChoicesMain.style.tableLayout = "fixed";
tChoicesMain.style.maxWidth = "650px";
tChoicesMain.setAttribute("id", "tGrammar");

Printing a multi-page HTML table with a non-overlapping footer on each page

I've searched tirelessly and although I've found many people asking about this problem, there don't seem to be any consistent solutions.
We have a page on which a user can enter a date range, then press submit to return a table of data. A "print" button exists which obviously prints the generated data.
All browsers seem to be able to split the long table into several pages, as expected. We can also get some predefined footer text to show up on each page by using a footer div with some CSS like this:
.footer {
position: fixed;
bottom: 0;
}
The only problem is that the table rows have inconsistent heights, so on some pages there's plenty of room for the footer, but on other pages the table and the footer overlap.
Things I have tried:
#page {
margin-bottom: 10mm;
}
Adds a margin, but the bottom: 0; fixed position of the footer is now considered to be too high up, i.e. there's still an overlap but with a bunch of space at the bottom of the page. Setting the bottom property to a negative value just makes it appear at the top of the next page instead.
#page {
padding-bottom: 10mm;
}
No noticeable effect at all.
...And that's pretty much all I can think of. What can we do about this? Do we need some kind of custom JS solution to calculate the number of rows on each page and insert a footer manually? There must be somebody who has had success with printing footers; it doesn't seem like an uncommon requirement.

Please try to add this at the bottom of css file or after the last body affecting rule eventually adding also !important:
#media print {
body {
padding-bottom: 10mm;
}
}

There may be a more elegant solution, but you can do this in JS with an algorithm along the lines of:
while there is still vertical room left...
output a row to DOM
measure height of new row and recalc how much vertical room is left
For getting the height of an element, you could take a look at this other answer.
That may seem like a pain, but you'll have a lot of control over your rendering, and it should work fine.

i was having the same problem last day i search for hours to solve it. the solve was
adding these to css.
thead { display: table-header-group }
tfoot { display: table-row-group }
tr { page-break-inside: avoid }
ps: don't add relative position to the table never because it wouldn't work properly.

floatThead and bootstrap downdrop

So I am trying to have a dropdown in a fixed header. floatThead works well for fixing to the top, but the dropdown can only display the elements that fit in the header of the table because of the wrapping overflow:hidden as part of floatThead. Here is a jsfiddle. I tried upping/downing the z-index to no avail. Is it possible or should I get rid of the dropdown? (It isn't all together necessary, but a nice bonus if it could work).
$(document).ready(function() {
$('.sticky-header').floatThead({zIndex: 1001});
});

You could set .floatThead-container to have overflow: visible and use !important to override the inline styling.
div.floatThead-container {
overflow: visible !important;
}
JSFiddle

Page breaks in SAPUI5

What is the best practice for creating specific page breaks in SAPUI5 and is it actually possible?
Classical CSS atributes page-break-after and page-break-beforedoesn't seem to work in my case. For example, I have two sap.m.VBox elements and I attached them a CSS class which specifies page-break-after: always !important;when printing, but nothing happens. If I add
* {overflow-x: visible !important; overflow-y: visible !important;} then it will break and continue to draw the content in next page if it doesn't fit in one page, but it doesn't work in IE.
I have tryed also adding an empty div element that would work as a page break indicator, but still CSS wouldn't do anything. I guess that's because everything in SAPUI5 is put into one content div.

You can solve this by adding an empty element in between.
If you want a break that is 200 pixels high, your page content can look like this:
return new sap.m.Page({
content:[
oVBox1,
sap.m.Panel({height: "200px", width: "100%}),
oVBox2
]
});
ofcourse you might want to set your panel background-color to transparent ;)

The "page-break-after" is ignored because the property display of SAPUI5 views is set to inline-block.
Simply override the CSS style for the corresponding class with a custom CSS and it should work:
.sapUiView {
display: block;
}

Old IE's Not Updating CSS Dynamically

I have a table with some css to hide/show columns. Each td has the classes "column" and "columnX" where X is the column number. The css looks like:
.column { display: none; }
table.show1 .column1 { display: block; }
table.show2 .column2 { display: block; }
The table starts out all hidden and the user turns them on. When this happens, a class is added to table like "show1" or "show2" depending on the column being shown.
This works great in FF, chrome, and IE8. But IE6/7 have an issue where a "column" does not become "display: block". However, if I go in the developer toolbar and toggle the css rule
table.showX .columnX {display: block; }
it works fine. It is like these old browsers do not know to update the table when done via javascript. Also, if I add a class like "show0" to the table to begin with (not in javascript), it works fine in IE6/7.
Any known workarounds for this?

Well, first of all, the correct display value for a table cell is not "block"; it's "table-cell". Now, that's a moot point for old versions of IE anyway, since they don't really understand that sort of fancy stuff.
Now the next problem is the fact that old IE (6 and 7, not 8) have this entertaining feature when initially rendering table cells: if, when the table is first rendered, a column of <td> (and a <th> at the top, if you like) elements is not visible, then subsequent changes to the DOM will never make it show up. It's just stupid that way; in fact I've asked the same question here.
What I've done to work around the problem is drop some JavaScript onto the page so that after the HTML is first rendered, some code can come back and then make the appropriate columns invisible. So long as they start off visible, they can be turned off and back on without incident afterwards.