<table id="one">
<tr>
<td>
<table id="two">
<tr><td>qqq</td> <td>www</td> </tr>
</table>
</td> <td>12 <br /> 34 <br />56 </td>
</tr>
<tr>
<td> </td> <td> aaa</td>
</tr>
<table>
#one td {
border: solid 1px red;
}
#two {
background-color: green
}
LIVE EXAMPLE: http://jsfiddle.net/QMQ3R/3/
I would like - td with qqq and www have auto max height in table#one tr td.
How can I make it? 12, 34, 56 are generated with PHP. There can be for example 10 BR
It's funny, set #one td and #two to height: 100% and it works in Firefox, not Chrome. Set an arbitrary number (like 1px) to #one td and it works in Chrome, not Firefox. Set the height on #one td to 0 and it works in Firefox and Chrome, not IE. That's hacky though and I don't like it. Here's the (hacky but working) example anyway:
http://jsfiddle.net/QMQ3R/8/
Nested tables SUCK, try not to use them. They aren't valid in HTML5. Also, don't duplicate IDs.
Related
I have a table with one row, with one cell, that has a text. the text is in the center of the td.
while clicking the td, I want to add an image after the text. I don't want that the text will be moved, but will be stay in the same place.
this is my jsfiddle:
http://jsfiddle.net/alonshmiel/L7qn3/1/
in this jsfiddle, the text moves left.
<table>
<tr>
<td style="border:1px solid red; width:100px; text-align:center;" onclick="func(this);">
sfh
</td>
</tr>
</table>
thank you all!
The only way to do this is by giving the text a fixed margin instead of centring it. That way the text will stay centred when new content is added.
<td style="border:1px solid red; width:100px;" onclick="func(this);">
<span style="margin-left:38px;">sfh</span>
</td>
Here's the example JSFiddle
You need to place script tag before the table, otherwise browser can't find the function since function is declared afterwards..
Here is working example FIDDLE
<script>
function func(elem) {
elem.innerHTML += "<img src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5Ojf/2wBDAQoKCg0MDRoPDxo3JR8lNzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzf/wAARCAAQABADASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAQMEBf/EACQQAAEDBAEDBQAAAAAAAAAAAAECAwQFERIhABQiQRNCUWGR/8QAFQEBAQAAAAAAAAAAAAAAAAAABAX/xAAfEQEAAgEEAwEAAAAAAAAAAAABAxECACExQRITMlH/2gAMAwEAAhEDEQA/AN5ymSaWUmTSXZkhBbV0rSgSpJJuTYK0Mdj75fVYMZ9TcRlKDLDTq0qjxgEOY37dW3dCvBvccEOXGrMNmFPkNR32UlZmvLClObPZux93z44qfVKUoejFjP8ARpxcS0X8SlwZbF8tEKH5xskGUkmOZnSdUVXfe69fmoGM5HF6iOxfpcvJbsONjHhTZs5Nf//Z'>"
}
</script>
<table>
<tr>
<td style="border:1px solid red; width:100px; text-align:center;" onclick="func(this);">
sfh
</td>
</tr>
</table>
I have the following site:
http://www.pachamber.org/www/advocacy/index.php
When a user clicks the 'General Commerce' href tag towards the bottom, it should slide out the hidden contents. All of the other tags work correctly except this one.
The function behaves unexpectedly only in IE. It looks to be fine in Chrome and FF. When debugging the function, it seems not not grab the height attribute from the div:
<div id="general" style="display: none; height: 30px; overflow: hidden">
The height attribute is showing as 1px on this line:
this.height = parseInt(this.obj.style.height);
Here is the snippit of HTML and the function call:
<table width="100%" border="0" cellspacing="0" cellpadding="6">
<tr>
<td colspan="2" style="width: 100%;">
<div class="subheading2" style="border-bottom: thin solid gray; cursor: pointer; color: #000099" onClick="doSlideOut('general');"><a name="general"></a>General Commerce</div>
</td>
</tr>
</table>
<div id="general" style="display: none; height: 30px; overflow: hidden">
<table width="100%" border="0" cellspacing="0" cellpadding="6">
<tr>
<td width="53%">
• <a href="gc/testimony/index.php" >Testimony & Comments</a>
</td>
<td width="47%"> </td>
</tr>
</table>
</div>
Any ideas what I am missing?
Thanks.
Beware of id and name attribute when using getElementById in Internet Explorer describes the stupid behaviour of IE which causes the problem of yours.
If there are two elements with the same value for id and name (in your case its the div with id general-commerce and the link General Commerce) IE will grab one of both of them when using getElementById.
The solution would be to change either the name-attribute of the link or the id of the div-container.
One thing I saw was and error in your script.
Errors like these break JS from running properly.
Check out one of my websites to see how to do this with jQuery (look at the links under "Our Curriculum").
$('.lgroup').on('click', function () {
if ($(this).hasClass('directLink')) {
return true
} else {
$('.links').slideUp();
$('.lgroup').removeClass('lactive');
if ($(this).next().css('display') == 'block') {
$(this).next().slideUp()
} else {
$(this).addClass('lactive').next().slideDown()
}
}
});
I'm having some trouble getting my Table and Colspans to work. I'm trying to create a grid that can be used as a calendar. Each 'table' can represent a working day period (8:30pm til 6pm).
In my design I seperated this into 38 columns, one for each 15 minute time span.
I've done this so that I can display non-overlapping events next to each other, and ones that conflict with an already 'used' cell, can be created on a new row within this table.
However, with 38 columns in my design, my colspans are not working.
My first row is set to be 19 and 19, so 50%.
My second row is set to be 38, so that's 100%.
Yet when IE is rendering this, it's displaying the first row as around a 30% / 70% split.
My HTML/CSS/Javascript is below:
<html>
<head>
<script type="text/javascript">
function setColSpan1(){
var x=document.getElementById('myTable').rows[0].cells
x[0].colSpan="1"
x[1].colSpan="37"
}
function setColSpan2(){
var x=document.getElementById('myTable').rows[0].cells
x[0].colSpan="19"
x[1].colSpan="19"
}
</script>
</head>
<body>
<style>
.column {
font-size: 1pt;
width: 100%;
background-color: red;
padding: 0px;
margin: 0px;
margin-bottom: 1px;
border: 1px solid black;
height: 10px;
}
.emptycolumn {
font-size: 1pt;
width: 100%;
background-color: blue;
padding: 0px;
margin: 0px;
margin-bottom: 1px;
border: 1px solid white;
height: 10px;
}
</style>
<table id="myTable" border="0" cellpadding="0" cellspacing="0" width="100px">
<tr>
<td colspan="19"><div id="1" class="column" onclick="alert('test');" title="lala test"></div></td>
<td colspan="19"><div id="2" class="emptycolumn"></div></td>
</tr>
<tr>
<td colspan="38"><div id="3" class="column"></div></td>
</tr>
<tr>
<td colspan="1"><div id="4" class="column"></div></td>
<td colspan="24"><div id="5" class="emptycolumn"></div></td>
<td colspan="13"><div id="6" class="column"></div></td>
</tr>
</table>
<form>
<input type="button" onclick="setColSpan1()" value="Change colspan 1">
<input type="button" onclick="setColSpan2()" value="Change colspan 2">
</form>
</body>
</html>
I started with tests originally of only 6 columns, and that seemed to work perfectly, but increasing my design to 38 has broken this.
Is my design wrong? How can I get this to work accurately? Thanks
it doesn't work because the browser can't calculate correctly width of your columns
you need to create first row with 38 columns (without colspan), then hide it and in your functions work with next row (1st in your case)
e.g.:
document.getElementById('myTable').rows[1].cells
P.S.: id attribute: Specifies a unique id for an element.
Naming rules:
Must begin with a letter A-Z or a-z
Can be followed by: letters (A-Za-z), digits (0-9), hyphens (-), and underscores (_)
In HTML, all values are case-insensitive
and specify a DOCTYPE for your document
i have two table:
<table class="tab" id="one">
<tr><td id="resize">aasd as asd asda sd</td><td>a</td></tr>
<tr><td>a</td><td>a</td></tr>
</table>
<br /> <br />
<table class=tab id="two">
<tr><td id="resize">a</td><td>a</td></tr>
<tr><td>a</td><td>a</td></tr>
</table>
.tab td {
border: solid 1px red;
height: 20px;
}
i would like - if TD #one #resize is larger of #two #resize then #two #resize = #one #resize.
how can i make this in jQuery?
LIVE EXAMPLE: http://jsfiddle.net/JPJT6/
see this hope it is right...
http://jsfiddle.net/JPJT6/3/
Maybe, you're better off making this a single table, i.e. something along these lines:
<table class="tab" id="one">
<tr><td id="resize">aasd as asd asda sd</td><td>a</td></tr>
<tr><td>a</td><td>a</td></tr>
<!-- A separator row -->
<tr><td colspan="2"><br /> <br /></td></tr>
<tr><td id="resize">a</td><td>a</td></tr>
<tr><td>a</td><td>a</td></tr>
</table>
Of course, you'd have to adapt your CSS as well... But that's probably a lot simpler than tweaking table rendering with jquery.
Hopefully this is an easy one but I have not found a solution. I want to put space between columns on a table.
Example
| Cell |<- space ->| Cell |<- space ->| Cell |
An important point is that I do not want space on the edges. There is a border-spacing property but it is not supported in IE (6 or 7) so that is no good. It also puts space at the edges.
The best I have come up with is to put padded-right: 10px on my table cells and add a class to the last one to remove the padding. This is less than ideal because the extra space is part of the cell not outside it. I guess you could do the same thing with a transparent border?
I also tried using jQuery:
$(function() {
$("table > tbody > tr:not(:last-child").addClass("right-padding");
});
but even on tables that are only ~100 rows in size this was taking 200-400ms in some cases, which is too slow.
Any help appreciated.
Thanks
To those suggesting columns they do not work. Try this:
<html>
<head>
<title>Layout</title>
<style type="text/css">
table { border: 1px solid black; }
td { background: yellow; }
</style>
</head>
<body>
<table>
<col style="padding-right: 30px;">
<col style="padding-right: 30px;">
<col>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
How about giving each table cell a transparent border? I am pretty sure this will do it for you...
table td {
border:solid 5x transparent;
}
And you can only apply it horizontally like so...
table td {
border-left:solid 10px transparent;
}
table td:first-child {
border-left:0;
}
Here's a complete working demo of what I believe you are trying to accomplish...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Layout</title>
<style type="text/css">
table {
border: 1px solid black;
}
table td {
background: yellow;
border-left:solid 10px transparent;
}
table td:first-child {
border-left:0;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
I do not believe IE6 supports the CSS :first-child, so here is a workaround for that...
<!–-[if IE 6]>
<style type="text/css">
table td {
border-left: expression(this.previousSibling == null ? '0' : 'solid 5px transparent');
}
</style>
<![endif]-->
It is may be what are you loking for:
You can use two values: the first is the horizontal cellspacing, the second the vertical one.
<table style="border-spacing: 40px 10px;">
try using cols
example
<table>
<col style="padding-right:20px;" />
<col style="padding-right:30px;" />
<col />
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
cols also support classes :)
hope this helps
Darko
EDIT: To clarify a col is an element declared at the top of the table to influence entire columns. The first col element will influence the first column, the second col = second column and so on. They can be grouped in colgroups if you wish to assign the same style to more than one column.
EDIT2: After some more research it turns out that the only reliable styles you can set on a col element are:
border
background
width
visibility
No margin or padding. Bugger! Would setting the width of the columns explicitly solve your problem?
You could also consider using a series of fixed width divs floated left with margins. This might give you a bit more control over the element styling.
.row div {
margin-right: 10px;
float: left;
width: 50px;
}
<div class="row">
<div>Cell One</div>
<div>Cell Two</div>
<div>Cell Three</div>
</div>
Josh's answer doesn't work if you already have borders around your cells, like me.
I solved the problem by shifting the whole table slightly to the left, using "position: relative; left: -10px". I combined this with cellspacing on the table.
<div id='sandbox'>
<table cellspacing='10'>
<tr>
<td class='smoothBox'>
...
</td>
<td class='smoothBox'>
...
</td>
</tr>
</table>
</div>
and the css:
#sandbox {
float: left;
position: relative; /* move the whole sandbox */
left: -11px; /* slightly to the left */
width: 950px;
margin-top: 0px;
padding: 1px;
text-align: left;
}
#sandbox table {
float: left;
width: 100%;
}
#sandbox td {
width: 300px;
vertical-align: top;
}
This is what works for me, I hope it may help you too.
Did you try using col grouping?
<table>
<colgroup>
<col class="right-padding" />
<col class="right-padding" />
<col />
</colgroup>
<tbody>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
It is work for me
border-collapse: separate;
border-spacing: 0px 3px;
What about just adding an empty cell that works as a spacer? You could use the col-tag as stated above to give the empty cells a certain width
<col/>
<col style="width:20px"/>
<col/>
<col style="width:20px"/>
<col/>
<tr>
<td>Data</td>
<td>& nbsp;</td>
<td>Data</td>
<td>& nbsp;</td>
<td>Data</td>
</tr>
Or if you want to do more with them, just add classes to them instead of usin inline styling...
The Josh's answer is quite good, but in my opinion needlessly complicated. When you set the table borders to "hidden" and collapse mode to "collapse", the borders on the outer edges of columns will be eliminated, just as required.
Working example:
Stylesheet:
table#my_table {
border-collapse: collapse;
border-style: hidden;
}
table#my_table td {
border-left: 15px solid transparent;
border-right: 15px solid transparent;
}
HTML:
<table id="my_table">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
</table>