In my html, I set a table column as 35%. I want to display one line of a text in the <td>, and any characters exceeding the width of column are chop off. I tried using text-overflow:clip. But if there are <br> in the text, it will show multiple lines.
I tested the answers I got. It seems not working. I think the only way is cut the text before display it.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div .test").css("background-color","yellow");
$("div .test").css("text-overflow","clip");
$("div .test").css("white-space","nowrap");
$(".test br").css("display", "none");
// $("div .test").css("overflow":"hidden");
});
</script>
</head>
<body>
<table>
<tr>
<td>testing</td>
<td>
<div style="border:1px solid black;padding:10px;">
<p class="test">This is a paragraph.</p>
<span class="test">Skin or subcutaneous tissue or mucous membrane,repair of wound, other than wound closure at time of surgery, on face or neck,more > 7cm.</span>
</div>
</td>
</tr>
</table>
</body>
</html>
Thank you.
It sounds like you don't want the text to wrap, but to be chopped off at the edges of the column instead.
Add this to your td to get that effect:
white-space: nowrap;
overflow:hidden;
See:
http://jsfiddle.net/3948a/1/
FIDDLE
td{
white-space:nowrap;
}
white-space:nowrap will be the fix for it. And if your text in td contains <br/> tags we can ignore it by adding display:none.
td br{
display:none;
}
Hope this helps
Check here : max-width should be defined in px
td {
max-width: 100px;
overflow: hidden;
text-overflow: clip;
white-space: nowrap;
}
You can try to use CSS:
text-overflow: hidden;
You can try giving a max width or max height for your <td> using CSS
td {
border: 1px solid black;
width: 100px;
max-width: 100px;
max-height: 10px;
}
this will be like this
overflow-X:hidden;
HTML
Try to define the td width in pixel :
<table border=1 style="width:300px">
<td style="max-width:100px">This is one line <br> text with out br
</td>
<td style="width:65%;">Another td
</td>
</table>
CSS
td{
white-space:nowrap;
overflow: hidden;
}
td br{
display:none;
}
It will help
you might be use below code in your css
.demo{
word-wrap:break-word;
overflow:hidden;
}
Thanks
Related
I have a long table(the width is very large), when I scroll that table from left to right, I want it moves inertially. The current version of mine is just when I use my finger to scroll it, it moves but when I hold up my finger it stopped. What should I do? Here is a part of my HTML code for that table inside the div.
<div class="welcomeProgram">
<p class=programTitle>Project</p>
<div class="outer">
<div class="inner">
<table>
<tr>
<td><img src="img/ast_youxue.png"/><p>Project1</p></td>
<td><img src="img/canada_youxue2.png"/><p>project2</p></td>
<td><img src="img/usa_youxue2.png"/><p>project3</p></td>
<td><img src="img/uk_youxue2.png"/><p>project4</p></td>
</tr>
</table>
</div>
</div>
</div>
And there is my css code:
table {
table-layout: fixed;
width: 100%;
*margin-left: -100px;/*ie7*/
}
td, th {
vertical-align: top;
padding:2px;
width:330px;
}
.outer {
position:relative;
margin-top: 2%;
}
.inner {
overflow-x:scroll;
overflow-y:visible;
width:97%;
margin-left:0%;
-webkit-overflow-scrolling: touch;
}
.inner img{
width: 100%;
}
.inner p{
font-size: 20px;
margin-top: 4%;
margin-left: 1%;
}
I'm not sure what your asking. "inertially" isn't a word in the dictionary. Inertia is, but it's the absence of motion AKA a body that stays at rest. See: http://www.dictionary.com/browse/inertia
It sounds like the table is already doing what it needs to do, when the user's cursor or finger releases the table... it stops.
If you want it to keep moving, you'd need to use a library like jQuery to animate it. HTML + CSS won't do that by themselves. You could start the scroll onKeyDown & then onMouseMove. It'd be similar to programming a drag & drop operation, using jQuery. Once you've setup 2 flags to track the onKeyDown & onMouseMove, where both flags are set to true, then you could use the onKeyUp event to run the animation. You could use .scrollLeft() to allow it to continue to keep moving. See: https://api.jquery.com/scrollleft/
Would you please clarify, what you're looking for the table to do?
Edit: I tried to add this to the comments, but it wouldn't fit into it.
See if this helps...
<html>
<head>
<style>
.wrap {
overflow-y: scroll;
}
table {
width: 10000px;
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
<footer>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>
$(function() {
// Generate Table
var table = '<table border="1"><tr>';
for (var i=0; i<1000; i++) {
table += '<td>Hi</td>';
}
table += '</tr></table>';
$('.wrap').html(table);
// Run Animation
$('.wrap').on('scroll', function(){
$(this).animate({
scrollLeft: "+=50"
}, 800);
});
});
</script>
</footer>
</html>
Im having difficulties with Firefox and drop down menu.
It has of about 200 px gap under the drop down list created by slideToggle.
When inspected, that area is not taken by anything and completely blank/empty.
Chrome displays everything correctly.
Source is here http://stafter.com/demo
I have been fighting this for 2 days already playing around "display" and "margins".
Here is the main code stracture
JQuery CODE
<script type="text/javascript">
$(document).ready(function(){
$(".plus1").click(function(){
$(".open1").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".plus2").click(function(){
$(".open2").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".plus3").click(function(){
$(".open3").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
HTML CODE
<html>
<head></head>
<body>
<div id="wrapper">
<div id="container">
<div id="ul_wrap">
<div class="plus1">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open1"></p>
</div>
<div class="plus2">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open2"></p>
</div>
<div class="plus3">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open3"></p>
</div>
</div>
</div>
<div id="push"></div>
</div>
<div id="footer"></div>
</body>
<html>
CSS
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -77px;
padding:0;
}
.footer, .push {
height: 77px;
clear:both;
}
.footer{
width:100%;
background: url('../images/bottom_bg.jpg') repeat-x 0 0;
position:relative;
margin:auto;
}
.container {
width:800px;
min-height:400px;
margin:auto;
margin-top:20px;
margin-bottom:20px;
padding:30px;
}
#ul_wrap {
position:relative;
margin-bottom:-100px;
clear:both;
}
#ul_wrap ul{
display:inline-block;
position:relative;
left:-20px;
padding:5px 0px 0px 10px;
background-color:#FFFFFF;
border:1px solid #FFFFFF;
clear:both;
height:27px;
}
#ul_wrap li{
font-size:16px;
text-align:left;
float:left;
list-style:none;
}
.one{
width:40px;
}
.two{
width:410px;
}
.three{
width:88px;
}
.open1, .open2, .open3{
margin:-5px 0 20px 0;
position:relative;
font-size:12px;
display:none;
}
PLEASE NO COMMENTS LIKE I FORGOT TO CLOSE A TAG OR SMTH, i had to rewrite the entire html code to post it here in short version and shorter names because otherwise it would be 4 page code of css html and javascript. Problem is not in debugging errors in unclosed tags or smth. Source was html validated 1000 times.
After playing with margins, display properties and floating and clearing i finally assembled a working structure (for now).
The key was to clear all elements and parents containing all floating elements,
Then because for some odd reasons slideToggle wasn't working properly with white background (unless you specified height of the hiding element) behind .wrap_ul if it was display:block, only with inline-block.
With Display:inline-block it was getting footer floating on the right, no matter clear:both on both items;
With specified height, slideToggle wasn't pushing the rest of the sliding elements down below but was overlapping.
Well with all these problems only in Firefox, Chrome never had this flue...
So i posted working code in the last edit, not sure which property got the whole puzzle working which is -> (
the background behind expanding down slideToggle list,
footer that is pushed down as well when list is expanded
not floated footer and no extra gaps or spacing's between drop down list and footer)
Hope you find it usefull
I am collapsing table rows and using jQuery to toggle them. However, when the hidden rows are shown, the width of the td elements in the first tr are recalculated. This is exhibited on my example:
$("tr:first").click(function(){
$(this).next('tr').toggle();
});
tr{
display: none;
}
tr:first-of-type{
display: table-row;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr><td colspan="5">Hello</td><td colspan="3">World</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
</table>
(Fiddle if preferred: http://jsfiddle.net/8u070tkf/)
How can I force the flow of the hidden row, but still toggle the visibility of the second tr?
You would have better to toggle a class and set visibility CSS property:
$("tr:first").click(function(){
$(this).next('tr').toggleClass('shown');
});
CSS:
tr:not(:first-of-type):not(.shown){
visibility: hidden;
}
-DEMO-
Not really an answer, but a few hints eventually.
you may relay on colgroup and min-width , unfortunately, display:none; hides width of content.
table-layout and width on table is something to look at too.
http://jsfiddle.net/8u070tkf/2/
$("tr:first").click(function(){
$(this).next('tr').toggle();
});
tr{
display: none;
}
tr:first-of-type{
display: table-row;
}
col {
min-width:2.2em;
}
td {
background:yellow
}
<script src="http://code.jquery.com/jquery-compat-git.js"></script>
<table>
<colgroup><col/><col/> <col/><col/><col/> <col/><col/> <col/></colgroup>
<tr><td colspan="5">Hello</td><td colspan="3">World</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
</table>
Here is a simplified version of a problem I am currently facing at work. The code runs as it should in Firefox 3.6. When a row is clicked, Javascript changes its class name and the properties of the children elements should change too.
In IE6 and maybe other versions, however, it only works for the "title1" and "title2" TDs: they change color. What doesn't work is "value1" and "value2" changing from display:none to their default value. I have tried working with the style.display attribute of the TDs to no avail.
Any help would be greatly appreciated.
<!doctype html>
<html>
<head>
<style type="text/css">
table#input{
width: 100%;
border-collapse: collapse;
}
table#input tr{
border-bottom: 1px solid #333;
}
table#input td{
padding: 4px;
}
tr.disabled td.key{
color: #ccc;
}
tr.disabled td.value{
display: none;
}
</style>
<script type="text/javascript">
function toggleVisibility(rowElem){
rowElem.className = (rowElem.className == 'disabled') ? 'enabled' : 'disabled';
}
</script>
</head>
<body>
<table id="input">
<tr class="disabled" onclick="toggleVisibility(this);"><td class="key">title1</td><td class="value">value1</td></tr>
<tr class="disabled" onclick="toggleVisibility(this);"><td class="key">title2</td><td class="value">value2</td></tr>
</table>
</body>
</html>
I came up with an alternate solution that works in FF and IE6-8. For each TD with class="value", I enclosed the content with span tags and made the following change to the style sheet:
tr.disabled td.value span{
position: absolute;
top: -20px;
}
Now when a row is disabled, all the value content should be hidden off screen.
How do I vertically and horizontally center an image when I do not know the size of it? I asked this question and someone suggested using a table. This isn't the first time I heard a table can do it but I tried without luck.
Searching SO only got me results when I do know the size of the image. How do I do this with a table?
NOTE: JavaScript/jQuery is not preferred but if there's a solution with it I'm open to it.
Pretty easy, this is the format of all my images/containers:
<div class="photo"><img /></div>
<style type="text/css">
div.photo { height: 100px; line-height: 100px;text-align:center; }
div.photo img { vertical-align:middle;}
</style>
The CSS Method
You can set an explicit height and line-height on your container to center an image:
<div id="container">
<img src="http://placekitten.com/200/200" />
</div>
<style>
#container { height: 600px; line-height: 600px; text-align: center }
#container img { vertical-align: middle }
</style>
See it in action: http://jsfiddle.net/jonathansampson/qN3nm/
The HTML/Table Method
The table method follows. It's merely utilizing the valign (vertical-align) property:
<table>
<tbody>
<tr>
<td align="center" valign="middle">
<img src="someHeight.jpg" />
</td>
</tr>
</tbody>
</table>
A jQuery Plugin
Since you tagged this question "jQuery," I'll provide a reference to the jQuery Center Plugin that also achieves vertical/horizontal centering by using CSS positioning and dynamic reading of an elements dimensions: http://plugins.jquery.com/project/elementcenter
With a table:
<table height="400">
<tbody>
<tr>
<td valign="middle"><img /></td>
</tr>
</tbody>
</table>
The 400 is just something I picked. You will need to define a height on table so it is taller than your image.
A jquery solution would be good if you wanted to try and use divs and junk, but if you don't care you don't care. You also have to rely on JS being turned on.
HTML:
<div id="imgContainer" style="position:relative;">
<img style="position:absolute;" />
</div>
JS:
$('#imgContainer > img').each(function(){
//get img dimensions
var h = $(this).height();
var w = $(this).width();
//get div dimensions
var div_h =$('#imgContainer').height();
var div_w =$('#imgContainer').width();
//set img position
this.style.top = Math.round((div_h - h) / 2) + 'px';
this.style.left = '50%';
this.style.marginLeft = Math.round(w/2) + 'px';
});
DON'T USE TABLES. Terrible practice unless your using tabular data.
The best way to do this is with the following code.
<html>
<head>
<title></title>
<style media="screen">
.centered {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;*/
}
</style>
</head>
<body>
<img class="centered" src="" width="100" height="100" alt="Centered Image"/>
</body>
This will work as long as it is not inside any elements without static positioning. All containing elements must be static positioning which is the default anyway.
Using CSS there is no easy way to vertically align an image center. Though to align it center horizontally you can use the following
<img src="randomimage.jpg" style="margin: 0px auto;" />
I would not reccommend a table for laying out an image as it is not really good practice anymore. Tables should only be used for tabular data.
There is some bad way to do it. Just display this image as block with absolute positioning (parent element must have "position: relative"). So you can play with margin-left and margin-top with negative values ~= a half of image sizes (respectively width and height)
If you don't mind losing IE compatibility (IE7 and older don't support this at all), you can use some CSS to simulate tables, without ever using one:
<div style="display: table; height: 500px; width: 500px;">
<img src="pic.jpg" style="display: table-cell; vertical-align:middle; margin: 0 auto; text-align: center">
</div>
Just pick appropriate height/width for the containing <div>.
If you don't mind losing the img-tag, you can use background-image to center an image in a container block.
markup:
<div class="imagebox" style="background-image: url(theimage.png);"></div>
style:
.imagebox
{
width: 500px;
height: 500px;
border: solid 1px black;
background-repeat: no-repeat;
background-position: 50% 50%;
}
Basically, you should be able to create a table in HTML, and the styling for the td tag should set the text-align attribute to center and the vertical-align attribute to middle. And, you can mess with other attributes, like borders, padding, etc...
I end up doing the below. Tested with firefox, chrome, IE8 and opera. All good.
table.NAME
{
background: green; //test color
text-align: center;
vertical-align:middle;
}
table.NAME tr td
{
width: 150px;
height: 150px;
}
html
<table class="NAME"><tr>
<td><img src="dfgdfgfdgf.gif" alt="dfgdfgfdgf.gif"/></td>
<td><img src="dfgdfgfdgf.gif" alt="dfgdfgfdgf.gif"/></td>
...