I made a HTML Table with a fixed left column (the code is a simplified version of another post on SO). When I view this on the iOS Simulator, the right half of the table scrolls correctly, however, it does not display a scrollbar, and it does not scroll with inertia.
Example of Table: http://jsfiddle.net/jakechasan/94aP4/
Here is the basic code:
HTML:
<div id="tableContainer">
<table>
<tbody>
<tr>
<td class="leftColumn">Row 1</td>
<td>efhiubcebucefbuiceguceuceiuceuceu0v8cev8ceserybewqbyuqw0uqr0</td>
</tr>
</tbody>
</table>
</div>
CSS:
#tableContainer {
width: 200px;
overflow-x:scroll;
margin-left:5em;
overflow-y:visible;
padding-bottom:1px;
background-color: yellow;
}
table {
border-collapse:separate;
border-top: 3px solid grey;
}
td {
margin:0;
border:3px solid grey;
border-top-width:0px;
white-space:nowrap;
}
.leftColumn {
position:absolute;
width:5em;
left:0;
top:auto;
border-right: 0px none black;
border-top-width:3px;
/*only relevant for first row*/
margin-top:-3px;
/*compensate for top border*/
}
Does anyone know how to activate inertia scrolling, and display the scroll bar?
I solved this the following way:
-webkit-overflow-scrolling: touch; //adding this line will enable inertial scrolling
Source: http://cooshtee.com/blog/2012/11/add-inertial-scrolling-to-a-fixed-height-div-in-ios/
Related
I have a very simple webpage for homework. The body just consists of various sections div /divbr. The effect is various boxes for each part. Most of my students don't have a computer, they only have a mobile phone. So I am trying to make the webpage display better on mobile phones. I put:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
in the header.
I set all divs to width:95%;
Everything displays nicely on my phone now. The text is a good size, everything is within the confines of the mobile phone screen, no need to magnify with 2 fingers.
EXCEPT my table.
.div-table
{
width:95%;
border:3px;
border-style:solid;
border-color:#FF0000;
text-align:center;
background-color:#32d140;
}
table
{
margin:0 auto;
width:90%;
text-align:center;
background-color:whitesmoke;
border-collapse: separate;
border: 2px solid black;
}
table td {
/*border: 2px solid black;*/
border-style:dotted;
border-width:3px;
border-collapse:separate;
padding: 10px;
}
<div class="div-table">
<p>
<table>
<tr> <td>A watches</td> <td>B cinema</td> <td>C weird</td> <td>D doesn't</td> <td>E like</td> </tr>
<tr> <td>F games</td> <td>G talking</td> <td>H guy</td> <td>I unusual</td> <td>J teaches</td> </tr>
</table>
</p>
</div>
The table spills over its div. You can scroll right a bit to see the last columns. The table was 2 rows of 5 cells. I changed it to 5 rows of 2 cells to get around this now, but I prefer 2 rows 5 columns.
Why does my table not shrink to fit its div? Could you please help me tweak the css to shrink the table?
Basically your table is overflowing, to make it neat and clean you can make it responsive. You can either make the table responsive by adding a horizontal scroll, so users can scroll and see the content. You just have to add following styles in media query, You can see it here
#media (max-width: 767px){
.div-table{
overflow-x: auto;
}
.div-table table{
width: 100%;
}
}
Or, Other option is stacking it vertically which is bit more user friendly, you can see it here
I'm not sure you can confine the table within the div and successfully display it at every resolution.
An alternative solution would be to allow the table to overflow, thereby making it scrollable:
Adding overflow-x: auto; to div-table should work for you:
CSS
.div-table {
width:95%;
border:3px;
border-style:solid;
border-color:#FF0000;
text-align:center;
background-color:#32d140;
overflow-x:auto;
}
.div-table {
width:95%;
border:3px;
border-style:solid;
border-color:#FF0000;
text-align:center;
background-color:#32d140;
overflow-x:auto;
}
table {
margin:0 auto;
width:90%;
text-align:center;
background-color:whitesmoke;
border-collapse: separate;
border: 2px solid black;
}
table td {
/*border: 2px solid black;*/
border-style:dotted;
border-width:3px;
border-collapse:separate;
padding: 10px;
}
<div class="div-table">
<p>
<table>
<tr> <td>A watches</td> <td>B cinema</td> <td>C weird</td> <td>D doesn't</td> <td>E like</td> </tr>
<tr> <td>F games</td> <td>G talking</td> <td>H guy</td> <td>I unusual</td> <td>J teaches</td> </tr>
</table>
</p>
</div>
I am having trouble figuring out what I'm doing wrong... I'm trying to do something that should be simple--change the border color of an entire row when the user hovers over the row.
For the table, I'm using the following CSS code:
.sch{ border-collapse: collapse; width:97%; margin: 0 auto; margin-top:30px; }
.sch tr{ border: 2px solid #000000; }
.sch tr:hover{ border-color: red; }
<table class='sch'>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
</table>
The issue is that, when you hover over the second or third row, the top bar of the border remains black, while the sides and bottom change to red. Only the top row changes to red all the way around.
I suspect that this has to do with the bottom of the previous row somehow covering up the red of the hover, but I've tried about everything--except the right answer---to fix it.
Thanks for your help!
border-collapse: collapse; is a culprit here.
It is related to the fact that the top cell bottom border is on top of the bottom cell top border. If you make top cell bottom border as none then you will see all borders properly being set to red.
Look at this interactive example in MDN to see exactly what happens
https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
This appears to be tricky to implement without JavaScript.
This is a solution using jQuery:
$(".sch tr").hover(function(){
$(this).css("border-color", "red");
$(this).prev().css("border-bottom-width", "0");
}, function(){
$(this).css("border-color", "#000000");
$(this).prev().css("border-bottom-width", "2px");
});
.sch{ border-collapse: collapse; width:97%; margin: 0 auto; margin-top:30px; }
.sch tr{ border: 2px solid #000000; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='sch'>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
</table>
If you want to use CSS and HTML only, you can use such not the best but working solution.
CSS-file:
.sch {
width:97%;
margin: 0 auto;
margin-top:30px;
border-collapse: collapse;
}
tr {
border: 2px solid #000000;
}
.sch tr:hover {
border-color: red;
border-bottom-width: 2px;
}
tr:nth-child(3) {
border-bottom-width: 0;
}
tr:nth-last-child(1) {
border-bottom-width: 2px;
}
HTML-file:
<table class='sch'>
<tr>
<td>Test</td><td>Test</td>
</tr>
<tr>
<td>Test</td><td>Test</td>
</tr>
<tr>
<td>Test</td><td>Test</td>
</tr>
</table>
I'm having some trouble with the positioning of tooltips on a column of data within a table, which itself is inside a vertical scrolling div. A little background for you...
Due to legacy issues which are beyond my control, the page I am developing has to be displayed through an iframe of fixed width and height. The data I need to display has about 12 columns, all of which are required to be displayed. One column will contain serial numbers, which sometimes end up overflowing the bounds of the cell. I've set the overflow of this column to show an ellipsis, and have added tooltips as described in the accepted answer to this question.
When the tooltips are added, it appears to take the distance from the top of the table to the hovered cell, and draw the tooltip that distance from the top of the parent div. This means that, when you scroll down through the div, the tooltips end up being drawn down below the bottom of the div.
I've created a jsFiddle which demonstrates this: http://jsfiddle.net/kuzxLwxe/4/
Here's my css:
.ResultsWrapper {
width:150px;
height:314px;
text-align:center;
overflow-x:hidden;
overflow-y:scroll;
border:1px solid black;
}
.ResultsTable {
width:86px;
border-collapse:collapse;
table-layout:fixed;
}
.ResultsTable th, .ResultsTable td {
border:1px solid black;
overflow:hidden;
text-overflow:ellipsis;
}
.ColumnSerialNo {
width:81px;
}
.hasTooltip span {
display: none;
color: #000;
text-decoration: none;
padding: 3px;
}
.hasTooltip:hover span {
display: block;
position: absolute;
background-color: #FFF;
border: 1px solid #CCC;
margin: 2px 10px;
}
And my html:
<div class="ResultsWrapper">
<table class="ResultsTable">
<thead>
<tr>
<th class="ColumnSerialNo">Serial Number</th>
</tr>
</thead>
<tbody>
<tr>
<td class="hasTooltip">3119985815206<span>3119985815206</span></td>
</tr>
<tr>
<td class="hasTooltip">5665811486586<span>5665811486586</span></td>
</tr>
...
</tbody>
</table>
</div>
I'm using jQuery for other things within the same page, but so far haven't been able to come up with a solution with it. If you think the best way to fix this is by using JS or jQuery I'd love to see the result!
Thanks in advance
Change your HTML markup to take more control on overflow:
<tr>
<td class="hasTooltip">
<div class="SerialNumberContainer">
<div class="SerialNumber">3119985815206</div>
<div class="SerialNumberTooltip">3119985815206</div>
</div>
</td>
</tr>
And in your CSS, remove overflow from td:
.ResultsTable th, .ResultsTable td {
border:1px solid black;
/* overflow: hidden; this line should delete */
text-overflow:ellipsis;
}
And new CSS:
.SerialNumberContainer {
position: relative;
z-index: 10;
}
.SerialNumber {
width: 80px;
overflow: hidden;
}
.SerialNumberTooltip {
position: absolute;
top: 10px;
left: 2px;
background-color: #FFF;
border: 1px solid #CCC;
display: none;
}
.SerialNumberContainer:hover {
z-index: 20;
}
.SerialNumberContainer:hover .SerialNumberTooltip {
display: block;
}
JSFiddle Demo.
I want the header of the first column in my table to be hidden, to get this look:
So I am using the CSS visibility: hidden; to do so. The screenshot above is taken in Chrome, where it works perfectly. However, this happens in Firefox:
How can I make Firefox hide the header of the first column in a table?
EDIT: Here's my table CSS, as requested:
.styledtable{
width:100%;
table-layout:fixed; /*each column same width, unless width explicitly specified*/
border:1px solid black;
border-collapse:collapse;
}
.styledtable td, .styledtable th{
border:1px solid black;
padding:3px;
}
.styledtable th{ background:#cfcfcf; }
.styledtable td{ background:white; }
/* in a table with the first columnn empty (ie. with actions in the column below it),
* make the first column take up space, but not actually appear.
* Usage: <th style="width:40%;" class="firstcol"> </th>
*/
.firstcol{
visibility:hidden;
}
/*every second row different color, if the table itself doesn't have the class "no-odd-row-highlight"*/
.styledtable:not(.no-odd-row-highlight) tr:nth-child(odd) td{ background:#eeeeee; }
This works for me in all major browsers:
<style type="text/css">
table {
border: none;
padding: 0;
border-spacing: 0;
border-collapse: collapse;
}
table th,
table td {
margin: 0;
background: #fff;
border: 1px solid #000;
padding: 0;
}
table th.hidden {
border: none;
visibility: hidden;
}
</style>
<table>
<tr>
<th class="hidden"></th>
<th>ID</th>
<th>Something</th>
</tr>
<tr>
<td>Options</td>
<td>1</td>
<td>---</td>
</tr>
</table>
Depends upon what you want to achieve in styling, but generally, setting relevant element's (color/background-color/border-(top n left)-color(in this case)) to 'transparent' usually works across browsers.
hope this helps someone.
Sorry for my bad English, I hope you're going to understand what I want to say...
I'm trying to implement an HTML table which support scrolling of table bodies independently of the table head.
I found the following question which helped me a lot :
How to scroll table's "tbody" independent of "thead"?
I tested the following code, it works on Chrome (22), Firefox (16) and Opera (12) without issue :
HTML :
<table>
<thead>
<tr>
<th>Title1</th>
<th>Title2</th>
<!-- ... -->
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
<!-- ... -->
</tr>
<!-- ... -->
</tbody>
</table>
CSS :
thead, tbody {
display: block;
}
tbody {
height:500px;
overflow-y:auto;
overflow-x:hidden;
}
thead {
line-height: 20px;
}
So it works on the main browsers except IE 9, on IE, I have some issues :
The tbody's height is not defined (so I don't have any scrollbar)
Each has an height of 500px (the tbody's height on other browsers)
The two following examples have exactly the same issues : http://jsfiddle.net/nyCKE/2/ , http://www.imaputz.com/cssStuff/bigFourVersion.html
I saw the following question (and answer) but it doesn't help me : IE9 + css : problem with fixed header table
So I'm sure that the bug comes from IE but I don't have any idea how to fix it without change my HTML structure.
Have someone any idea ?
I have slightly tried to fix it. Hope it gives some idea
HTML
<div class="wrap">
<div class="inner">
<table>
<thead><tr>
<th><p>Problem</p></th>
<th><p>Solution</p></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
CSS
p {margin:0 0 1em}
table p {margin :0}
.wrap {
margin:50px 0 0 2%;
float:left;
position:relative;
height:200px;
overflow:hidden;
padding:25px 0 0;
border:1px solid #000;
width:150px
}
.inner {
padding:0 ;
height:200px;
overflow:auto;
}
table { margin:0 0 0 -1px; border-collapse:collapse; width:130px}
td {
padding:5px;
border:1px solid #000;
text-align:center;
}
thead th {
font-weight:bold;
text-align:center;
border:1px solid #000;
padding:0 ;
color:#000;
}
thead th {border:none;}
thead tr p { position:absolute; top:0; }
.last { padding-right:15px!important; }
Demo http://jsfiddle.net/nyCKE/272/
Here is a shorter answer that allows you to scroll the table with a fixed header in ie9.
Add a conditional div around the table
<!--[if lte IE 9]>
<div class="old_ie_wrapper">
<!--<![endif]-->
<table>
...
<!--[if lte IE 9]>
</div>
<!--<![endif]-->
Add the following styles for ie9
.old_ie_wrapper {
height: 500px;
overflow: auto;
}
.old_ie_wrapper tbody {
height: auto;
}
.old_ie_wrapper thead tr {
position: absolute;
}
.old_ie_wrapper tbody tr:first-child {
height: 67px;
vertical-align: bottom;
}
You will have to adjust the heights and probably other properties based on your table.