Why does the CSS property overflow:scroll; not work in <td>, while overflow:hidden; works well?
<table border="1" style="table-layout:fixed; width:100px">
<tr>
<td style="overflow:scroll; width:50px;">10000000000000000000000000000000000</td>
<td>200</td>
<td>300</td>
</tr>
</table>
From the CSS specs1,2, I can't see why.
You have to wrap it in a div, that will work:
<table border="1" style="table-layout:fixed; width:500px">
<tr>
<td style="width:100px;"><div style="overflow:scroll; width:100%">10000000000000000000000000000000000</div></td>
<td>200</td>
<td>300</td>
</tr>
</table>
Firstly provide desired height to td and then Apply "float: left" property to respective "td" you want scrollbar to appear.
I got something from here!
Andrew Fedoniouk wrote:
This is actually my question:
"One technical reason is that the overflow property does not apply to
tables." - why? What is this reason?
I'm no expert, but I believe this is
just for backward compatibility with
legacy table behavior. You can check
the "automatic" table layout
algorithm in the spec. I'm pretty
sure that this layout algorithm is
incompatible with the overflow
property (or, more accurately, the
layout algorithm will never result in
the need for any value of overflow
except 'visible').
Yep, this is why I am asking. Seems like there are no formal reasons
why or should not be scrollable but seems like
UA vendors reached some silent agreement in this area. So is the
question.
The spec agrees with you with respect
to elements. Table cells are
supposed to respect overflow, although
Mozilla, at least, appears not to do
so. I can't answer your question in
this instance, although I would still
guess the answer is still tied to
legacy rendering.
The main thread is here.
<table border="1" style="table-layout:fixed; width:500px">
<tr>
<td style="width:100px;"><div style="overflow:scroll; width:100%">10000000000000000000000000000000000</div></td>
<td>200</td>
<td>300</td>
</tr>
</table>
Related
I'm trying to program a javascript timeline, in which you click on the left column revealing something in the right column. I suppose there are easier ways to do this, but the HTML below looks really really neat.
So the usual way rowspan works is that you have a td that you want to extend down a few rows to complete the table.
<tr>
<td>1942</td>
<td rowspan=2>Something happened</td>
</tr>
<tr>
<td>2017</td>
</tr>
However, what if I want to rowspan upwards, so that the below timeline item fills both rows?
<tr>
<td>1942</td>
</tr>
<tr>
<td>2017</td>
<td rowspan=2>Something else happened</td>
</tr>
I know I can just move them all to the top row and rowspan from there, but I really want to have this nice, easy-to-edit format, with dates and rows right next to each other.
(An idea I had was that if you think of rowspan as analogous to css width and height, there might be something analogous to css left and top (like "table-row"?) you could set, other than actually moving the td's to the tr you want. I don't think that exists, though.)
(also, does anyone know if negative rowspan is defined?)
No, rowspan always works “downwards”. HTML 4 does not explicitly say this, but it is definitely implied, and there is no way to change it. HTML5 makes it explicit, in its boringly detailed (but necessary for implementors) Processing model for tables.
I know this is an old question, but I was looking for this myself and this is the first result on google. After a bit of tweaking, I’ve managed to find a solution:
<table>
<thead>
<tr>
<td>Column 1/<td>
<td>Column 2</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan=2>A1</td>
<!--This cell must be hidden; otherwise you will see a gap at the top of the second column between the header and body-->
<td style=“padding:0px;” />
</tr>
<tr>
<td rowspan=3>A</td>
</tr>
<tr>
<td>A2</td>
</tr>
<tr>
<td>A3</td>
</tr>
</tbody>
</table>
You might have to experiment a bit if you want to have a hierarchy deeper than 2 columns, but I’m confident it’s possible.
I am seeing a different behavior between Firefox and Chrome for the same HTML table.
Firefox: the space between rows are equally divided.
Chrome: the space between rows are NOT equally divided.
Could someone tell me what is going on?
jsfiddle.net
<html>
<body>
<table border="1" width="100%">
<tr>
<td rowspan="3">AAA</td>
<td>BBB</td>
<td rowspan="3"CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/></td>
</tr>
<tr>
<td>BBB</td>
</tr>
<tr>
<td>BBB</td>
</tr>
</table>
</body>
</html>
It's a known rendering issue with Chrome/Webkit browsers.
A user provided a solution here: Table cells bad rendering with Google Chrome/Webkit
You need to use close the tag by using <br/> instead of <br>.
In compliant XHTML, all tags need to be properly closed. In this case, instead of closing the tag with </br>, you use the trailing / to do it.
<br></br>
is equivalent to
<br/>
You would do the same thing with an image element:
<img src="..."/>
Had a similar issue where I get 1px space between rows in Chrome but not in other browsers. It was solved when I added the following in the the CSS.
td{
padding: 0px 0px;
position:relative;
}
The key point is setting td to "position:relative". For some reason it solved the issue. Maybe the same could help in this situation.
What if you close the third <td...
<td rowspan="3"CCC
<td rowspan="3">CCC
I have two tables:
<h3>JVM Garbage Collector</h3>
<table style="width:100%" border="1">
<tr><th>Name</th><th>Description</th><th>Type</th><th>Key</th></tr>
<tr>
<td style="width:25%">PS Scavenge collections</td>
<td style="width:33%">Number of garbage collections by the PS Scavenge collector.</td>
<td style="width:12%">JMX</td>
<td style="width:30%">Object: java.lang:type=GarbageCollector,name=PSScavenge<br/>Attribute: CollectionCount</td>
</tr>
</table>
<h3>JVM Memory Pool</h3>
<table style="width:100%" border="1">
<tr><th>Name</th><th>Description</th><th>Type</th><th>Key</th></tr>
<tr>
<td style="width:25%">Code Cache committed</td>
<td style="width:33%">Committed bytes of the Code Cache memory pool. This is included with HotSpot JVMs, which contains memory used for compilation and storage of native code. It is part of non-heap memory.</td>
<td style="width:12%">JMX</td>
<td style="width:30%">Object: java.lang:type=MemoryPool,name=Code Cache<br/>Attribute: Usage.committed</td>
</tr>
The first one is behaving correctly, but the second one is not sizing according to my widths and I am guessing it's because of the text content within.
Apply the css word-break:break-all to all TD you want to break that way.
See jsfiddle
This is a CSS3 property so it probably won't work on IE6 and 7.
Use css word wrap property at all places. It will break the line if it crosses the specified width.
For more just make a search on net.
I've been building a form all day and doing most of my dev in webkit browsers because of the good developer tools. I went to test in IE and I'm having some really strange results with regards to having 3 columns of divs in a row. I can't seem to find a fix. Has anybody seen this issue before (see link below)?
http://65.61.167.68/form/
I suggest avoiding the use of display: inline-block, since IE 6 and 7 don't implement it properly. In this case, you can solve the issue in FF by changing line 33 of your stylesheet. Remove the display: inline-block and instead, float left.
#paydayForm .row .column
{
float:left;
margin-bottom:5px;
margin-right:18px;
margin-top:5px;
width:170px;
}
No answer to your problem, but for this kind of data it's a lot better to use tables instead of divs. Divs can be useful, but not in this case. Check the following example: http://jsfiddle.net/NtXwQ/
<table>
<tr>
<td colspan="2">amount requested</td>
<td rowspan="2">info<br />text<br />here</td>
</tr>
<tr>
<td>first name</td>
<td>last name</td>
</tr>
<tr>
<td>zip code</td>
<td>city</td>
<td>state</td>
</tr>
<tr>
<td colspan="2">date of birth</td>
<td>social security no</td>
</tr>
</table>
Using CSS you can change the width, height, padding, etc. and create the same style you're using now. In the end a setup like this is also a lot easier to maintain. Using divs to display tabular data will only give you headaches :)
The DOM looks like this:
<table>
<tr>
<td>a</td>...<td>g</td>
</tr>
<tr>
<td colspan="3">
<table>
...
</table>
</td>
</tr>
<tr>
<td></td>...<td></td>
</tr>
</table>
Any idea why this wouldn't work in IE? I tried setting width:auto on the TD holding the inner table, and table-layout:fixed isn't viable because the tabular data is generated dynamically.
What could be going wrong?
Currently, the table only fills the first column, and it will not span.
Update: EXAMPLE
http://stefankendall.com/files/example.html
Use colSpan, not colspan
The only thing that comes to mind is that you may have to fill the columns with something for them to get rendered in IE.
<td> </td>