In a table of mine I have the table header, th which have two separate links in each cell. Each of them wrap to a new line which I don't want. If I remove all the style sheets it doesn't fix it. If i disable style sheets in the browser it fixes it but there are no inline styles that would cause the wrapping. If they are non-hyperlinked words they don't wrap. If I use the td tag it doesn't fix it either. There is too much code all over the shop to post but all I want is in a th cell a word with an image next to it with a different hyperlink.
Here is a quick bit of code. Although doing nowrap does work in this quick look it doesn't work in the actual code for some reason.
<table>
<tr>
<th>Time:</th>
<th style="width: 8%">
V505(2)
<img src = "images/information.png" width = "25" height = "25" border = "0"/>
</th>
<th>Time:</th>
</tr>
</table>
Any reason why you can't do a white-space: nowrap;?
Have you tried setting the width to a measure instead of a %? With no width specified on the Table, the browser might not be sure what 8% means (unless of course, these are specified in some styles).
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 have a <table> in an HTML template, in which I want to space cell only horizontally. I have tried using <div>s is not an option as email clients are harsh on styling. Using cellspacing spaces cells equally vertically, which is unwanted.
I am open for dropping table and use divs or any other tag, I couldn't find any. I basically have only two cells (and only one row) in the table, and want to space them away.
Is there any way of doing this?
I found a way of doing this. I just added another <td width="40%"> and it worked.
Css can achieve it:
<style>
td
{
padding-left:70px;
padding-right:70px;
}
</style>
Or if style tag doesn't work here is the inline CSS to do the same-
<td style="padding-left:70px; padding-right:70px;">
Demo
Here is a page that I have a problem with:
http://musdesigns.com/invoice/guest/view/invoice/3810b25e7b5c22afe2a33a16974732f4
As you can see, the item name field has a huge margin on the right.
Any idea how to fix this?
I would like it to have a small margin similar to the other fields.
You have to provide specific width for the second "td(column)" or do it for all.
If wish to do only for second "td(column)", then you can do like this also.
<td style="width: 40%;">Item</td>
or
table td:nth-child(2){width:100px;}
or make a class and provide it width and place it on every td
On your <th>Item</th> you can set the width using CSS.
Like:
<th style="width: 40%;">Item</th>
I have a table column in which, a checkbox is followed by a label. A sample HTML code is :
< td class = "namecell" >< input type="checkbox" class = "checkboxclass" value="cs1" /> < label class = "celllabel" id = "nlcs1" >lable data < /label> < /td>
However in IE the checkbox and the label are not aligned in the same line. The label goes into next line this is affected the look and the overall alignment of the page. However this isn't a problem with other browsers like Firefox and Chrome.
I tried specifying width and height but couldn't solve the problem. I basically want both the checkbox and the label to be on the same line.
Does anyone has previously faced such a problem. Help needed.
In general a non-breaking space suffices somewhat.
<td class="namecell"><label
class="celllabel"><input type="checkbox" class="checkboxclass"
value="cs1" /> lable data </label></td>
Two ways that work:
Use the attribute nowrap="nowrap" (or just nowrap when not using XHTML) in the td tag.
Wrap the contents of the td element inside nobr markup:
<td ...><nobr>...</nobr></td>
Someone might complain that nowrap has been deprecated and that nobr is nonstandard, but they are tools that actually do the job. In this case they both seem to work, but in general, nobr works in some cases where nowrap doesn’t.
Using (or an actual no-break space) doesn’t help. In fact the checkbox and the label may get displayed on separate lines even when no space intervenes, unless you use the methods mentioned.
Using white-space: nowrap in CSS (on the td element) should help by the CSS 2.1 spec, but it does not work in practice.
The problem appears only when there is something that prevents browsers from expanding the cell width to accommodate its content on one line. This might be a width specification, for example. Note that forcing the checkbox and the label on the same line may cause the with specification to be overridden.
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 />.