From below html code I want to show complete table in page without horizontal scrollbar. I want to set html table width fit to screen. there is continuous text in td which I want to break and show in multiple lines such that table width will not go out of page.
For that I used word wrap property but it will not work. Please suggest me possible solution.
Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<table style="table-layout:fixed;">
<tr>
<td style="word-wrap:break-word;">jhdjhfjsjkfhjshdjfhjshfsbfsjkshdfjhsfjsdfdfjsndjkfnjsdnfsdfnsdjfnnsdjfnsdjnfjsdnf,sdnmfksdfsdfsdfsdnfklsdmklfmsdfsd,fsdfsdkfksdnmfnmsdkfnmsdmfmdfmd,.mf,dmf,msd,fm,sdmf,.smd,.fms,dmfms,dmf,s.dmf,.smdf,.smd,fmsdfm,.sdm,f.sdm,f.msd,.fms,.dmf,.sdmf,.sdmf,.smd,.fmsd,mf,.sdmf,.smd,.fmsd,.fm,sdmf,msd,.fms,.dmf,.sdmf,.sdmfsdmfsdf,.sdf,sdfsdfsdfsdf</td>
<td style="word-wrap:break-word;">jhdjhfjsjkfhjshdjfhjshfsbfsjkshdfjhsfjsdfdfjsndjkfnjsdnfsdfnsdjfnnsdjfnsdjnfjsdnf,sdnmfksdfsdfsdfsdnfklsdmklfmsdfsd,fsdfsdkfksdnmfnmsdkfnmsdmfmdfmd,.mf,dmf,msd,fm,sdmf,.smd,.fms,dmfms,dmf,s.dmf,.smdf,.smd,fmsdfm,.sdm,f.sdm,f.msd,.fms,.dmf,.sdmf,.sdmf,.smd,.fmsd,mf,.sdmf,.smd,.fmsd,.fm,sdmf,msd,.fms,.dmf,.sdmf,.sdmfsdmfsdf,.sdf,sdfsdfsdfsdf</td>
</tr>
</table>
</body>
</html>
The table (and by further extension, the cells) has no constriction, meaning it will stretch to fit around the content within it, so there is no reason for your words to be broken.
Try giving your table a width:
table{
width:100%;
}
JSFiddle
To use style="word-wrap: break-word; you have to fix the outer tag width.
table{
width:100%;
}
Related
I have a problem with this one... because it gives me the scrollbar but the height remains the same so the text is covered by the scroll bar...
<td class='messages'><div style='border:0px;padding:0px;width:100%;overflow-x:auto;background-color:#66C2FF;height:' class='messages'>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
</td>
Thanks in advance!
Move your css to an external style sheet and use a conditional comment to target just the browsers you are having a problem with (I have used lower than or equal to IE7 as I cannot replicate in IE8). I have added padding to the bottom.
Live example: http://jsfiddle.net/tw16/Vx9HZ/
Put the conditional comment in the <head> like this:
<head>
<!--[if lte IE 7]>
<style>div.messages {padding:0 0 22px;}</style>
<![endif]-->
</head>
CSS: Moved to external style sheet.
div.messages {
border:0px;
padding:0 0 0;
width:100%;
overflow-x:auto;
background-color:#66C2FF;
}
HTML: Stripped out styling.
<td class='messages'>
<div class='messages'>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
</td>
If I understand you correctly then the following should solve your issue and ALWAYS break a line to accommodate the width if specified. Put this in your style="".
word-wrap: break-word
PS. Also, you have "height:" with no height specified.
This works for me:
<html>
<body>
<td class='messages'>
<div style='border:0px;padding:0px;width:100%;overflow-x:auto;background-color:#66C2FF; height= 50PX; class=messages;'>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
</td>
</body>
</html>
I specified a height for the div that was big enough to show the text and the scroll bar. =) Hope this helps.
I've got a multi-column panelGrid setup, with dataTables as each of the columns. Each of the dataTables is a different length. This results in the panelGrid stretching out to fit the largest dataTable (so far, that's good). The remaining dataTables are centered vertically (this is not good as it looks horrible on screen) instead of being top justified.
How can I tell panelGrid to top-justify contents? Or, is my approach completely wrong and I need to do something different (if so, suggestions are welcome)?
JSF renders as HTML and can be styled with CSS. Inspect the element as follows:
View the JSF page in a browser.
Right-click the page.
Choose View Source.
The <h:panelGrid> renders an HTML <table> element; the <h:dataTable> renders as an HTML <table> element, as well. The data elements are nested inside the <td> element, rendered by the <h:panelGrid>. So, set the vertical-align of the <td> of the <h:panelGrid> to top.
Assuming that the <h:panelGrid> has an id which ends up as <table id="panelGridId"> in HTML, use the following CSS:
#panelGridId>tbody>tr>td {
vertical-align: top;
}
Forms
If the grid is part of a form, then the CSS will need to include the form's ID. For example:
<form id="amazingForm">
<h:panelGrid id="amazingGrid">
...
</h:panelGrid>
</form>
The CSS will resemble:
#amazingForm\:amazingGrid > tbody > tr > td {
vertical-align: top;
}
Example
Here's an example HTML document that shows vertical alignment working within a table configured using CSS:
<!-- language: html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 3547485</title>
<style>#myid>tbody>tr>td { vertical-align: top; }</style>
</head>
<body>
<table id="myid">
<tbody>
<tr>
<td><table><tbody><tr><td>n1a</td></tr><tr><td>n1b</td></tr></tbody></table></td>
<td><table><tbody><tr><td>n2a</td></tr></tbody></table></td>
<td><table><tbody><tr><td>n3a</td></tr><tr><td>n3a</td></tr><tr><td>n3c</td></tr></tbody></table></td>
</tr>
</tbody>
</table>
</body>
</html>
All get aligned to top. Without the rule, all get centered. It's hard to tell what rule exacty you need to apply since it's unclear how your generated markup look like.
Tutorials
See also:
HTMLDog CSS tutorial
CSSTutorial.net
you can use CSS to make the panelgrids to top align.
.mystyle {
vertical-align: top;
horizontal-align: center;
}
include in your xhtml files.
<link href="#{resource['css:style.css']}" rel="stylesheet" type="text/css"/>
and add this code in parent panelgrid.
<h:panelGrid columns="3" columnClasses="mystyle, mystyle, mystyle">
Note:for 3 columns you hav to include it 3 times
You can avoid applying it to every td, only inside panelGrid and datatable inside that.
I had the same problem and the following worked for me:
.pgstyle td{
vertical-align: top;
}
Where pgstyle is the styleClass you give to every panelGrid contains a datatable, like:
<h:panelGrid columns="1" styleClass="pgstyle">
<rich:dataTable ..>
....
</rich:dataTable>
</h:panelGrid>
I am unable to get the borders of these td's to follow their rows as I scroll through this overflow:auto; <tbody>. Any ideas on a fix?
Note: Setting table-layout:fixed or making rows display:block isn't an option as the rows will lose their fluidity..
You can see the issue in the latest Firefox, so I assume it's messed up elsewhere.
Here is a test I setup (scroll to the bottom for the demo):
http://www.webdevout.net/test?01y
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<table>
<thead><th>One</th><th>Two</th><th>Three</th></thead>
<tbody>
<tr><td>Item</td><td>Item</td><td>Item</td></tr>
<tr><td>Item</td><td>Item</td><td>Item</td></tr>
<tr><td>Item</td><td>Item</td><td>Item</td></tr>
<tr><td>Item</td><td>Item</td><td>Item</td></tr>
</tbody>
</table>
</body>
</html>
CSS:
table {width:100%;border-collapse:collapse;}
tbody {height:200px;overflow:auto;}
td {border-bottom:1px solid #f00;}
Also doesn't work in IE. This sums it up nicely: "the overflow property, as defined by CSS 2.1 specification, section 11.1.1, does not apply to table-row-group objects."
There are a couple of workarounds here, as detailed in this recent question on SO. The link from the OP has two interesting solutions, the first of which may work for you if you can't change the output. It basically involves wrapping the table in two divs, setting the inner div to overflow: auto, and absolutely positioning the thead relative to the outer div so it gets pulled out of the inner container.
Not sure why the funky behavior occurs in FF, but a solution is to create two tables and put the second one inside a div.
HTML:
<table>
<thead>
<th>One</th><th>Two</th><th>Three</th>
</thead>
</table>
<div>
<table>
<tr><td>Item</td><td>Item</td><td>Item</td></tr>
<tr><td>Item</td><td>Item</td><td>Item</td></tr>
<tr><td>Item</td><td>Item</td><td>Item</td></tr>
</table>
</div>
CSS:
table {width:100%;border-collapse:collapse;}
div {height:200px;overflow:auto;}
th {width:33%;}
td {border-bottom:1px solid #f00;width:33%;}
I added specific widths to the ths and tds to ensure the columns aligned since they're in different tables, but you might not have to specify.
Currently I'm working on two table columns next to eachother, which contents must be of equal height. Sounds classic, however, the table/row/cells can't be given a fixed height, because it will be different every time.
I've simplified the case to this example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>Test</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>
<body>
<table cellspacing="0" cellpadding="0" style="width: 500px; border: 2px solid blue;">
<tr>
<td style="height: 100%;"><div style="height: 100%; background-color: yellow;">left<br />left<br />left<br />left<br />left</div></td>
<td style="height: 100%;"><div style="margin-left: 20px; height: 100%; background-color: yellow;">right</div></td>
</tr>
</table>
</body>
</html>
So I'd like the yellow blocks to be of equal height, without giving table/row/cell/div a fixed width (relative is fine). I know the table cells can be given a yellow background, but this is a simplified example of blocks that can me minimized, moved, etc., so giving table cells a color is not an option. Use of tables is not necessary, but thought it would be better to illustrate this case.
Thanks for replies!
I'm not sure I understand your problem exactly but - you are giving a height of 100% to the div and it's parent also has 100% - but obviously this won't work since the div and also td has no relative from which to calculate those 100%.
As a solution you could try doing it with faux columns. A list apart has a nice article about it http://www.alistapart.com/articles/fauxcolumns/ .
On an ASP.NET GridView, I have a field that prints a string from the database. This data can range from 10 to 100 characters. When it is longer than normal, the field word-wraps the data, making the row take up more vertical space than the others. I want to truncate any data that does not fit on the row, and then have a "..." next to it to indicate there is more. I don't need to allow them to resize, I just don't want any rows of different height. I'm hoping this can be done dynamically on the client-side, for SEO purposes.
See the ActiveWIdgets Grid here, and resize the company name so that it does not fit. You will notice that it does not wrap the contents, but it instead does exactly what I want to do.
How can I apply this technique to an ASP.NET GridView? I assume some Javascript is involved. If that is true, I would prefer to NOT use a library like jQuery (don't ask why -- I am not allowed to use an external dependency for this project).
Table of contents
Illustration of problem
Illustration of one solution
Illustration of problem
Copy the following HTML into your browsers (at least Firefox and Internet Explorer 7, but you should try Opera too):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
div, td
{
width: 100px;
border: solid 1px black;
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<div>
content content content content content content
</div>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
content content content content content content
</td>
</tr>
</tbody>
</table>
</body>
</html>
Notice that the td element does not hide the overflowing content. Only the div element nows how to do this. Internet Explorer's td element does not even know how to stop wrapping the content.
Strictly speaking, according to the standard, the td element does not support the white-space rule. The div and th elements do.
Illustration of one solution
This is one solution to the problem (Tested in Opera, Firefox and Internet Explorer 7):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
td
{
border: solid 1px black;
}
div
{
width: 100px;
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<div>
content content content content content content
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
If you know your user is using Internet Explorer, you can use the following IE only CSS:
td.nooverflow
{
text-overflow:ellipsis;
}
Then set the ItemStyle for the column you want to fix the width of as <ItemStyle CssClass='nooverfolow'/> (you'll need to play with the CSS to get it right for your application)
Unfortunately since this is IE only, for other browsers, there are some hacks available to simulate the same thing:
Here's one for Firefox.
Here's another for Firefox
Here's one using jQuery