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>
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 want to space the headers above the form unevenly on one line and not really sure what the best way to do this using HTML and CSS. I have used span tags and padding in the past but this works differently in different browsers and does not line up correctly. Im sure there is a better way then wrapping all of the headers in span tags. Thanks so much for your help. I have attached an image of what I would like to achieve.
If you use a table, the cells will auto size to the content in them. Tables are still useful when dealing purely with tabular data. Alternatively, you can assign a class to each header cell to set specific widths.
<table cellpadding="5" cellspacing="5" width="100%">
<tr>
<td>one</td>
<td>this one needs more space and will grow</td>
<td>this guy isn't as long</td>
<td>short</td>
</tr>
Example on JSFiddle: http://jsfiddle.net/JdSy2/
If this is the structure:
<table cellspacing="0" cellpadding="0">
<tr>
<td>I don't need anything here, should I always put a here?</td>
<td>item </td>
</tr>
<tr>
<td>model</td>
<td>one</td>
</tr>
<tr>
<td>model</td>
<td>two</td>
</tr>
<tr>
<td>model</td>
<td>three</td>
</tr>
</table>
How will a screen reader read a blank td? Is it semantically correct?
Semantically correct IMHO would be to keep an empty cell really empty. However, I, too, fill empty cells with s for pragmatic reasons.
As for screen readers, I'll have to make an educated guess: Empty nodes will likely not be read, because HTML consists mostly of whitespace text nodes, which readers ignore, and I assume, that is collapsed to a simple space in reader applications (since non-breaking is a property of visual media).
For rendering visually, one could rely on the CSS table property empty-cells:
table {
empty-cells: show;
}
Semantically, an HTML table is really just an array (matrix) of data, and there’s no reason why a no-break space character could not be treated as data. Whether it really makes sense depends on the purpose, structure, and content of the table. In most cases, there is a better solution. See some suggestion in Empty cells in HTML tables.
On the technical side, the no-break space has width and height, depending on the font, and this imposes minimum requirements on the dimensions of the cell. This may matter, though mostly in cases where the row or the column is used just as a separator, e.g. to create horizontal or vertical line.
Another impact of using a no-break space, as opposite to using a normal space or leaving the cell completely empty, is that it may affect the appearance of borders around the cell and background color and background image inside the cell.
Screen readers differ in the way they indicate empty cells, if at all, and this may also depend on the reading mode. In any case, the user gets no indication of what’s really going on, i.e. what an empty cell (if the emptiness is conveyed to the user at all) means. In visual browsing, the meaning may (or may not) be rather obvious.
Thanks to editors like Dreamweaver this practice became somewhat of a standard, so even if it is not a perfect solution - at least you won't be alone in doing it. Plus it is more compatible with older browser than CSS's empty-cells.
there isn't anything exactly saying you shouldn't use use a blank TD, and it passes when you try to validate.
Although, a more elegant approach would be to use colspan.
i.e.
<tr>
<td colspan="2">item </td>
</tr>
But this will align your content to the left, and you will have to manually (via css) apply styles so the content is aligned where you want.
The good thing about using it with colspans, is that screen readers will read only what's there, and not the empty spaces
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 />.
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...