I have html code like this
<tr class="odd">
<td><b>Reason for Termination:</b></td>
<td>this has bunch of reasons like reason 1, reason2, reason3, reason 4, reason 5 etc</td>
<td></td><td></td>
</tr>
I want the second TD tag to have some sort of predefined word break. so that when the page is loaded there would be an 'end of line', so to speak, after, say, reason 2.
can html be used here?
Edit:
I am not referring to <br>. The content loaded into the tr tag is coming dynamically so I wont know where to put the 'br'. I am looking for a way to cut off the text at a given width so that it rolls over to the next line
You need the <wbr/> tag. It suggests to the browsers where you would like a break to occur. You can insert it anywhere you like, and the text should wrap on that position.
Style the second <td> with a width.
<tr class="odd">
<td><b>Reason for Termination:</b></td>
<td class="reason_width">this has bunch of reasons like reason 1, reason2, reason3, reason 4, reason 5 etc</td>
<td></td><td></td>
</tr>
and
.reason_width { width: 300px; }
This will wrap the second <td> at 300 pixels.
Are you talking about line break?
<br />
Also if you specify a width to that column. It should wrap accordingly.
You should set the width of the td containing the words to a specific size using css.
The only way to break a line before it gets to the end of the table cell is to use a <br /> tag.
Since you don't have control over the content, this is impossible to achieve.
As an alternative to the <wbr /> tag you can also wrap the text that needs to stay together (for example the individual reasons) in spans and give the span a
span {
white-space: nowrap;
}
The tag is used for line breaks, as you can see.
That is, the <br> tag.
Also, depending on which type and version of HTML you are using, you may need to use <br />.
Related
I have a table which is OK in web pages, but when printing my table (ctrl+p) it breaks not the way I want. The last row of the first page splits with the part of the row on the first page and the other part of the row on the second page. So, is there any way to overcome the problem, the rows can have different content and size. I also tried this properties
page-break-before/after: auto. page-break-inside:avoid;
but with no result. Is there any way to break the table and move the part of the table to the next page without splitting the last row into two parts for print media? Any help will be appreciated.
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
th,td
{
padding:5px;
}
</style>
</head>
<body>
<table style="width:100%;">
<tr>
<th><span>Firstname</span></th>
<th><span>Lastname</span></th>
<th><span>Points</span></th>
</tr>
<tr>
<td><span>Jill</span></td>
<td><span>Smith</span></td>
<td><span>50</span></td>
</tr>
<tr>
<td><span>Eve</span></td>
<td><span>Jackson</span></td>
<td><span>94</span></td>
</tr>
<tr>
<td><span>John</span></td>
<td><span>Doe</span></td>
<td><span>80</span></td>
</tr>
/*here I have many <tr> elements*/
</table>
</body>
</html>
If I understand correctly, you want your table to break only between rows and not within them. You can accomplish this in Firefox and Internet Explorer with the following css rule:
tr {page-break-inside: avoid;}
Unfortunately, that doesn't work in other popular browsers, such as Chrome.
As has been suggested, you can prevent page breaks within the content of an individual cell by wrapping it in a div that has "page-break-inside: avoid;" set on it, but if the content height varies within the row, you'll still end up with parts of the row on two different pages.
If you really want to solve this problem and are willing to throw some javascript at it, I have posted a solution here that should do the trick.
You can request a page break, which will be invisible on the screen, but will force the element to a new page when you print. But the rules are more subtle than you might expect.
The CSS property page-break-before:always can only by applied to a block element. Not an inline, or anything odd like a table-row or a list-item. So do not style the row or cell, nor even a <tbody> or a <br/>. And it cannot be an element that the browser is allowed to omit, so you cannot just throw in an empty <div> with the style on it. One has to add a <div> or <p> around the first cell contents, for instance, to give the style.
Likewise page-break-after:always can be applied to something similar at the end of the previous row. I find this totally annoying, as what I always want to protect is a row, or a grouping.
Some browsers may also want you to change the style of your table to page-break-inside:auto, as the default style for a table is often already page-break-before:avoid.
Since it is the default style, adding it does not help. The browser is already avoiding breaking your table as much as it is willing to. But failing to remove it easily makes the other options useless, especially in Chrome.
I'd like to have three cells in a table select the appropriate checkbox when you click on them, so I wrapped them with a label tag.
<table>
<tr>
<td>
<input id="input_id" type="checkbox">
</td>
<label for='input_id'>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
</label>
</tr>
</table>
Unfortunately this broke the click functionality. Normally when you click the text in a label it toggle the check, but this doesn't work with wrapped elements. Any ideas why? Should it, or is there some reason this is a bad idea?
Interestingly, it does work if I use three separate labels around the cell contents with the same 'for' attribute....
It's a bad idea to write invalid mark-up as per your example. The only element that should wrap a td is a tr.
As it stands, your example won't break the click functionality, because the td tags will be discarded by the parser.
However, if the example was inside a table and tr element, then the input and label elements would be moved to before the table, and therefore wouldn't be wrapping either the tds or the "stuff" text (which stay inside the table), so clicking on that text will have no effect.
I have been using the page-break-after command to break an html report after each "grouping". My problem is it is now leaving my table floating in the middle of the page. Each page is different where it puts the table, sometimes at the top of the page, sometimes in the middle and sometimes at the bottom. There is quite a bit of complexity in the HTML so I decided to take an image instead:
I will try to sum up the html
<body>
<table>
<thead>
{this is top bold box on each page}
</thead>
<tr>
<td>
<table> {this is the results table}
<thead>
{this is the headers of the "floating" results table}
</thead>
{tr's of data here}
</table>
</td>
</tr>
</table>
</body>
we are using display:table-header-group to get the table headers to show up on each page. Can you help me figure out what I need to do to get those tables to be at the top of the page? (this is in IE8)
Impossible to tell from the information provided. Obviously, a CSS issue but can't tell where to begin. Common problems are the display CSS not completely accounted for in the print CSS and, using display:none; on an child element inside of a div tag that has height defined (removes the content but the space is still there.) The latter is what I suspect. I've found adding background colors to various elements very helpful in debugging CSS problems such as yours.
How to stop text from make the table width longer and
make a new line instead.
Set a table width:
<table width="50%">
...
</table>
Width is also applicable to <td>.
Other than that, you may also want to take a look at CSS.
Use a
<br>
when you want to break the line...
I have something like this:
<table>
<tr>
<td><nobr>hello</nobr></td>
<td>this column can contain a lot of text, for some rows</td>
<td><nobr>world</nobr></td>
<td><nobr>hello world</nobr></td>
</tr>
... more rows to come
</table>
Basically 3 of the columns have very short text, and I want them to be <nobr>. The other one can have very long text, and I want it to take all the remaining space. But what happens is that the table gets bigger than the whole browser window to accommodate the big column. If the text is really big it will eventually break, but it still gets quite a bit outside the window.
I tried setting width, max-width, but no luck. What am I doing wrong?
Your example definitely behaves well as Zyphrax says.
The problem you report can only happen if, in the long column, there is a word which is very large or the content has no whitespace in it. Is that the case? May be you are using instead of spaces, and it is preventing the normal wrap that browsers do automatically.
If the text in the column is not wrapping at all, mostly you are using or you forgot to close a <nobr> somewhere.
Not sure if that helps.
I just threw this into my browser (tried both IE8 and Firefox). It stayed well within the Browser window:
<html>
<body>
<table>
<tr>
<td><nobr>hello</nobr></td>
<td>this column can contain a lot of text, for some rows.</td>
<td><nobr>world</nobr></td>
<td><nobr>hello world</nobr></td>
</tr>
</table>
</body>
</html>
Otherwise you might want to try tricks like width: 100% or margin: 0 auto; on the table.
You shouldn't be using the nobr tag, it is not a valid HTML tag. Use "white-space: nowrap" CSS instead.
eg.
<td style="white-space:nowrap">your long text</td>