Develop Reference

center button after change display mode

I have a problem with centering a button after I set it to display: block.
I've got a table:
<table border="0" id="contacts" width="100%">
<tr><td><div align="center"><button style="width:200px;">btn1</button></div></td></tr>
<tr><td><div align="center"><button style="width:200px;">btn1</button></div></td></tr>
</table>
Both buttons are centered in the table. Now I switch the visibility with:
document.getElementById("contacts").style.display = "none";
The table and buttons are invisible. After I switch the visibility back with:
document.getElementById("contacts").style.display = "block";
The buttons are aligned to the left. How can I center the buttons again?

First, do not use a table structure for formatting. Tables have their place, but using them as HTML scaffolding is so 1990. Instead, use DIVs with css.
Break your page up into several outer boxes, or containers. (For this, you can use DIVs - you can use DIVs for just about all containers - or sections or other container elements depending on your need for extra SEO cred.)
Within each outer container (div), you then subdivide into the type of layout you need (again, using divs). Then, within each sub-area, again use divs (or other container element) to do any further sub-divisions.
So, how to size / position all these things? Use CSS.
In css, there is a reason why the most important change from Bootstrap3 to Bootstrap4 is moving from floats to flexbox. Floats was the old way to position items; flexbox (and CSSGrid) are the new way. Flexbox is dead easy.
Flexbox requires two things:
A parent container (e.g. DIV, section, aside, p, etc)
One or more child elements (e.g. div, p, img, etc)
Here is an excellent 5min video tutorial
Here is a great cheatsheet

You would use document.getElementById("contacts").style.display = "table";

You could also give it a class "align-content-center" in this example
<table border="0" id="contacts" width="100%">
<tr>
<td>
<div class="align-content-center">
<button style="width:200px;">btn1</button>
</div>
</td>
</tr>
<tr>
<td>
<div class="align-content-center">
<button style="width:200px;">btn1</button>
</div>
</td>
</tr>
</table>
and then just style your div around the buttons
.align-content-center{
width: 100%;
text-align: center;
}

Hide element issue

So I am trying to hide a DIV that sits inside a td. Issue I am facing is that the attached code fades the div perfect fine but the table space stays there. How do I make this table space disappear completely?
Table:
<table width="100%" id="myTabDiv">
<tr><td align="center"><div id="innerDiv"> This disappears </div></td> </tr>
</table>

Just to clarify, the solution was to wrap the table in another div and hide that div instead.

ol outside of table element

I just try a table with <ol> as list elements with which it is possible to insert new table row.
<table>
<thead>
<tr>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
</tr>
</thead>
<tbody>
<ol id="list">
<li><tr><td>row</td><td>row</td><td>row</td></tr></li>
</ol>
</tbody>
However, I have the problem that the element appear outside of my tables. When I add dynamically content via .append(), the formatting is not taken some elements gets removed.
Jsfiddle example
I want to use this solution for counting currently positions in an "container list".
I got a similar function like the example below for counting my lists, that's working great but the insert into the table does not work properly.
countinglists example: Nested ordered lists
Maybe its possible to achieve that counting syntax in a table without the <ol>? or is there any <ol> equivalent?

You need to do some reading on basic HTML: http://www.w3schools.com/html/html_tables.asp
Here is how it should look...
<table>
<thead>
<tr>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
</tr>
</thead>
<tbody id="list">
<tr>
<td>row</td><td>row</td><td>row</td><td>row</td>
</tr>
<tr>
<td>row</td><td>row</td><td>row</td><td>row</td>
</tr>
<tr>
<td>row</td><td>row</td><td>row</td><td>row</td>
</tr>
</tbody>

In theory, you should be able to use CSS counters.
table {
counter-reset: myTableCounter;
}
thead th:first-child:before {
display: table-cell;
content: "";
}
tbody td:first-child:before {
display: table-cell;
counter-increment: myTableCounter;
content: counter(myTableCounter);
}
However, when I attempted to do that I found there were issues with display: table-cell generated content.
You may have to look at adding additional elements to the table to generate the content inside the first cell of each row.

My question is: what are you trying to achieve? Is this an exercise just to see how much can you stretch the HTML?
For your jsfiddle, the action associated to the click removes some of the HTML tags (at least on my browser) resulting in a <li>rowrowrow</li>, so you end up having a rather odd formatted-table. My renderer takes all <li> tags added by clicking as the content of a row; if you have only <li> tags, the dom parser will likely wrap them into a <ul> (it does on mine).
IMHO you don't need to use the ol to be able to count stuff. You can do it in jquery afaik. If you insist to use lists, then you probably need to style them and use e.g. divs inside (styled too). Emulating a table via a list and divs is madness imho :)
Update - for the hierarchical table
My idea would be to have something similar to this jsfiddle. I basically styled in the .sub and the .main classes. However, things get a bit more complex is you need to add some extra columns. In this case, you'd need something like a treetable.

Hiding entire table resizes it

Having an HTML page with a simple table and js code to do show / hide on it:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title</title>
<script type="text/javascript">
function showErrorSteps()
{
var el = document.getElementById("t1");
if(el.style.display=="none")
{
el.style.display="block";
}
else
{
el.style.display="none";
}
}
</script>
</head>
<body>
<br />
<span onclick="showErrorSteps()">[click]</span>
<br />
<br />
<table id="t1" border="1" width="100%" style="table-layout: fixed">
<tr>
<td>s</td>
<td>d</td>
<td>a</td>
</tr>
</table>
</body>
</html>
What happens is that on Mozilla the table gets resized after you click twice(even with the table-layout: fixed css). IE works fine.

Tables shouldn't be set to display: block. Table rows and cells shouldn't either. They have different display values. My advice? Don't do it this way. Use a class:
.hidden {
display: none;
}
and dynamically add it and remove it from the table to avoid problems of setting the right display type on an element that you show.
Edit: To clarify the comment as to why do it this way and what's going on. Try this:
<table>
<tr>
<td>Cell 1</td>
<td style="display: block;">Cell 2</td>
</tr>
</table
It will (or should) screw up your table layout. Why because a <td> element, by default, has display: table-cell not block. Tables are the same. They have display: table.
Unsetting CSS attributes is... problematic.
Thus you are best off using classes to set and unset attributes. It's easier to change (the class resides in a CSS file and isn't code), avoids problems like setting the value back to the correct original value and generally provides a cleaner solution, especially when used with a library like jQuery. In jQuery, you can do:
$("table").toggleClass("hidden");
Done.
Or you can use addClass() and removeClass() if that's more appropriate. For example:
<input type="button" id="hide" value="Hide Table">
...
<table id="mytable">
...
and
$(function() {
$("#hide").click(function() {
if ($("#mytable").is(".hidden")) {
$("#hide").val("Hide Table");
$("#mytable").removeClass("hidden");
} else {
$("#hide").val("Show Table");
$("#mytable").addClass("hidden");
}
});
});
And there you have a robust, succinct and easy-to-understand solution (once you get your head around the jQuery syntax, which doesn't take that long).
Messing about with Javascript directly is so 2002. :-)

This is not a direct answer to your question, but a serious recommendation. I have recently discovered the joys of JQuery. All this kind of stuff can be done effortlessly and there is extensive online examples and references available.
If you haven’t got time to get into it now then I’m sure someone will offer a solution here, but I would recommend anyone who does anything beyond the most cursory JavaScript DOM manipulation to consider JQuery (or a similar framework).
JQuery offers browser independent Hide(), Show() and Toggle() methods. Here’s one of my favourite references.

This might be because you set the style.display to "block". Try to set it to "". You should also set the table width using CSS. (width: 100%;)

HTML table with fixed headers and a fixed column?

Is there a CSS/JavaScript technique to display a long HTML table such that the column headers stay fixed on-screen and the first coloumn stay fixed and scroll with the data.
I want to be able to scroll through the contents of the table, but to always be able to see the column headers at the top and the first column on the left.
If there is a jQuery plugin that would be great! If it helps the only browser I care about is Firefox.

Working example of link posted by pranav:
http://jsbin.com/nolanole/1/edit?html,js,output
FYI: Tested in IE 6, 7, & 8 (compatibility mode on or off), FF 3 & 3.5, Chrome 2. Not screen-reader-friendly (headers aren't part of content table).
EDIT 5/5/14: moved example to jsBin. This is old, but amazingly still works in current Chrome, IE, and Firefox (though IE and Firefox might require some adjustments to row heights).

The jQuery DataTables plug-in is one excellent way to achieve excel-like fixed column(s) and headers.
Note the examples section of the site and the "extras".
http://datatables.net/examples/
http://datatables.net/extras/
The "Extras" section has tools for fixed columns and fixed headers.
Fixed Columns
http://datatables.net/extras/fixedcolumns/
(I believe the example on this page is the one most appropriate for your question.)
Fixed Header
http://datatables.net/extras/fixedheader/
(Includes an example with a full page spreadsheet style layout: http://datatables.net/release-datatables/extras/FixedHeader/top_bottom_left_right.html)

I see this, although an old question, is a pretty good place to plug my own script:
http://code.google.com/p/js-scroll-table-header/
It just works with no configuration and is really easy to setup.

If what you want is to have the headers stay put while the data in the table scrolls vertically, you should implement a <tbody> styled with "overflow-y: auto" like this:
<table>
<thead>
<tr>
<th>Header1</th>
. . .
</tr>
</thead>
<tbody style="height: 300px; overflow-y: auto">
<tr>
. . .
</tr>
. . .
</tbody>
</table>
If the <tbody> content grows taller than the desired height, it will start scrolling. However, the headers will stay fixed at the top regardless of the scroll position.

In this answer there is also the best answer I found to your question:
HTML table with fixed headers?
and based on pure CSS.

I have created something which has fixed header, fixed footer, fixed left column and also fixed right column. This only works fine in IE. As most of the users are still using IE this can be helpful. Please find the code here in Scrollable Table. Please let me your suggestions.
Meanwhile I am working to fix columns in other browser. I will keep you posted. :-)

<script>
$(document).ready(function () {
$("#GridHeader table").html($('#<%= GridView1.ClientID %>').html());
$("#GridHeader table tbody .rows").remove();
$('#<%= GridView1.ClientID %> tr:first th').hide();
});
</script>
<div id="GridHeader">
<table></table>
</div>
<div style="overflow: auto; height:400px;">
<asp:GridView ID="GridView1" runat="server" />
</div>

Not quite perfect, but it got me closer than some of the top answers here.
Two different tables, one with the header, and the other, wrapped with a div with the content
<table>
<thead>
<tr><th>Stuff</th><th>Second Stuff</th></tr>
</thead>
</table>
<div style="height: 600px; overflow: auto;">
<table>
<tbody>
//Table
</tbody>
</table>
</div>

I know you can do it for MSIE and this limited example seems to work for firefox (not sure how extensible the technique is).

The first column has a scrollbar on the cell right below the headers
<table>
<thead>
<th> Header 1</th>
<th> Header 2</th>
<th> Header 3</th>
</thead>
<tbody>
<tr>
<td>
<div style="width: 50; height:30; overflow-y: scroll">
Tklasdjf alksjf asjdfk jsadfl kajsdl fjasdk fljsaldk
fjlksa djflkasjdflkjsadlkf jsakldjfasdjfklasjdflkjasdlkfjaslkdfjasdf
</div>
</td>
<td>
Hello world
</td>
<td> Hello world2
</tr>
</tbody>
</table>

YUI DataTable
I don't know if YUI DT has this feature but I won't be surprised if it does.

Here is a good jQuery plugin, working in all browsers!
You have a fixed header table without fixing its width.
Check it: https://github.com/benjaminleouzon/tablefixedheader
Disclaimer: I am the author of the plugin.