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...
Related
A simple question but large impact on appearance.
I want text indented from cell border and have tried style=text-indent: 4px (not formatted so it displays properly here) but while the first line is indented, the lines after the <br> tags are not indenting. Please help. I need to use div because of some Javascript. Here is flawed code:
<td>
<div id="navbar" style="text-indent:4px"><b>View by:</b><br>
Popular<br>
Trending<br>
</div>
</td>
text-indent is only supposed to touch the first line. Use margin (or margin-left or padding or etc) if you want to adjust the entire block.
Try adding paddding to element, that holds your text you want to indent.
<td style="padding:5px;">text</td>
I have a table like this:
<table>
<tbody>
<tr>
<td>someArg:String</td>
<td>–</td>
<td>This is a description about this argument.</td>
</tr>
</tbody>
</table>
The table is set to 100% width using CSS and is dynamic based on the browser width.
When the third cell has a small amount of content, the first cell will all be on one line. However, when the third cell contains a lot of content, the first cell will crumple up and may look like this:
someArg:
String
I want to ensure that the content of the first column always stretches its cell to fit perfectly (for the widest first cell in the table obviously, not individually).
From here I just want the final cell in the row to use up the remainder of the table's 100% width.
How can I achieve this?
Here is a fiddle for more explanation: http://jsfiddle.net/8CHMv/
I would add a class to the td that you want to be one line and add
.myClass{
white-space:nowrap;
}
Add the nowrap element to your HTML TD tag.
<td nowrap="nowrap"> from http://www.w3schools.com/tags/att_td_nowrap.asp
Perhaps set the white space: nowrap property in CSS in the first to as a CSS class?
Details on the nowrap here http://www.w3schools.com/cssref/pr_text_white-space.asp
There are two ideas:
If the content of the first column is almost the same, just give a fixed width to the first column. and leave the third column have no width set.
If the content of the first column has big difference, set
white-space: nowrap;
with css to it.
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).
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 />.
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>