Hovering in a table to affect a header - javascript

I'm not sure if this is even possible to accomplish without JavaScript, but it would be preferable.
This is kind of what my page looks like:
____________________________
| TITLE | |This is a fixed header. I want "TITLE"
|----------------------------| |to be the name of the row, and I want it
| _______ _______ ___| |to show when I hover over one of the
| | | | | | | |image rows.
| | | | | | | |
| |_______| |_______| |___| | [The boxes are the images.]
| _______ _______ ___| |
|__|_______|__|_______|__|___| |
header {
background: #FFFFFF;
position: fixed !important;
width: 100%;
height: 85px;
top: 0;
left: 0;
text-align: left;
font-size: 30px;
border: 1px solid black;
}
body {
padding-top: 100px;
/*equal to the height of your header */
}
r1n {
width: 200px;
height: 200px;
display: inline;
}
r1n:hover {
display: none
}
table tr:hover ~ header r1n {
display: none
}
<header>
<r1n>TITLE_NAME</r1n>
</header>
<body>
<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>
</body>
Is there a CSS method/trick to make the fixed header show the row's name?
Maybe by concealing a bunch of divs in the header and displaying them depending on which row the cursor is on?
EDIT:
#AndrewBone: CSS and JS solution
#Dekel: JS solution
EDIT^2: Just... just look at all the answers. They're all good. CSS/JS/JQ.


I see lots of people saying this isn't possible, it is though I would never suggest you use it in practice.
Here is an example:
body {
margin: 0;
}
table {
margin: 18px 0 0 0;
position: relative;
border: 1px solid black;
}
tr:nth-child(even) {
background: #DDD;
}
tr:nth-child(odd) {
background: #FFF;
}
tr:hover {
background: tomato;
}
tr[data-header]:hover:after {
content: attr(data-header);
position: absolute;
top: -19px;
left: -1px;
border: 1px solid black;
border-bottom-width: 0px;
width: 100%;
}
td {
padding: 5px 15px;
}
<table>
<tr data-header="Header 1">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-header="Header 2">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-header="Header 3">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-header="Header 4">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>
I've added a header attribute to each tr also I've added a pseudo element, this pseudo element puts some content, which in this example is taken from the header attribute thanks to attr(header), and positions it where we want it in relation to the parent, table, just like that we have some code that works and is JS free. But honestly, use JS if you can :-)
Hope this helps.
EDIT:
Here's a pure javascript solution
const trSel = document.querySelectorAll("tr[data-header]");
for (let i = 0; i < trSel.length; i++) {
trSel[i].addEventListener("mouseover", function(evt) {
let headSel = trSel[i].parentElement.parentElement.parentElement.querySelector(":scope > .header");
headSel.innerHTML = trSel[i].dataset.header;
});
}
body {
margin: 0;
}
.header {
padding: 5px 0;
}
tr:nth-child(even) {
background: #DDD;
}
tr:nth-child(odd) {
background: #FFF;
}
tr[data-header]:hover {
background: tomato;
}
td {
padding: 5px 15px;
}
<div>
<div class="header">
Placeholder!
</div>
<table>
<tr data-header="Table 1 Row 1">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-header="Table 1 Row 2">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-header="Table 1 Row 3">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-header="Table 1 Row 4">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>
</div>
<h2>
Wild second table appeared
</h2>
<div>
<div class="header">
Placeholder!
</div>
<table>
<tr data-header="Table 2 Row 1">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-header="Table 2 Row 2">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-header="Table 2 Row 3">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-header="Table 2 Row 4">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>
</div>
It uses the same principles, but now it's actually updating the text so when you move your mouse away it can keep the last selected row. It works with multiple tables too.
EDIT 2: slight edit, I've changed to using data-header instead of header, just because that's what you're meant to do ;-)


Just because you asked for a js solution in the comment #AndrewBone's answer.
Notice the usage of index to find the current position of the hovered tr inside the table. Index starts in 0, hence the +1 you see there.
$(function() {
$('#tbl1 tr').hover(function() {
i = $('#tbl1 tr').index(this) + 1;
$('r1n').text('Row ' + i);
});
});
header {
background: #FFFFFF;
position: fixed !important;
width: 100%;
height: 85px;
top: 0;
left: 0;
text-align: left;
font-size: 30px;
border: 1px solid black;
}
body {
padding-top: 100px;
/*equal to the height of your header */
}
r1n {
width: 200px;
height: 200px;
display: inline;
}
#tbl1 {
border-collapse: collapse;
}
#tbl1 td {
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<r1n>TITLE_NAME</r1n>
</header>
<table id="tbl1" border="1">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>


i see that you have some answers ( and an accepted one ) just wanted to put a JQ solution with targets here if anyone prefers something like this :) ( i guess i doesn't hurt another answer )
in this code, table and header are siblings , even if in your posted code, body is the parent of table and sibling with header. here, everything is automatically inserted inside the default <body> tag
$("table tr").hover(function(){
var data = $(this).attr('data-target'),
target = $(this).parents('table').siblings('header').find('h1')
$(target).each(function(){
if($(this).attr('id') == data) {
$(this).toggle()
}
})
})
header {
background: #FFFFFF;
position: fixed !important;
width: 100%;
height: 85px;
top: 0;
left: 0;
text-align: left;
font-size: 30px;
border: 1px solid black;
}
body {
padding-top: 100px;
/*equal to the height of your header */
}
header h1 {
display:none;
position:absolute;
left:0;
top:0;
margin:0;
}
table tr {
cursor:pointer;
background:blue;
}
table tr:nth-child(odd) {
background:red;
}
table,td {
border-collapse:collapse;
padding:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<h1 id="row1">Title row1 </h1>
<h1 id="row2">Title row2 </h1>
<h1 id="row3">Title row3 </h1>
<h1 id="row4">Title row4 </h1>
</header>
<body>
<table>
<tr data-target="row1">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-target="row2">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-target="row3">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-target="row4">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>
</body>

Related

Multiple tables with sticky headers and horizontal scroll

I want two tables side-by-side that...
Share the same vertical scroll
Have separate horizontal scrolls
Have sticky headers
...all within a container of flexible width and height.
Here is a codepen of my attempt: https://codepen.io/numberjak/pen/gOYGEKz
As you can see I have ticked all my requirements except for both tables having sticky headers.
<div class="container">
<div class="scroll red">
<table>
<thead>
<tr>
<th>Scroll 1</th>
<th>Scroll 2</th>
<th>Scroll 3</th>
<th>Scroll 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
<div class="scroll blue">
<table>
<thead>
<tr>
<th>Scroll 1</th>
<th>Scroll 2</th>
<th>Scroll 3</th>
<th>Scroll 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
</div>
html {
height: 100%;
background-color: black;
}
div {
display: flex;
}
.container {
overflow: auto;
align-items: flex-start;
max-height: 20rem;
}
thead th {
position: sticky;
top: 0;
background-color: grey;
}
td, th {
min-width: 30rem;
padding: 1rem;
background-color: white;
}
tr {
height: 10rem;
}
.scroll {
overflow: auto;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}

Header and the body of the table are still connected, they will still have the same scroll properties. Now to let them not 'work' as a table anymore you can set the display: block. This way and are separated.
You can add this to your css
table tbody, table thead
{
display: block;
}
table tbody
{
overflow: auto;
height: 100px;
}
The scroll issue can be fixed with some javascript!
$(".red tbody").scroll(function() {
$(".blue tbody").scrollTop($(".red tbody").scrollTop());
});
$(".blue tbody").scroll(function() {
$(".red tbody").scrollTop($(".blue tbody").scrollTop() );
});
so the final product look like this
$(".red tbody").scroll(function() {
$(".blue tbody").scrollTop($(".red tbody").scrollTop());
});
$(".blue tbody").scroll(function() {
$(".red tbody").scrollTop($(".blue tbody").scrollTop() );
});
html {
height: 100%;
background-color: black;
}
div {
display: flex;
}
.container {
overflow: auto;
align-items: flex-start;
max-height: 20rem;
}
thead th {
position: sticky;
top: 0;
background-color: grey;
}
td, th {
min-width: 30rem;
padding: 1rem;
background-color: white;
}
tr {
height: 10rem;
}
.scroll {
overflow: auto;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
table tbody, table thead
{
display: block;
}
table tbody
{
overflow: auto;
height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="scroll red">
<table>
<thead>
<tr>
<th>Scroll 1</th>
<th>Scroll 2</th>
<th>Scroll 3</th>
<th>Scroll 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
<div class="scroll blue">
<table>
<thead>
<tr>
<th>Scroll 1</th>
<th>Scroll 2</th>
<th>Scroll 3</th>
<th>Scroll 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
</div>

Z-index: Materialize select always open in background

so I am using materialize css select to style my dropdowns in a form. When I land on my page, however, the dropdown is always "hidden open". More specifically, if I hover below the "residency" dropdown to the white space and even into the later part of the form and I click, it will change the value of the drop down. The only way to get rid of it is if I open the drop down and close it. Why is this occurring?? Any recommendations?
The Z-index of the closed unordered list is 999. When I change it to -1, it goes away but then when I open the drop down, its behind all the other text.

I have added one more div called wrapper and made header and footer position fixed. I have also added the padding in wrapper div as of height of header, same with the case of footer.
Hope this will help
HTML:
<div class="wrapper" style="overflow-y: auto;overflow-x: hidden;padding-top: 34px;padding-bottom: 126px;">
<header id='header'>Test 0.1</header>
<aside id='aside'>
<p>Menu 1</p>
<p>Menu 2</p>
<p>Menu 3</p>
<p>Menu 4</p>
<p>
<span id='spn'>n</span>
</p>
</aside>
<section>
<div id='divMain'>
<table>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
</section>
<footer id='footer'>Address,
<br>phone,
<br>etc.
<br>
<br>Address,
<br>phone,
<br>etc.
</footer>
</div>
CSS:
html,
body {
height: 100%;
margin: 0;
overflow-x: hidden;
overflow-y: hidden;
}
body {
position: relative;
padding-top: 0;
overflow-y: auto;
}
header {
background-color: green;
color: white;
text-align: center;
font-weight: bold;
font-size: 30px;
position: fixed;
width: 100%;
top: 0;
}
section {
float: right;
width: 80%;
overflow-x: auto;
overflow-y: auto;
}
section div {
padding: 10px;
overflow-x: auto;
overflow-y: auto;
}
aside {
float: left;
background-color: lightgreen;
width: 20%;
}
aside p {
margin-left: 20px;
}
footer {
background-color: green;
color: white;
text-align: center;
clear: both;
position: fixed;
bottom: 0;
width: 100%;
}
table {
border-collapse: collapse;
}
th {
border: 1px solid black;
text-align: center;
font-weight: bold;
}
td {
border: 1px solid black;
text-align: center;
}

Grid with freezon last column

I have to create a angular grid with last column frozen. The frozen column is the summation of all the row values. The last row is an editable one. My problem is how to create the HTML/CSS structure. I can create the angular grid but how to create the HTML/CSS structure is my question. Attached is the screen shot of the grid required.
Any pointers very helpful.
Thanks

Here is the solution I came up with : http://jsfiddle.net/anirbankundu/DJqPf/1881/
I implemented using 2 ways - I have indicated in the fiddle which is a more favorable way to implement. Hope that helps
HTML :
<div id="left">
<h4>Left Col</h4>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
</table>
</div>
<div id="right" style="text-align:right;">
<h4>Right Col</h4>
<table>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
</tr>
</table>
</div>
</div>
</div>
CSS :
.table-wrapper {
overflow-x: scroll;
overflow-y: visible;
width: 250px;
}
td,
th {
padding: 5px 20px;
width: 100px;
}
th:first-child {
position: fixed;
right: 35%
}
#container {
display: table;
width: 100%;
border: 1px solid red;
}
#row {
display: table-row;
}
#left,
#right,
#middle {
display: table-cell;
border: 1px solid green;
}
#left {
width: 80%;
max-width: 350px;
overflow-x: scroll;
}

Trying to make fixed table header in HTML, scroll and visibility issues?

I have been trying to make a table in HTML with a fixed header (and a horizontal scrollbar when necessary). This JSFiddle shows what I have so far:
html, body {
margin:0;
padding:0;
height:100%;
}
.horizontalscrollcontainer {
position: relative;
padding-top: 37px;
overflow:auto;
}
.verticalscrollcontainer {
background:transparent;
overflow-y:auto;
overflow-x:visible;
height: 200px;
}
table {
border-spacing: 0;
width:120%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: black;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div {
position: absolute;
background: transparent;
color: black;
padding: 9px 25px;
top: 0px;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div {
border: none;
}
<div class="horizontalscrollcontainer">
<div class="verticalscrollcontainer">
<table>
<thead>
<tr class="header">
<th>Table attribute name
<div>Table attribute name</div>
</th>
<th>Value
<div>Value</div>
</th>
<th>Description
<div>Description</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies whether the table cells should have borders or not</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between cells</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
<td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
<td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
<td>Not supported in HTML5. Specifies a summary of the content of a table</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
<td>Not supported in HTML5. Specifies the width of a table</td>
</tr>
</tbody>
</table>
</div>
</div>
https://jsfiddle.net/byB9d/6248/
The problem I am having is that the horizontal scrollbar seems to go on the verticalscrollcontainer rather than the horizontalscrollcontainer. Is there any way to regulate this (the overflow-x is automatically set to auto because overflow-y is set to auto).
Thanks for any suggestions!

i guess you require this in css:
table thead{position:fixed;}
Fiddle

I would split into 2 sections and dictate the widths (% if responsive).
<table id="table-top">
<tr>
<th>A</th>
<th>B</th>
</tr>
</table>
<div id="table">
<table id="table_id">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</div>
CSS....
#table{
overflow-y: auto;
height:150px;
border-bottom:1px solid grey;
}
table{
width:100%;
}
table td, table th{
border-color: grey;
border: 1px solid;
width:50%;
}
https://jsfiddle.net/tonytansley/mvp4u54q/

use this may help u
<style>
html, body {
margin:0;
padding:0;
height:100%;
}
.container {
position:relative;
background:transparent;
top:0px;
overflow:auto;
width: 100%;
height: 200px;
}
table {
border-spacing: 0;
width:120%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: black;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th:first-child div {
border: none;
}
.wrap {
width: 617px;
}
.wrap table {
width: 600px;
table-layout: fixed;
}
</style>
</head>
<body>
<div class="wrap">
<table class="head">
<tr>
<td>Table attribute name</td>
<td>Value</td>
<td>Description</td>
</tr>
</table>
<div class="container">
<table>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies whether the table cells should have borders or not</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between cells</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
<td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
<td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
<td>Not supported in HTML5. Specifies a summary of the content of a table</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
<td>Not supported in HTML5. Specifies the width of a table</td>
</tr>
</table>
</div>
</div>

Found this fiddle... Looks perfect for you:
Uses a section to wrap the table [Not my work just providing the link]
<section class="">
Fiddle

https://jsfiddle.net/agpq359b/
not sure, it is what you want
<div class="container">
<table>
<thead>
<tr class="header">
<th>Table attribute name
</th>
<th>Value
</th>
<th>Description
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
</tbody>
</table>
</div>
html, body {
margin:0;
padding:0;
height:100%;
}
.container {
background:transparent;
overflow:auto;
width: 100%;
height: 200px;
}
table {
border-spacing: 0;
width:120%;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: black;
padding: 9px 25px
}
th:nth-of-type(1), td:nth-of-type(1){
width:200px;
}
th:nth-of-type(2), td:nth-of-type(2){
width:100px;
}
th:nth-of-type(3), td:nth-of-type(3){
width:200px;
}
td + td {
border-left:1px solid #eee;
}
thead {
position:absolute;
border: none;
top:0px;
}
tbody{
margin-top:38px;
display:block;
}

I think you best take the header out of the container:
<div class="xclass">
<table>
<thead>
<tr class="header">
<th>Table attribute name
<div class="headerdiv">Table attribute name</div>
</th>
<th>Value
<div>Value</div>
</th>
<th>Description
<div>Description</div>
</th>
</tr>
</thead>
</table>
</div>
Check this Fiddle - https://jsfiddle.net/byB9d/6241/

Html table with Row lines hidden

<!DOCTYPE html>
<html>
<body>
<table border="1" style="width:100%">
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>10</td>
<td>10</td>
</tr>
</table>
</body>
</html>
The above html data provides a table which has corresponding rows and columns. I want a format in which lines between rows should be hidden only column lines and table border lines should be visible . Hope my question is clear now . I want to create a table where lines between rows should be hidden

You can use the following css:
JSFIDDLE https://jsfiddle.net/seadonk/uf37xzqh/3/
HTML
<table id="thetable">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>2</td><td>2</td><td>2</td></tr>
</table>
CSS
#thetable {
border: 2px solid gray;
background: lightgray;
border-spacing: 0px;
border-collapse: collapse;
}
#thetable td{
border-right: 2px solid gray;
padding: 20px;
}

You need to set the css properties border and border-collapse on your table tag and set the right border for your td.
table {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
td {
border-right: 1px solid black;
text-align: center;
padding: 5px;
}
<table>
<tr>
<td> a </td>
<td> b </td>
</tr>
<tr>
<td> c </td>
<td> d </td>
</tr>
</table>

<table frame="box" rules="cols">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

try this
JsFieddle
HTML
<table style='border:solid' cellpadding="10" cellspacing="0">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</table>
css
td{border-right:solid}

Categories