IE9 nested table fill height of parent td - html

I'm trying to nest tables and I want the nested tables to have heights equal to the heights of their containers.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="wrapper">
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th>Col 6</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td class="has-nested-table">
<table>
<tbody>
<tr>
<td>d</td>
<td>e</td>
</tr>
</tbody>
</table>
</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<td>h</td>
<td>i</td>
<td>j with some other letters because he has been so lonely lately</td>
<td class="has-nested-table">
<table>
<tbody>
<tr>
<td>k</td>
<td>l</td>
</tr>
</tbody>
</table>
</td>
<td>m</td>
<td>n</td>
</tr>
<tr>
<td>o</td>
<td>p</td>
<td>q</td>
<td class="has-nested-table">
<table>
<tbody>
<tr>
<td>r</td>
<td>s</td>
</tr>
<tr>
<td>t</td>
<td>u</td>
</tr>
<tr>
<td>v</td>
<td>w</td>
</tr>
</tbody>
</table>
</td>
<td>x</td>
<td>y</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
and here's the CSS
*
{
margin:0;
outline:0;
padding:0
}
html, body
{
font:normal 11px/1.4 Helvetica, Arial, Sans-Serif;
height:100%
}
.wrapper
{
margin:0 auto;
padding:0 10px;
width:940px
}
table
{
border-collapse:collapse;
height:100%;
table-layout:fixed;
width:100%
}
thead
{
background:#595959;
border:1px solid #595959
}
tbody, tr
{
height:100%
}
th
{
color:#f5f5f5
}
th, td
{
padding:5px
}
td
{
border:1px solid #ccc;
text-align:center;
vertical-align:top
}
td.has-nested-table
{
padding:0
}
td table
{
height:100%
}
td td
{
border-bottom:0;
border-left:0;
border-top:0;
vertical-align:top
}
td td:last-child
{
border:0
}
The nested tables expand in firefox and chrome but not in IE9. Help!


Add this css and then try
td.has-nested-table table{
height: auto;
}


The problem is that you are assigning the border to
td td {
and as the text takes in connecting column take more space as in
<td>j with some other letters because .... </td>
the nested table will not expand as it has only one row.
So to fix this, in addition to the #Harshit answer you need to add
td td { border: 0px; }
Check the http://jsfiddle.net/raunakkathuria/8UxbS/
working fine on IE and looks much better if border are not important in nested table, but if border are required then you need to add rowspan and stuff but that will not be full proof

Related

Add vertical scroll wheel to HTML table

I have a basic table and would like to show the first 3 rows under the header, then provide a scroll wheel to display the remaining 2 rows.
I have tried setting the height of the table and using overflow: scroll in various places but cannot get to work. I wasn't sure if this property could even be used on tables or if it was just for divs.
My code is below, many thanks in advance for any help.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 15px 100px;
}
</style>
<table>
<thead>
<tr>
<th>Name</th>
<th>DOB</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>26.01.1989</td>
<td>john#email.com</td>
</tr>
<tr>
<td>Rick Thompson</td>
<td>15.04.1995</td>
<td>rick#email.com</td>
</tr>
<tr>
<td>Tim Bloggs</td>
<td>03.02.2000</td>
<td>tim#email.com</td>
</tr>
<tr>
<td>Bob Roberton</td>
<td>11.04.1985</td>
<td>bob#email.com</td>
</tr>
<tr>
<td>Joe Bishop</td>
<td>03.02.2010</td>
<td>joe#email.com</td>
</tr>
</tbody>
</table>
</body>

You have to put the table inside a div and then set the height of the div to be smaller than the height of your table and overflow-y: scroll.
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 15px 100px;
}
.table-wrap {
height: 222px;
overflow-y: scroll;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Name</th>
<th>DOB</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>26.01.1989</td>
<td>john#email.com</td>
</tr>
<tr>
<td>Rick Thompson</td>
<td>15.04.1995</td>
<td>rick#email.com</td>
</tr>
<tr>
<td>Tim Bloggs</td>
<td>03.02.2000</td>
<td>tim#email.com</td>
</tr>
<tr>
<td>Bob Roberton</td>
<td>11.04.1985</td>
<td>bob#email.com</td>
</tr>
<tr>
<td>Joe Bishop</td>
<td>03.02.2010</td>
<td>joe#email.com</td>
</tr>
</tbody>
</table>
</div>
</body>

table {
border-collapse: collapse;
max-height: 50px;
overflow: auto;
}
th, td {
border: 1px solid black;
padding: 15px 100px;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>DOB</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>26.01.1989</td>
<td>john#email.com</td>
</tr>
<tr>
<td>Rick Thompson</td>
<td>15.04.1995</td>
<td>rick#email.com</td>
</tr>
<tr>
<td>Tim Bloggs</td>
<td>03.02.2000</td>
<td>tim#email.com</td>
</tr>
<tr>
<td>Bob Roberton</td>
<td>11.04.1985</td>
<td>bob#email.com</td>
</tr>
<tr>
<td>Joe Bishop</td>
<td>03.02.2010</td>
<td>joe#email.com</td>
</tr>
</tbody>
</table>

Adding continuous border to only header and footer of table

I would like a table where some cells have broken borders and others have continuous borders. For example, here is the html for a four column, 12 row table:
<table>
<thead>
<tr class="header">
<th id="blank_cell"></th> <!-- blank -->
<th>first_c</th>
<th>second_c</th>
<th>third_c</th>
</tr>
</thead>
<tbody>
<tr>
<th>row one</th>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
</tr>
<tr>
<th>row two</th>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
<tr>
<th>row three</th>
<td>3,1,</td>
<td>3,2</td>
<td>3,3</td>
</tr>
<tr>
<th>row four</th>
<td>4,1</td>
<td>4,2</td>
<td>4,3</td>
</tr>
<tr>
<th>row five</th>
<td>5,1</td>
<td>5,2</td>
<td>5,3</td>
</tr>
<tr>
<th>row six</th>
<td>6,1</td>
<td>6,2</td>
<td>6,3</td>
</tr>
<tr>
<th>row seven</th>
<td>7,1</td>
<td>7,2</td>
<td>7,3</td>
</tr>
<tr>
<th>row eight</th>
<td>8,1</td>
<td>8,2</td>
<td>8,3</td>
</tr>
<tr>
<th>row nine</th>
<td>9,1</td>
<td>9,2</td>
<td>9,3</td>
</tr>
<tr>
<th>row ten</th>
<td>10,1</td>
<td>10,2</td>
<td>10,3</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>End</th>
<td>e_one</td>
<td>e_two</td>
<td>e_three</td>
</tr>
</tfoot>
</table>
I would like the thead cells to have a continuous border along the bottom (except for the first, blank cell), whilst maintaining a broken border on the other rows.
Here is some CSS, it creates broken borders along the bottom of the rows (except the leftmost cells of each row).
body {
font-family:Arial,Verdana,sans-serif;
color:#111111;
}
table {
width:450px;
}
td,th {
padding:7px 10px 10px 10px;
}
thead th {
border-bottom:4px solid #111111;
}
tbody th {
border-left:2px solid #111111;
border-right:4px solid #111111;
}
tbody td {
border-bottom:2px solid #111111;
}
th {
text-transform:uppercase;
letter-spacing:0.1em;
word-spacing:0.3em;
text-align:left;
}
#blank_cell {
border:none;
}
tr:hover {
background-color:#c3e6e5;
}
I want the very first row - the header row - to have a continuous, unbroken line, whereas I want the others to remain as they are (i.e. broken). All I can find, so far, is styling that is applied to the whole table: for example, I can't seem to collapse borders or set zero spacing on just the cells in the thead part of the table. So if I make the borders continuous, it is applied to the entire table.

You'll probably have to put it in two different tables, the first containing the content of your tr.header, with cellspacing="0" and the second with the default value. However, that means that you'll have to add CSS to keep the width's consistent, and that may be a problem depending on what you are putting into the table(s). If that isn't a problem, here is the code with all columns set to 25% width:
(and a JSFiddle)
<body>
<table cellspacing="0">
<thead>
<tr class="header">
<th id="blank_cell"></th> <!-- blank -->
<th>first_c</th>
<th>second_c</th>
<th>third_c</th>
</tr>
</thead>
</table>
<table>
<tbody>
<tr>
<th>row one</th>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
</tr>
<tr>
<th>row two</th>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
<tr>
<th>row three</th>
<td>3,1,</td>
<td>3,2</td>
<td>3,3</td>
</tr>
<tr>
<th>row four</th>
<td>4,1</td>
<td>4,2</td>
<td>4,3</td>
</tr>
<tr>
<th>row five</th>
<td>5,1</td>
<td>5,2</td>
<td>5,3</td>
</tr>
<tr>
<th>row six</th>
<td>6,1</td>
<td>6,2</td>
<td>6,3</td>
</tr>
<tr>
<th>row seven</th>
<td>7,1</td>
<td>7,2</td>
<td>7,3</td>
</tr>
<tr>
<th>row eight</th>
<td>8,1</td>
<td>8,2</td>
<td>8,3</td>
</tr>
<tr>
<th>row nine</th>
<td>9,1</td>
<td>9,2</td>
<td>9,3</td>
</tr>
<tr>
<th>row ten</th>
<td>10,1</td>
<td>10,2</td>
<td>10,3</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>End</th>
<td>e_one</td>
<td>e_two</td>
<td>e_three</td>
</tr>
</tfoot>
</table>
</body>
body {
font-family:Arial,Verdana,sans-serif;
color:#111111;
}
table {
width:450px;
}
td,th {
padding:7px 10px 10px 10px;
}
thead th {
border-bottom:4px solid #111111;
}
tbody th {
border-left:2px solid #111111;
border-right:4px solid #111111;
}
tbody td {
border-bottom:2px solid #111111;
width: 25%;
}
th {
text-transform:uppercase;
letter-spacing:0.1em;
word-spacing:0.3em;
text-align:left;
width: 25%;
}
#blank_cell {
border:none;
}
tr:hover {
background-color:#c3e6e5;
}

Nested table with table-layout: fixed affecting parent table

I'm giving my nested table (within a <td> element) the style table-layout: fixed. For some reason, this is affecting my parent table as well:
Demo:
document.getElementById('set-fixed').addEventListener('click', function() {
document.getElementById('result').innerHTML = (
document.getElementById('nested').classList.toggle('fixed')
? 'fixed'
: 'not fixed'
)
})
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 2px;
}
table.fixed {
table-layout: fixed;
}
<p>Set nested table's style <code>table-layout: fixed</code>: <button id="set-fixed">Toggle</button> (current: <span id='result'>not fixed</span>)</p>
<table width="100%">
<tr>
<th>Name</th>
<th>Description</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
<tr>
<td colspan="4">
<table id='nested' width="100%">
<tr>
<td>Foo</td>
<td>Baaaaaaar!</td>
<td>Baz</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Taco</td>
<td>Beautiful, cheesy, and delicious.</td>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>Marshmallow</td>
<td>Too sweet for my tastes!</td>
<td>A</td>
<td>B</td>
</tr>
</table>
Is this a bug with Firefox, or intentional (according to the relevant official spec)? What can I do to make my nested table's layout fixed without affecting my parent table?

How to hide the border for specified rows of a table?

I want to hide the border for a specific rows of a table.How to do it?
Any Idea?
Sample code is Highly Appreciated.

Use the CSS property border on the <td>s following the <tr>s you do not want to have the border.
In my example I made a class noBorder that I gave to one <tr>. Then I use a simple selector tr.noBorder td to make the border go away for all the <td>s that are inside of <tr>s with the noBorder class by assigning border: 0.
Note that you do not need to provide the unit (i.e. px) if you set something to 0 as it does not matter anyway. Zero is just zero.
table, tr, td {
border: 3px solid red;
}
tr.noBorder td {
border: 0;
}
<table>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr class="noBorder">
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>A3</td>
<td>A3</td>
</tr>
</table>
Here's the output as an image:

I use this with good results:
border-style:hidden;
It also works for:
border-right-style:hidden; /*if you want to hide just a border on a cell*/
Example:
<style type="text/css">
table, th, td {
border: 2px solid green;
}
tr.hide_right > td, td.hide_right{
border-right-style:hidden;
}
tr.hide_all > td, td.hide_all{
border-style:hidden;
}
}
</style>
<table>
<tr>
<td class="hide_right">11</td>
<td>12</td>
<td class="hide_all">13</td>
</tr>
<tr class="hide_right">
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr class="hide_all">
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
Here is the result:

Add programatically noborder class to specific row to hide it
<style>
.noborder
{
border:none;
}
</style>
<table>
<tr>
<th>heading1</th>
<th>heading2</th>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
</tr>
/*no border for this row */
<tr class="noborder">
<td>content1</td>
<td>content2</td>
</tr>
</table>

You can simply add these lines of codes here to hide a row,
Either you can write border:0 or border-style:hidden; border: none or it will happen the same thing
<style type="text/css">
table, th, td {
border: 1px solid;
}
tr.hide_all > td, td.hide_all{
border: 0;
}
}
</style>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr class= hide_all>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
running these lines of codes can solve the problem easily

HTML table with horizontal scrolling (first column fixed)

I have been trying to think of a way to make a table with a fixed first column (and the rest of the table with a horizontal overflow) I saw a post which had a similar question. but the fixed column bit did not seem to be resolved. Help?

How about:
table {
table-layout: fixed;
width: 100%;
*margin-left: -100px; /*ie7*/
}
td, th {
vertical-align: top;
border-top: 1px solid #ccc;
padding: 10px;
width: 100px;
}
.fix {
position: absolute;
*position: relative; /*ie7*/
margin-left: -100px;
width: 100px;
}
.outer {
position: relative;
}
.inner {
overflow-x: scroll;
overflow-y: visible;
width: 400px;
margin-left: 100px;
}
<div class="outer">
<div class="inner">
<table>
<tr>
<th class=fix></th>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th class="fix">Col 5</th>
</tr>
<tr>
<th class=fix>Header A</th>
<td>col 1 - A</td>
<td>col 2 - A (WITH LONGER CONTENT)</td>
<td>col 3 - A</td>
<td>col 4 - A</td>
<td class=fix>col 5 - A</td>
</tr>
<tr>
<th class=fix>Header B</th>
<td>col 1 - B</td>
<td>col 2 - B</td>
<td>col 3 - B</td>
<td>col 4 - B</td>
<td class=fix>col 5 - B</td>
</tr>
<tr>
<th class=fix>Header C</th>
<td>col 1 - C</td>
<td>col 2 - C</td>
<td>col 3 - C</td>
<td>col 4 - C</td>
<td class=fix>col 5 - C</td>
</tr>
</table>
</div>
</div>
You can test it out in this jsbin: http://jsbin.com/uxecel/4/edit

Based on skube's approach, I found the minimal set of CSS I needed was:
.horizontal-scroll-except-first-column {
width: 100%;
overflow: auto;
}
.horizontal-scroll-except-first-column > table {
margin-left: 8em;
}
.horizontal-scroll-except-first-column > table > * > tr > th:first-child,
.horizontal-scroll-except-first-column > table > * > tr > td:first-child {
position: absolute;
width: 8em;
margin-left: -8em;
background: #ccc;
}
.horizontal-scroll-except-first-column > table > * > tr > th,
.horizontal-scroll-except-first-column > table > * > tr > td {
/* Without this, if a cell wraps onto two lines, the first column
* will look bad, and may need padding. */
white-space: nowrap;
}
<div class="horizontal-scroll-except-first-column">
<table>
<tbody>
<tr>
<td>FIXED</td> <td>22222</td> <td>33333</td> <td>44444</td> <td>55555</td> <td>66666</td> <td>77777</td> <td>88888</td> <td>99999</td> <td>AAAAA</td> <td>BBBBB</td> <td>CCCCC</td> <td>DDDDD</td> <td>EEEEE</td> <td>FFFFF</td>
</tr>
</tbody>
</table>
</div>

I have a similar table styled like so:
<table style="width:100%; table-layout:fixed">
<tr>
<td style="width: 150px">Hello, World!</td>
<td>
<div>
<pre style="margin:0; overflow:scroll">My preformatted content</pre>
</div>
</td>
</tr>
</table>

Use jQuery DataTables plug-in, it supports fixed header and columns.
This example adds fixed column support to the html table "example":
http://datatables.net/extensions/fixedcolumns/
For two fixed columns:
http://www.datatables.net/release-datatables/extensions/FixedColumns/examples/two_columns.html

You can use below table style to have horizontal scrolling table with fixed first column.
<style type="text/css">
table, th, td {
border: 1px solid black;
}
.table-style {
overflow-x: auto;
}
.table-style tr th:first-child {
position: sticky;
left: 0;
z-index: 2;
background-color: white;
}
</style>
<div class="table-style">
<table>
<thead>
<tr>
<th>_col1_row1_</th>
<th>_col2_row1_</th>
<th>_col3_row1_</th>
<th>_col4_row1_</th>
<th>_col5_row1_</th>
</tr>
</thead>
<tbody>
<tr>
<th>_col1_row2_</th>
<td>_col2_row2_</td>
<td>_col3_row2_</td>
<td>_col4_row2_</td>
<td>_col5_row2_</td>
</tr>
<tr>
<th>_col1_row3_</th>
<td>_col2_row3_</td>
<td>_col3_row3_</td>
<td>_col4_row3_</td>
<td>_col5_row3_</td>
</tr>
<tr>
<th>_col1_row4_</th>
<td>_col2_row4_</td>
<td>_col3_row4_</td>
<td>_col4_row4_</td>
<td>_col5_row4_</td>
</tr>
<tr>
<th>_col1_row5_</th>
<td>_col2_row5_</td>
<td>_col3_row5_</td>
<td>_col4_row5_</td>
<td>_col5_row5_</td>
</tr>
</tbody>
</table>

Take a look at this JQuery plugin:
http://fixedheadertable.com
It adds vertical (fixed header row) or horizontal (fixed first column) scrolling to an existing HTML table. There is a demo you can check for both cases of scrolling.

Here's an example with fixed first and last columns. Sticky works better than absolute positioning for expanding the rows when the cells have more content.
Note - this also works with rowspan table cells. The table holds its correct shape.
.wrapper {
overflow-x:scroll;
width:100%;
}
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
background: white;
}
tr {
border-top: 1px solid #ccc;
}
td, th {
vertical-align: top;
text-align: left;
width:150px;
padding: 5px;
}
.fix {
position:sticky;
background: white;
}
.fix:first-child {
left:0;
width:180px;
}
.fix:last-child {
right:0;
width:120px;
}
<div class="wrapper">
<table>
<thead>
<th class='fix'>Fixed</th>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th class='fix'>Fixed</th>
</thead>
<tbody>
<tr>
<td class='fix'>First Content</td>
<td>A1</td>
<td>A2 (with longer content)</td>
<td>A3</td>
<td>A4</td>
<td>A5</td>
<td class='fix'>Last Content</td>
</tr>
<tr>
<td class='fix'>First Content (with longer content)</td>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<td>B4</td>
<td>B5</td>
<td class='fix'>Last Content</td>
</tr>
<tr>
<td class='fix'>First Content</td>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
<td>C5</td>
<td class='fix'>Last Content (with longer content)</td>
</tr>
</tbody>
</table>
</div>
Example to play with: https://jsbin.com/qawidijigi/edit?html,css,output