sir when i insert a long string data the table size comes out of the page as show below.
http://lh3.ggpht.com/_Um0yFxPtzJ8/S0G8dGp1EcI/AAAAAAAAACc/JOJGrM0U-dI/s800/untitled.JPG http://lh3.ggpht.com/_Um0yFxPtzJ8/S0G8dGp1EcI/AAAAAAAAACc/JOJGrM0U-dI/s800/untitled.JPG
should i userd table-layout:fixed;word-wrap:break-word;
as:
table { border-width:1 px; background-color: #ffffff; border-right-color: #828DAF; border-bottom-color: #828DAF; border-top-color:#828DAF; border-left-color: #828DAF; table-layout:fixed; word-wrap:break-word; }
but its nt working???
try this css
table-layout:fixed;word-wrap:break-word;
My suggestion would be to reduce your font size or add a div around your table and add overflow: auto; to it ... so an horizontal scroll bar appears when you have too much content in your table.
As Tommy said, you want to use "table-layout: fixed" in the CSS for your table.
Then you have at least three choices for what to do with table cells that have too much content:
Do nothing - they'll keep going outside their cell.
word-wrap:break-word will break in the middle of a word
overflow:hidden (on the TD, not the TABLE) will cause the rest of the text to be hidden; the user can expose more by making the window wider or decreasing the font size.
Related
can you please let me know if there is any chance to make that the label wraps itself and do not go like in the picture ("Change Change Change..."):
I use "no more tables" here and always get that issue with longer labels - they just do not wrap. I understand that the white-space in css is "nowrap", but if I change it to "normal", everything goes wrong and displays badly. Maybe someone had an issue with this "no more tables" technique and word-wrapping?
More about this script can be fuonde here http://elvery.net/demo/responsive-tables/
That example uses absolute positioning to move the generated content to the start of the rows and is a flawed approach as that means that the content cannot wrap because it will overlap the content in the next row. That's why the nowrap rule is in place to stop this happening.
Instead of absolute positioning you could use display:inline-block instead and avoid the issue altogether.
In the code from here change these two rules as follows:
td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
}
td:before {
display:inline-block;
vertical-align:top;
width: 45%;
padding:0 3% 0 1%;
}
Rough example here:
Updated code as per comments below:
td:before {
float:left;
width: 95%;
padding:0 0 0 1%;
margin-left:-100%;
}
td {
padding-left:50%;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
You need to break the words if they are too long. You can make this in css as:
word-wrap:break-word;
Try it.
The main issue here has to do with sizing one HTML element based on another element. This is something that tables are optimized to do - calculating the height and width of TD elements across the entire table to a uniform size dynamically based on content.
By abandoning tables (via changing the display type of THEAD to "block", effectively making it nothing more than a DIV), you've lost this automatic resizing effect that browsers do for you, as evidenced here:
There's no getting around this. The "No More Tables" approach must make a compromise - use absolute height to mimic the way tables are laid out. You are trying to reintroduce this automatic size calculation, but you can't without restructuring your HTML.
If you want to continue to pursue this path, you'd need to "manually" handle resizing of the TD elements - iterate over the cells of the table and resize them yourself whenever the size of table might have changed. While possible, your Javascript won't be nearly as optimized as the browser and anything you implement yourself will likely be buggy and slow.
I'm afraid the only viable solution is to shorten your label names and accept the need for absolute sizing to get around the lack of dynamic sizing in non-TABLE elements.
One possible solution: show an abbreviated label and then show a longer name in a popup on hover or tap: Tooltips for mobile browsers
I have some HTML tables generated by a program I wrote. I had the width attribute set on all the cells in the first column because I wanted it to stay a specific width. In one of the files, however, it wasn't wide enough, so I figured it was because of a really long entry causing it to shrink to accommodate it. So I changed it to min-width. But now the whole table is expanding past the edge of the screen. What I want to do is have the first column fixed at 80 points wide, but the other two columns to be sized automatically based on their contents. But I don't want the table to be wide enough that you have to scroll horizontally to see the whole thing. Vertically is fine of course, for obvious reasons.
Here's the CSS I'm using (td.time refers to the table cells in the leftmost column, the one fixed at 80 points):
table { border:none; }
tr:nth-child(odd) { background-color:#eeeeee; }
tr:nth-child(even) { background-color:white; }
td { padding:0; margin:0; }
td.stricken { text-decoration:line-through; color:gray; }
td.time { font-family:'Courier New', monospace; font-size:10pt; width:80pt; }
And here's a link to the HTML file that uses that style sheet and has the problem: http://norton1.dyndns.org/tppupdates/heartgold.html.
For those who are wondering, it's a list of everything posted to the Twitch Plays Pokémon HeartGold live updater on Reddit.
I found you problem. It's one of the dummies writing that they "dropped a whole bag of doritos." Scroll down to 6/02/2014 12:32:35AM. That line right there is causing your problems.
Add this to your CSS
table tr td div p {
word-break: break-word;
}
This will break entire words and links and make them not push the table out.
After a couple of days spent struggling with HTML tables, my forehead has a grid of indents which incidentally are a mirror copy of my keyboard.
Speaking of grids, I'd like to know if there's any set of rules regarding <td> size.
Is it all according to the content? Is it affected by other cells in the same row? By the row itself? By the table? Plain ol' CSS?
NOTE: I'm specifically not looking for an answer to a specific question.
I just want to know how the darned height is calculated so I can figure out myself each time what to expect.
Yes table cells follows the content and it's siblings height.
You can say that it's a rectangle split in section, that no matter what it's inside it will always stay as a rectangle.
So even if you add a css height it will ignore it if the text is bigger than the css height.
So pretty much you can expect a dynamic height in most case scenarios.
But still...it should be used to show only tabular data and nothing else. For the rest there is display:table-cell;...
Here is a FIDDLE that you can play with.
Row styling doesn't work in this setting.
first td row: standard
second td row: given a height - note it affects the entire row
third td row: given padding, again affects entire row
fourth td row: given a large font
fifth td row: given large font and padding
CSS
table td {
border: 1px solid black;
}
table tr:nth-child(2) td {
height: 50px;
}
table tr:nth-child(3) td:first-child {
padding: 10px;
}
table tr:nth-child(4) td:first-child{
font-size: 34px;
}
table tr:nth-child(5) td:first-child{
font-size: 34px;
padding: 10px;
}
PS - Use tables only for "TABULAR" data.
I have a strange problem that I'm actually ashamed to admit. See the whole thing here:
http://jsfiddle.net/Sorcy/ng2by/1/
My problem is: the second (very small) table should actually stretch the whole width of the container. When I look at it with firebug it does (therefore the blue box to the right, which is actually the background color of the table), but the rows themselves only stretch as far as they have to to accommodate the content.
Since I don't want a big blue box beside my tables, how do I get this thing to stretch the whole width? No amount of setting width for tablerows has brought me anything, and since I can not know beforehand how many columns my table is gonna have, setting a width for the cells is also out of the question.
Only solution I have so far is writing a small Javascript that goes through the tables, counts the columns and sets the width of each on the fly, but of course I'd like a pure CSS solution much better.
Edit:
As requested, an image of how it is supposed to look:
Direct link for bigger image
I believe the main problem is this:
table {
display: block;
}
If you change the display property for tables, you are basically asking the browser to ignore it's a table and handle it as a regular element, thus leading to unpredictable quirks.
I don't know what you were trying to accomplish but it's possible that you really wanted this:
table {
border-collapse: collapse;
}
This attribute makes it easier to accomplish certain visual designs.
Update #1: A dark line after the last row of the table can be done with this simple style:
table {
/*background-color: #001F66;*/
border-bottom: 1px solid #001F66;
}
Update #2: To get a dark line after the cells of the last row replace this:
table tr:last-child td { border-bottom: none; }
... with this:
table tr:last-child td { border-bottom: 1px solid #001F66; }
On our site we have tables containing data. We like the column widths we get with a normal table, but we like the border-bottom of tds to stretch the entire width of the page like we get with CSS: table { width:100% }, as can be seen on a demo table widths page, which renders like this:
Is it possible to achieve the same column widths as with a normal (non-width-100%) table in a table where the border-bottom stretches the entire width?
And no, td { white-space: nowrap } in combination with an extra width: 100% td (see the link above) is not good, as sometimes the tds are long and so we want the tds to wrap exactly like in a normal table.
We need a solution that works in at least IE6-8 + FF.
Btw, is there a better way (tm) of showing HTML snippets than linking to an external page? I can show just source, but having HTML rendered too is very illustrative.
This was originally posted on Webmasters, but following a suggestion there, I now (re)post it here.
I finally figured it out.
My first few attempts dealt with floating <td>s and <tr>s, but apparently I was on the right track but had the wrong element.
I think what you want to do is to float the <tbody>. The <table> will still be 100% width, so it will stretch the whole width of the page, but the <tbody> inside of it will act as a container for everything else, and floating it will release it from the shackles of the size of its <table> container width.
The downside of this is that you won't be able to use <thead> or <tfoot> elements, because you will no longer have any way to align them with the <tbody> content.
Try this out:
table {
width: 100%;
border: 1px #000 solid;
}
tbody {
float: left;
}
td {
border: 1px #000 solid;
}
You can use the new CSS properties min-width and max-width to bound the columns sizes without setting them explicitly.
To get a proportional version of what would be rendered when the table's width is not specified, I think you'd have to let it render normally (remove your table width setting) and then use javascript to read the column widths and resize.
Pulled this example of using jQuery to syncronize the column widths of two tables from another question:
$("#t1").width($("#t2").width());
$("#t1 tr td").each(function (i){
$(this).width($($("#t2 tr:first td")[i]).width());
})
Should be a pretty good starting point for scaling your column widths.
This is pretty ugly and not exactly what you asked for, but it works in Firefox and appears to get the same gist...
<html>
<head>
<style type="text/css">
td{background-color:blue;}
div{border:1px solid red;position:absolute;width:100%;}
</style>
</head>
<body>
<table>
<tr>
<td>asdf<div></div></td><td>hello blah blah</td>
</tr>
<tr>
<td>lorem ipsum dolor si amet</td><td>testing</td>
</tr>
</body>
</html>
I was looking for a similar answer to this question, however I don't understand what you mean by
And no, td { white-space: nowrap } in combination with an extra width: 100% td (see the link above) is not good, as sometimes the tds are long and so we want the tds to wrap exactly like in a normal table.
But anyway, I found a solution to my problem. Not sure if it can be used here, but it solved my problem. Maybe it can be helpful to others.
I didn't add in another td. I just applied 100% to every last td with content.
So I could add a class to every last td to do that, or I could use the last-child selector to do it for me.
Something like:
table
{
width:auto;
}
table tr td:last-child
{
width:100%;
}