Just to frame you. Look at the following code.
Basically I have a table inside a div. When the table gets too big the overflow hidden triggers.
PROBLEM: in IE6 the "some text" gets hidden as expected but the floated span not.
Is there a way around of fix it?
#wrap{
overflow:hidden;
height:20px
}
span{
float:left;
height:10px;
width:10px;
background:url(image.jpg) no-repeat 0 0;
}
<div id="wrap">
<table>
<tr>
<td><span></span> some text</td>
</tr>
<tr>
<td><span></span> some text</td>
</tr>
<tr>
<td><span></span> some text</td>
</tr>
</table>
</div>
Try giving height:1%; for ie6 css. as below.
wrap{
overflow:hidden;
height:%;
}
Related
I want the picture from div to be under the table so that after hover the content shows, the problem is i can't change html all elements should be the same size and be displayed as inline blocks
td {
display: block!important;
visibility: hidden
}
.hide:hover:nth-child(n)+table:nth-child(n) tbody tr td.td1 {
visibility: visible!important
}
.hide{width:100px; height:200px; display:inline-blocks;
}
tbody{width:100px; height:200px; display:inline-blocks;
}
<html>
<body>
<table>
<tbody>
<tr>
<td class="td1"></td>
<td class="td1"></td>
</tr>
</tbody>
</table>
<div id="more49042" class="hide" style="background-image:url("https://webkit.org/demos/srcset/image-src.png") !important">
</div>
<table>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div id="more5343" class="hide" style="background-image:url("https://assets.crowdsurge.com/datacapture/example/img/example_logo.png") !important">
</div>
</body>
</html>
Here is what I think you are trying to do. Please note that I added the html entity to ensure that the div shows up. You could probably just set a min-height on the element.
How the CSS works:
Since there will never be a case that I can think of where hovering over something that technically doesn't exist in the DOM is going to work, you want to look for a hover on the table, and then change the visibility of the .hide element after it.
.hide {
display: none;
}
table:hover+.hide {
display: inherit !important;
}
<table>
<tbody>
<tr>
<td>Lorem.</td>
<td>Quaerat.</td>
</tr>
</tbody>
</table>
<div class="hide" style="background-image:url('//placehold.it/300x300')"> </div>
I have a table, a few elements have input elements inside them. I have set the following properties for the input elements.
table input{
width:inherit;
margin:1px;
overflow:hidden;
}
Now i want the cell size to determine the input element size, hence the inherit property. But because i have a margin set on them, they were popping out of the cells a little. So i added the overflow:hidden property, but thats not helping.
What am i doing wrong?
Edit:Code Added
<div>
<form>
<table>
<tr>
<th class="tinycolumn">S.no</th>
<th>Part Name</th>
<th>Part number</th>
<th class="tinycolumn">Qty</th>
<th>New/Repair</th>
<th>MRP</th>
<th>Denting/Fitting</th>
<th>Painting</th>
<th></th>
</tr>
<tr>
<td>1.</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="number" min="0"></td>
<td><select><option value="new">New</option><option value="repair">Repair</option></select></td>
<td><input type="text"></td>
<td><input type="tel"></td>
<td><input type="tel"></td>
<td><button>Delete</button></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><button>Add</button></td>
</tr>
</table>
<input type="submit">
</form>
</div>
Supporting CSS
#estimatetable{
display:inline-block;
width:80%;
margin:1em auto 1em auto;
overflow:hidden;
}
#estimatetable form{
width:auto;
}
#estimatetable form table{
text-align:center;
width:100%;
}
#estimatetable tr{
min-height:3em;
}
#estimatetable form table tr td, #estimatetable form table tr th{
border:1px solid rgb(0,0,0);
max-width:2em;
padding:1px;
}
#estimatetable input, #estimatetable select{
width:inherit;
margin:1px;
overflow:hidden;
}
#estimatetable button{
width:100%;
}
#estimatetable .tinycolumn{
max-width:.5em;
}
Your CSS says : input inherits width of parent.
In regular box model, borders are added to width.
Using box-sizing:border-box; , border and padding will be included in total width of element.
Your CSS can be fixed this way :
table input{
width:inherit;
box-sizing:border-box; /* add vendor prefix or a script to do so if needed */
}
If you still wish to use the margin:1px; you should turn it into padding:1px; to parent element (td) and apply to it as well the box-sizing propertie.
DEMO
Im creating a responsive table which contains a vertical divider. I want that divider to move along with the text according to all screen sizes. left and right td are responsive just the divider is creating problem.
The CSS is
.divider{
position: absolute;
left:30.5%;
top:6%;
bottom:25%;
border-left:2px solid #333;
overflow:hidden;
}
and the related html is
<table width="100%">
<tr>
<td>
this is test
</td>
<td><div class="divider"></div></td>
<td>
This is test2
</td>
</tr>
</table>
The problem is when I change the position from absolute to anything else in css it hides the divider.
In your case....its happening because i feel that your are giving position only to the div and not the containing <td>....give this parent td a position first
add height, width to html,body and your are good to go...
solution
CSS
html, body {
height:100%; /* added */
width:100%;/* added */
}
.divider {
position: relative; /* changed*/
left:30.5%;
top:6%;
bottom:25%;
border-left:2px solid #333;
overflow:hidden;
}
td.r {
position:absolute;/* added */
height:100%;/* added */
width:100%;/* added */
}
HTML
<table width="100%" border=1>
<tr>
<td>this is test</td>
<td class="r"> <!-- notice the added class-->
<div class="divider"></div>
</td>
<td>This is test2</td>
</tr>
</table>
EDIT
A much simpler and cleaner way to create divider is to use td only for divider, not the div....check this demo
Remove the div creating the divider and instead, add the divider class to td itself!
<table width="100%" border=0>
<tr>
<td>this is test</td>
<td class="divider"></td>
<td>This is test2</td>
</tr>
</table>
CSS
td {
text-align:center
}
td.divider {
position:absolute;
height:100%;
width:1px;
border:1px solid #000;
background:#000;
}
I want to achieve this thing:
Height of table row and grey line should be dynamic depend on contents in right column.
I've read in How to make <div> fill <td> height, so I tried with this http://jsfiddle.net/hyNWy/
But still no luck. Any suggestions?
With a colon? Also, to get your spacing:
<td style="position:relative;">
<div style="width: 10px; position:absolute; top:10px; bottom:10px; background:grey">
</div>
</td>
EDIT:
I don't think it's possible without specifying an explicit height. The solution in the original question that you pointed to does not actually work. position:relative does not seem to apply correctly to table cells. This could well be intentional and part of the spec.
Did you try
<table>
<tr>
<td>
<div>
</div>
</td>
</tr>
</table>
with
tr { }
td { position:relative;height:300px; display:block; }
div {
width:10px;
position:absolute;
bottom:10px;
top:10px;
display:block;
background:grey
}
Here's a jsfiddle of that.
I'm having trouble getting my table to behave. The content keeps overflowing and my attempts to restrict it are not producing the desired effect.
This is my markup:
<div class="repeatingdiv">
<div class="hastitle">Some title</div>
<div class="hastable">
<table>
<thead><tr><th></th></tr></thead>
<tfoot><tr><th></th></tr></tfoot>
<tbody>
<tr>
<td class="col1">Col 1</td>
<td class="col2">Col 2</td>
<td class="col3">Col 3</td>
</tr>
</tbody>
</table>
</div>
</div>
I then have some style. The td's are overflowing, but I didn't have any luck setting their overflow to hidden/auto. I did have better luck setting overflow in the hastable class that contains the table. But I'm still having trouble getting Firefox to respect the width distribution for the 3 columns: 30%, 35%, 35%. I also tried setting min-width, but still no luck. I have several of these tables on the page, and each one takes its own width. Any help with this table mess?
.repeatingdiv { }
.hastitle { margin:0 10px; padding:3px 3px 1px 6px; }
.hastable { overflow:hidden;
text-overflow: ellipsis;
margin:10px;
padding:10px;
}
table { }
table tbody { width: 100%; }
tr { width: 100%; }
td.col1 { width:30%; min-width:30%; }
td.col2 { width:35%; min-width:35%; }
td.col3 { width:35%; min-width:35%; }
Tables are notoriously difficult to style. Try adding this to your CSS:
table { table-layout: fixed; width: 100% /* or whatever fixed width */; }
I'd also suggest using actual HTML COL / COLGROUP elements to define your columns, as so:
<table>
<colgroup class="col1" />
<colgroup class="col2" />
<colgroup class="col3" />
<thead><tr><th></th></tr></thead>
<tfoot><tr><th></th></tr></tfoot>
<tbody>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
</tbody>
</table>
Do take note that, despite this, cells with overflowing data will force the containing cell, row, and table to expand to fit. CSS overflow: auto / hidden / scroll do not affect cells.
Ref:
CSS: Table Layout,
HTML: COLGROUP
Wrap your table in a div and set overflow for the div.
<div style='overflow:scroll;'>
<table>
...
</table>
</div>