Develop Reference

HTML Table: border-collapse and visibility collapse of tr

I have a table with multiple lines, e.g.:
<table>
<tr id="line1"><td>Line</td><td>1</td></tr>
<tr id="line2"><td>Line</td><td>2</td></tr>
<tr id="line3"><td>Line</td><td>3</td></tr>
</table>
Now, in javascript (based on a radio input field) I want to remove (e.g.) #line3 by adding a visibility:collapse, something like:
document.getElementById("line3").style = "visibility:collapse";
The special thing about #line3 is that it has a border-top:
<style>
table {
border-collapse: collapse;
}
#line3 {
border-top:1px solid black;
}
</style>
The problem I have with that: When I "collapse" #line3 the border persists, eventhough the element "does not exist". I guess this should be due to the border-collapse in the table style "inheriting" a border element on the previous tr element? How can I fix that issue?
EDIT: I'd like to keep the javascript like that. Of course I could remove/readd the style element but there should be a different way to solve this?!

Of course I could remove/readd the style element
I think this means you don't want to mess with the border-top property when changing the row's visibility, correct?
In that case, it looks like your only option is to use display:none instead of visibility:collapse[1], which is unfortunate because then your table might have the wobbly effect that visibility:collapse was designed to prevent.
[1] https://drafts.csswg.org/css-tables-3/#visibility-collapse-track-rendering is not crystal clear, but looks like the spec prescribes the behavior you don't want. And chrome and firefox act a bit differently in the visibility:collapse case. https://jsfiddle.net/dgrogan/gLqo9s4w/2
let visible = 1;
toggle.onclick = function() {
line3.style.visibility = visible ? "collapse" : "visible";
//line3.style.display = visible ? "none" : "table-row";
visible = !visible;
}
table {
border-collapse: collapse;
}
td {
border: 1px solid lime;
}
#line3 {
border-top: 2px solid black;
}
<table>
<tr id="line1">
<td>Line</td>
<td>1</td>
</tr>
<tr id="line2">
<td>Line</td>
<td>2</td>
</tr>
<tr id="line3">
<td>Line</td>
<td>3</td>
</tr>
</table>
<br><br>
<button id=toggle>toggle</button>
<P>
https://drafts.csswg.org/css-tables-3/#visibility-collapse-track-rendering
</P>

Have you tried "display: none"?
document.getElementById("line3").style = "display: none";
Or maybe you could try setting the border-top to 0 which should hide it.
document.getElementById("line3").style = "visibility:collapse; border-top: 0";

.cssText
You can edit the whole inline [style] attribute by using .cssText:
document.getElementById("line3").style.cssText = "visibility:collapse; border-top:0px";
This allows you to set visibility and border properties (and more if you want) in one line.
Demo
document.getElementById("line3").style.cssText = "visibility:collapse; border-top:0px";
table {
border-collapse: collapse;
}
#line3 {
border-top: 1px solid black;
}
<table>
<tr id="line1">
<td>Line</td>
<td>1</td>
</tr>
<tr id="line2">
<td>Line</td>
<td>2</td>
</tr>
<tr id="line3">
<td>Line</td>
<td>3</td>
</tr>
</table>

You have several solutions to do this, with Jquery:
$('#line1').hide();
//OR
$('#line1').css('visibility','collapse');
//OR
$('#line1').css('display','none');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr id="line1"><td>Line</td><td>1</td></tr>
<tr id="line2"><td>Line</td><td>2</td></tr>
<tr id="line3"><td>Line</td><td>3</td></tr>
</table>
You can also use Javascript directly with the getElementById property:
document.getElementById("line1").style.display = "none";
Or
document.getElementById("line1").style.visibility = "collapse";

Click numbered div to show/hide table of same number

I have a series of tabs (divs) that are being automatically numbered on page load and a series of tables also being automatically numbered. What is a short jquery script to show/hide the tables based on the div clicked. Ex. "tab1" shows/hides "table1", "tab2" shows/hides "table2", etc.
I was hoping for a way to have this work for an infinite amount of these pairs, rather than writing
$('.tab1').click(function(){
$('.table1').toggle();
});
$('.tab2').click(function(){
$('.table2').toggle();
});
for each one
EDIT:
Link to example: https://jsfiddle.net/captainmorganms/o1ndn2b2/3/

for(var c=1;c<=your_no;c++){
$('.tab'+c).click(function(){
$('.table'+$(this).attr("class").replace("tab","")).toggle();
});
}
Just use a simple for loop for it to work!

You can do it like this:
$('.tab1,.tab2,.tab3').on('click',function(){
$('.table'+$(this).attr('class').substr($(this).attr('class').indexOf("tab") + 3)).toggle();
});
For unknow number of tables, in your case, select tabs like this:
$('.section div')
Full example here https://jsfiddle.net/_jakob/o1ndn2b2/4/
I set tables hidden by default but you can remove it in CSS if you want them to be shown at start.

Given the markup provided in the example Fiddle, you can achieve this for any number of tables with a single event listener and a few extra attributes, like so:
document.querySelector(".section").addEventListener("click",function(event){
var target=event.target,table;
if(table=target.dataset.table)
if(table=document.getElementById(table))
table.classList.toggle("hide");
},0);
.section>div{
display:inline-block;
cursor:pointer;
margin:0 5px;
border:1px solid;
padding:3px;
}
table{
border:1px solid;
border-collapse:collapse;
margin-top:15px;
}
table.hide{
display:none;
}
td{
border:1px solid;
padding:5px;
min-width:50px;
height:30px;
}
<div class="section">
<div data-table="table1">Tab1</div>
<div data-table="table2">Tab2</div>
<div data-table="table3">Tab3</div>
</div>
<table class="hide" id="table1">
<tr><td>Table 1</td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<table class="hide" id="table2">
<tr><td>Table 2</td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<table class="hide" id="table3">
<tr><td>Table 3</td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>

Displaying table header content vertically

I have this
header1 header2
data1 data2
But I want to display it as
h h
e e
a a
d d
e e
r r
1 2
data1 data2
I also want borders around the headers and table rows.
EDIT:
Based on Vinc199789's answer below I came up with this.
<table>
<tr style="border 1px solid;text-align:center;">
<th style="width:1px;word-break:break-all;border:1px solid;text-align:center;"><div style="width:1px;word-break:break-all;text-align:center;">Jill</div></th>
<th style="width:1px;word-break:break-all;border: 1px solid;"><div style="width:1px;word-break:break-all;">Smith</div></th>
<th style="width:1px;word-break:break-all;border: 1px solid;"><div style="width:1px;word-break:break-all;">50</div></th>
</tr>
<tr>
<td style="border: 1px solid;">Eve</td>
<td style="border: 1px solid;">Jackson</td>
<td style="border: 1px solid;">94</td>
</tr>
</table>
However I need the following improvements on this:
If you see the output, there is a gap above J in "Jill" , "Smith" occupies the entire vertical space and "50" is in the middle. Is there a way to make all the headers start from the ceiling of the vertical space?
I also wanted a way to center align "Jill", "Smith" and "50". text-align:center is not working.

You can use css word-break: break-all
What I did is I added a div inside a td and set the width to 1px (this to make sure that there can not be two letters placed next to each other). I also added word-break: break-all and you can see the result in the code snippet or is this fiddle.
edit
With margin-left:auto and margin-right:auto I center the vertical headers and with text-align:center I center the other table content.
If you add vertical-align:top to the td you also have your headers placed at the top
updated fiddle
td > div{
width:1px;
word-break: break-all;
margin-right:auto;
margin-left:auto;
}
td{
text-align:center;
vertical-align:top;
}
<table style="width:100%">
<tr>
<td><div>Jill</div></td>
<td><div>Smith</div></td>
<td><div>50</div></td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Create a Tooltip Out from arbitrary HTML Table

I am trying to create a tooltip on a web page. I want the user to be able to roll over a link, and when they do, display arbitrary html. In this case, its a simple table, containing some meta data. I have tried using jquery.tools, but I am not sure how to use it correctly. Here is the idea:
<a id="foo">FOO</a>
<div id="tooltip-content">
I am visible when the user hovers over FOO
<table>
<tr>
<td>Name</td>
<td>Foo</td>
</tr>
<tr>
<td>Value</td>
<td>Waka waka</td>
</tr>
....
</table>
</div>
When the user hovers over the link text FOO, I want the div and its content to become visible, floating near the mouse, I don't care if its above, below, left or right of the link text. It just needs to work. What is the simplest / best way to do this? I don't think I can use the title attribute of the link since I want to support an html table, is that correct? How do I do this?

Basic stuff, really. Here's a fiddle: http://jsfiddle.net/MqcMM/. The reason the table and the link are wrapped in a container is to allow hovering over the table once it is displayed.
HTML:
<div id = "container">
<a id="foo" href = "#">FOO</a>
<table>
<tr>
<td>Name</td>
<td>Foo</td>
</tr>
<tr>
<td>Value</td>
<td>Waka waka</td>
</tr>
</table>
</div>
CSS:
body {
padding: 50px;
}
#container {
position: relative;
display: table;
}
#container > table {
position: absolute;
white-space: nowrap;
border-collapse: collapse;
display: none;
}
#container > table td {
border: 1px dotted #000;
padding: 2px;
}
#container:hover > table {
display: table;
}

Table resizes when there is a tree in column

Below I am posting some code that I am using to try to set a table width to be fixed proportions for each column. 10% for one, 90% for the other.
Presently, I am inserting a dijit.Tree widget via javascript at the "treeOne" div tag. When this tree opens up, my column grows in width to accomodate. I would like for it to always be 10% wide no matter what, and stop resizing the column. What am I doing wrong?
<table width="100%" border="1">
<thead>
<tr>
<td style="overflow:hidden;width:10%;"> Tree</td>
<td style="width:90%;" > Query</td>
</tr>
</thead>
<tbody>
<td style="overflow:hidden;width:10%;">
<div id ="treeOne">Insert Tree here</div>
</td>
<td style="width:90%;">
.
.
.

Table cells are supposed to work like this, expanding to accommodate whatever's inside of them.
If you want it to be fixed in size (and chop off the contents in the process), try using CSS with divs instead:
<style type="text/css">
.col1 {
clear:both;
float:left;
overflow:hidden;
width:10%;
}
.col2 {
float:left;
width:90%;
}
</style>
<div class="col1">
<div id ="treeOne">Insert Tree here</div>
</div>
<div class="col2">...</div>