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;
}

datatable js DOM elements positioning issue

I have a small formatting issue. It can be because I don't fully understand the data tables formatting.
HTML code
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
<h1 class="page-header">Test Runs</h1>
<div class="table-responsive">
<table class="table table-striped" id="tests">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Link</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
</tr>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
</tr>
</tbody>
</table>
</div>
The outer div is present because i have a side menu bar which is not shown here.
JS code
$(document).ready(function() {
$('#tests').DataTable( {
dom:
"<'row'<'col-sm-3'l><'col-sm-6 text-center'B><'col-sm-3'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-3'i><'col-sm-6 text-center'B><'col-sm-3'p>>"
} );
} );
In the above js code, if I don't add "dom" element the filter results and search bar are not in the same row , they are one below the other.
The same applies to information and pagination.
I want the four elements to be in four corners of the screen.
eg:
length changing input control : top left
filtering input : top right
table information summary : bottom left
pagination control : bottom right.
With the current code (with the "dom" added) I am able to achieve this but now there is a horizontal scroll which I don't want.
Can someone tell me what mistake I made.

You can place the relevant elements in the bootstrap panel.
$(document).ready(function() {
var table = $('#example').DataTable({
"dom": '<"panel panel-default"<"panel-heading"<"row"<"col-md-6"l><"col-md-6 text-right"f>>>t<"panel-footer"<"row"<"col-md-6"i><"col-md-6 text-right"p>>>>'
}); });
Demo : http://jsfiddle.net/a62hqqf9/
You can also look again for the use of DOM elements : datatable dom

The main reason for horizontal scroll is negative margins of .row. You need to remove negative margins with custom class. I have added .no-gutters in the snippet example as you are probably using Bootstrap 3. If you are using Bootstrap 4, the class comes with Bootstrap CSS.
Demo: Working example

Slide Down tabe row smoothly and Slowly

I want to Slide Down tabe row smoothly and Slowly.
The problem now is, it is instantly appearing and hiding, how can i make it smooth.
**Please check this fiddle:**
http://jsfiddle.net/5WT9g/2/
HTML:
Show Content
<br><br><br>
<table width="400" border="1">
<tr id="mainContent" style="display:none;">
<td> THIS IS MAIN CONTENT </td>
</tr>
</table>
JS:
$('#showContent').click(function ()
{
$('#mainContent').slideToggle('slow');
});

I think you mean to use slideToggle() and not toggleslide().
However, the animation still won't work smoothly for table cells. It will work slightly more smoothly if you set a height for the tr. For a completely smooth animation, I recommend using divs instead.
Here is a modified version of your code that has a sort of smooth animation with tables:
http://jsfiddle.net/TS77v/1/
As you can see, you will have to do the animation on the td, not the tr. I also had to set the height of the td for this to work, otherwise it will just appear and disappear.
Why doesn't the animation work properly on tables?
From "Learning jQuery" by Chaffer and Swedberg
Table rows present particular obstacles to animation, since browsers
use different values (table-row and block) for their visible display
property. The .hide() and .show() methods, without animation, are
always safe to use with table rows. As of jQuery version 1.1.3,
.fadeIn() and .fadeOut() can be used as well.
For your reference: https://stackoverflow.com/a/920480/3016565

It would be much easier with divs but if you prefer/need tables then tables it is. I'd do it by putting a div inside the table cell ja use the slideToggle to it. Yes, it still adds the div there but atleast you got the table structure. To make it work you need to do just a minor change to your HTML code, JS stays the same:
HTML
Show Content
<br><br><br>
<table width="400" border="1">
<tr>
<td><div style="display: none;" id="mainContent">THIS IS MAIN CONTENT</div></td>
</tr>
</table>
And a fiddle: http://jsfiddle.net/32HR9/1/
AFTER GETTING THE INFORMATION THAT YOU CAN'T CHANGE THE HTML
I assume you can edit the javascript? You haven't said anything about that. This trick isn't neat but there's no need to change the HTML and it gets the job done:
So, with jQuery
Make the tr visible.
Wrap the content of the tr in a div.
Hide the div.
Make the slideToggle work with the created div.
with code
$('#mainContent').css('display', 'table-row');
$('#mainContent > td').wrapInner("<div class='hideshow'></div>");
$('.hideshow').css('display', 'none');
$('#showContent').click(function (){
$('.hideshow').slideToggle('slow');
});
and a fiddle: http://jsfiddle.net/5E5VS/7/

Try this.
Show Content
<table id="mainContent" width="400" border="1">
<tr>
<td> <p style="display: none"> THIS IS MAIN CONTENT</p></td>
</tr>
</table>
$("#showContent").click(function () {
$('#mainContent').find("p").slideToggle();
});

fixed headers in table, html

i had an table like this
<div style="overflow:auto">
<table>
<thead><tr style="position:fixed"><th></th></tr></thead>
</table>
</div>
Now my problem is when i scroll div the header(that is tr element) is fixed it works fine but when i scroll the scrollbar of window the header tr is not fixed inside the div. I moves along the scroll bar of the window... Can any one help me to find out the solution please

I don't know If I'm getting your question right, but you may find this helpful http://fixedheadertable.com/

Sorry, I tried to do it in CSS alone, but that didn't work out, so you do need a bit of Javascript.
<div style="overflow:auto; position:relative;"
onscroll="document.getElementById('fixedtr').style.top = this.scrollTop+'px';">
<table>
<thead>
<tr style="position:absolute; top:0; left:0" id="fixedtr">
<th>Table header</th>
</tr>
</thead>
See jsFiddle.
This is how you want it, right?

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.