Why does an extra column appear when I hover my table?

Why does an extra column appear when I hover my table? - html

I have created a table with two columns. While hovering mouse outside the table an extra column appears at the right side. I don't want that extra column to appear. What changes do I need to make here?
tr.even {
background-color: #FFFFFF;
}
tr.odd {
background-color: #EEEEEE;
}
.expand b{
font-size:30px;
}
.xhide {
}
.expCode td:hover {
background-color: #ddd;
}
.expCode th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
font-size:16px;
background-color: #276B8E;
color: #FFFFFF;
}
table{
border-color:grey;
display:table;
width:75%;
}
<table class="expCode">
<tbody>
<tr>
<td>
<table border="1" cellspacing="0"; style="width:75%">
<thead>
<tr>
<th style="width:25%">Column1</th>
<th style="width:50%">Column2</th>
</tr>
</thead>
<tbody>
<tr class="even">
<td>Text</td>
<td><p>Text</p></td>
</tr>
<tr class="odd">
<td> Text</td>
<td><p>Text</p></td>
</tr>
<tr class="even">
<td>Text</td>
<td><p>Text</p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

This will solve your issue
<table class="expCode" border="1" cellspacing="0"; style="width:75%">
<thead>
<tr>
<th style="width:25%">Column1</th>
<th style="width:50%">Column2</th>
</tr>
</thead>
<tbody>
<tr class="even">
<td>Text</td>
<td>
<p>Text</p>
</tr>
<tr class="odd">
<td> Text</td>
<td>
<p>Text</p>
</td>
</tr>
<tr class="even">
<td>Text</td>
<td>
<p>Text</p>
</td>
</tr>
</tbody>
</table>

Change your html code to something like this.
<table class="expCode">
<tbody>
<tr>
<td>
<table border="1" cellspacing="0" ; style="width:100%">
<thead>
<tr>
<th style="width:25%">Column1</th>
<th style="width:50%">Column2</th>
</tr>
</thead>
<tbody>
<tr class="even">
<td>Text</td>
<td>
<p>Text</p>
</td>
</tr>
<tr class="odd">
<td> Text</td>
<td>
<p>Text</p>
</td>
</tr>
<tr class="even">
<td>Text</td>
<td>
<p>Text</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

It's actually not an extra column that appears, it's just the color of the outer table's cell that's being changed.
change .expCode td:hover { to .expCode table td:hover { for the rule to only affect the inner table.
tr.even {
background-color: #FFFFFF;
}
tr.odd {
background-color: #EEEEEE;
}
.expand b{
font-size:30px;
}
.xhide {
}
.expCode table td:hover {
background-color: #ddd;
}
.expCode th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
font-size:16px;
background-color: #276B8E;
color: #FFFFFF;
}
table{
border-color:grey;
display:table;
width:75%;
}
<table class="expCode">
<tbody>
<tr>
<td>
<table border="1" cellspacing="0"; style="width:75%">
<thead>
<tr>
<th style="width:25%">Column1</th>
<th style="width:50%">Column2</th>
</tr>
</thead>
<tbody>
<tr class="even">
<td>Text</td>
<td><p>Text</p></td>
</tr>
<tr class="odd">
<td> Text</td>
<td><p>Text</p></td>
</tr>
<tr class="even">
<td>Text</td>
<td><p>Text</p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

I reduced my problem and fixed it. Here is my modified code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="gwt:property" content="locale=en_US">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
tr.even {
background-color: #FFFFFF;
}
tr.odd {
background-color: #EEEEEE;
}
.expand b{
font-size:30px;
}
.xhide
{
}
.expCode td:hover {background-color: #ddd;}
.expCode th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
font-size:16px;
background-color: #276B8E;
color: #FFFFFF;
}
table{
border-color:grey;
display:table;
width:75%;
}
</style>
</head>
<!-- comments only
-->
<body>
<table class="expCode" border="1" cellspacing="0" style="width:75%">
<thead>
<tr>
<th style="width:25%">Column1</th>
<th style="width:50%">Column2</th>
</tr>
</thead>
</table>
</body>
</html>

Related

Hide and show table inside table when check box is checked in pure css

I want to send mail with the below template from code. I am trying to hide and display the secondary table with the checkbox. I think I am stuck with the css selector. Is it possible to hide and show something with the checkbox. Important thing is I want to do it in only css , " NO JS " Here is the codepen edit link : https://codepen.io/rishisarma/pen/QWqyqXd?editors=1100
.box {
display:none;
}
<-- Here is the issue I think when I tried to hide and display the table it is not working.-->
input[id='trigger']:checked table.box{
display:block;
}
table {
font-family: "Trebuchet MS";
margin: 8px;
}
tr:nth-child(odd) {
background-color: #f7f7f7;
}
.rightalign {
text-align: right;
width: 125px;
}
th {
background-color: #e84f32;
padding: 8px;
color: white;
border: 1px solid #e0e0e0;
}
td {
padding: 8px;
border: 1px solid #e0e0e0;
}
<table>
<thead>
<tr>
<th colspan="9" style="width:100%;" id="head">Client Wise AttendenceReport (2021/12/05)</th>
</tr>
<tr>
<th></th>
<th>SRNO</th>
<th>Customer</th>
<th>Organizations</th>
<th>Attendees (2021/12/04)</th>
<th>Attendees (2021/12/05)</th>
<th>Txns (2021/12/04)</th>
<th>Txns (2021/12/05)</th>
<th>Inclination (%)</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" id="trigger">
</td>
<td>1</td>
<td>TSTS</td>
<td>33 (0%)</td>
<td>1605382</td>
<td>1605563 (0.01)</td>
<td>139313</td>
<td>20726</td>
<td>-85.12</td>
</tr>
<tr>
<td colspan="9">
<table class = "box">
<tr>
<td colspan="5" style="background-color: #e84f32; padding: 8px; color:white; text-align:center">Organisation Wise Transaction Report On 05-Dec- 2021</td>
</tr>
<tr>
<th>Slno</th>
<th>Organisation</th>
<th>Registered Users</th>
<th>Present Today</th>
<th>Percent(%)</th>
</tr>
<tr>
<td>1</td>
<td>TSTSATTENDANCE</td>
<td class="rightalign">294</td>
<td class="rightalign">3</td>
<td class="rightalign">1%</td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
<td>2</td>
<td>GVK</td>
<td>2 (0%)</td>
<td>1329</td>
<td>1329 (0)</td>
<td>681</td>
<td>686</td>
<td>0.73</td>
</tr>
<tr>
<td></td>
<td>3</td>
<td>SIL</td>
<td>33 (0%)</td>
<td>202240</td>
<td>203042 (0.4)</td>
<td>111348</td>
<td>7519</td>
<td>-93.25</td>
</tr>
</tbody>
</table>

HTML table design does not render well on Outlook?

I have the following HTML table code:
<html>
<head>
<style>
table {
border-spacing: 0;
}
thead tr {
background: #36304a;
color: #fff;
}
thead th {
padding: 10px 25px;
}
thead th:first-child {
border-top-left-radius: 10px;
}
thead th:last-child {
border-top-right-radius: 10px;
}
tbody tr:nth-child(even) {
background: #f5f5f5;
}
tbody td {
padding: 10px 0 10px 25px;
}
.table-container {
margin-bottom: 20px;
}
.error {
background: #ff6d6c;
}
.success {
background: #c4e0b5;
}
.round-bottom {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr>
<th>Criteria</th>
<th>Expected Value</th>
<th>Result</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Abc</td>
<td>200</td>
<td>500</td>
<td>Fail</td>
</tr>
<tr>
<td>kuku</td>
<td>200</td>
<td>500</td>
<td>OK</td>
</tr>
<tr>
<td>lulu</td>
<td>200</td>
<td>500</td>
<td>OK</td>
</tr>
<tr>
<td colspan="4" class="round-bottom error">
gilbert
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-container">
<table>
<thead>
<tr>
<th>Criteria</th>
<th>Expected Value</th>
<th>Result</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Abc</td>
<td>200</td>
<td>500</td>
<td>Fail</td>
</tr>
<tr>
<td>kuku</td>
<td>200</td>
<td>500</td>
<td>OK</td>
</tr>
<tr>
<td>lulu</td>
<td>200</td>
<td>500</td>
<td>OK</td>
</tr>
<tr>
<td colspan="4" class="round-bottom success">
gilbert
</td>
</tr>
</tbody>
</table>
</div>
</body>
When viewing the email on Outlook, the table does not render properly:
However, on Outlook on the Web it looks fine.
I read online that Outlook uses Word to render HTML, and it has some limitations - but I'm not sure how to get around these. I tried modifying background property to background-color but it didn't do the trick.

Proper width Alignment of child table inside parent table in HTML

I have created a collapsible HTML nested table.
But i am not able to set the proper width after so many futile efforts.
My child table is not fitting to my parent table's head.
Here is the code snippet:
https://jsfiddle.net/preetigupta617/bpLkdx13/
Code:
HTML
<head>
<script>
$('.content').css('display','none');
$( ".collapsible" ).click(function() {
id = $(this).attr('id');
num = id.split("_").pop();
// document.getElementById("mytable_"+num).classList.toggle("show");
if(document.getElementById("mytable_"+num).style.display=='none') {
document.getElementById("mytable_"+num).style.display= 'block';
}
else {
document.getElementById("mytable_"+num).style.display= 'none'
}
console.log(num);
console.log(document.getElementById("mytable_"+num).innerHTML);
</script>
<style>
table {border-collapse:collapse; table-layout:fixed; width:310px;}
table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
/* Style the button that is used to open and close the collapsible content */
.collapsible {
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
background-color: #ccc;
}
/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<table style='width:80%;margin:0 auto;' border='1' bordercolor='BLACK'>
<thead >
<tr class='w3-cyan'><th>S.no</th><th>Command</th><th>Failure Reasons</th><th>Testcase Affected</th><th>Response</th></tr></thead>
<tr id='myBtn_1' class='collapsible'><td>1</td><td colspan=4>build_model</td></tr>
<tr >
<td colspan=1></td><td colspan=1></td>
<td id='mytable_1' class='content' colspan=3><table>
<tr><td>MACHINE_ERROR,OTHER_INFO,WARNINGS,PATTERN_VAR</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/build_model-MACHINE_ERROR-OTHER_INFO-WARNINGS-PATTERN_VAR'>1</a></td><td> Regold</td></tr>
</table></td></tr>
<tr id='myBtn_2' class='collapsible'><td>2</td><td colspan=4>build_testmode</td></tr>
<tr >
<td colspan=1></td><td colspan=1></td>
<td id='mytable_2' class='content' colspan=3><table>
<tr><td>OTHER_INFO,COVERAGE_VAR</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/build_testmode-OTHER_INFO-COVERAGE_VAR'>1</a></td><td> Open CCR</td></tr>
<tr><td>CORE,TESTCASE_ERRORS,CRITICAL_ERRORS,MACHINE_ERROR,PATTERN_VAR,COVERAGE_VAR</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/build_testmode-CORE-TESTCASE_ERRORS-CRITICAL_ERRORS-MACHINE_ERROR-PATTERN_VAR-COVERAGE_VAR'>1</a></td><td> Fix Testcase</td></tr>
</table></td></tr>
<tr id='myBtn_3' class='collapsible'><td>3</td><td colspan=4>commit_tests</td></tr>
<tr >
<td colspan=1></td><td colspan=1></td>
<td id='mytable_3' class='content' colspan=3><table>
<tr><td>MACHINE_ERROR,WARNINGS</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/commit_tests-MACHINE_ERROR-WARNINGS'>1</a></td><td> Rerun</td></tr>
</table></td></tr>
<tr id='myBtn_4' class='collapsible'><td>4</td><td colspan=4>create_logic_tests</td></tr>
<tr >
<td colspan=1></td><td colspan=1></td>
<td id='mytable_4' class='content' colspan=3><table>
<tr><td>CORE,OTHER_INFO,COVERAGE_VAR</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/create_logic_tests-CORE-OTHER_INFO-COVERAGE_VAR'>1</a></td><td> Regold</td></tr>
<tr><td>CORE,CRITICAL_ERRORS,MACHINE_ERROR,OTHER_INFO,WARNINGS,SEVERE,PATTERN_VAR,COVERAGE_VAR</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/create_logic_tests-CORE-CRITICAL_ERRORS-MACHINE_ERROR-OTHER_INFO-WARNINGS-SEVERE-PATTERN_VAR-COVERAGE_VAR'>1</a></td><td> Rerun</td></tr>
</table></td></tr>
<tr id='myBtn_5' class='collapsible'><td>5</td><td colspan=4>diagnose_failures</td></tr>
<tr >
<td colspan=1></td><td colspan=1></td>
<td id='mytable_5' class='content' colspan=3><table>
<tr><td>TESTCASE_ERRORS,CRITICAL_ERRORS,PATTERN_VAR,COVERAGE_VAR</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/diagnose_failures-TESTCASE_ERRORS-CRITICAL_ERRORS-PATTERN_VAR-COVERAGE_VAR'>1</a></td><td> Rerun</td></tr>
</table></td></tr>
<tr id='myBtn_6' class='collapsible'><td>6</td><td colspan=4>verify_test_structures</td></tr>
<tr >
<td colspan=1></td><td colspan=1></td>
<td id='mytable_6' class='content' colspan=3><table>
<tr><td>TESTCASE_ERRORS,MACHINE_ERROR,OTHER_INFO,WARNINGS,SEVERE,COVERAGE_VAR</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/verify_test_structures-TESTCASE_ERRORS-MACHINE_ERROR-OTHER_INFO-WARNINGS-SEVERE-COVERAGE_VAR'>1</a></td><td> Open CCR</td></tr>
</table></td></tr>
<tr id='myBtn_7' class='collapsible'><td>7</td><td colspan=4>write_toggle_gram</td></tr>
<tr >
<td colspan=1></td><td colspan=1></td>
<td id='mytable_7' class='content' colspan=3><table>
<tr><td>CORE</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/write_toggle_gram-CORE'>1</a></td><td> Fix Testcase</td></tr>
</table></td></tr>
</table>
</body>
PS:You can also use the jsfiddle link i have given in post too.
The foldable HTML table is working in actual but not in jsfiddle site.
But i want help only in case of css,i.e i want to set the child table in last 3 columns properly.How can i achieve that?
I tried , but end up only scratching my head .
Thanks in advance !!
[Output with this current code]1

Here you are:
$(".collapsible").click(function() {
$(this).next('tr').toggle();
});
table {
border-collapse: collapse;
table-layout: fixed;
width: 80%;
margin: 0 auto;
}
th {
border: solid 1px;
}
table td {
border: solid 1px #fab;
width: 100px;
word-wrap: break-word;
}
table table {
width: 100%;
}
/* Style the button that is used to open and close the collapsible content */
.collapsible {
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.collapsible+tr:not(:nth-child(2)) {
display: none
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.collapsible:hover {
background-color: #ccc;
}
/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0;
overflow: hidden;
background-color: #f1f1f1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="w3-card w3-round w3-pink">
<h1>
<center>Regression Results</center>
</h1>
</div>
<table>
<thead>
<tr class="w3-cyan">
<th>S.no</th>
<th>Command</th>
<th>Failure Reasons</th>
<th>Testcase Affected</th>
<th>Response</th>
</tr>
</thead>
<tbody>
<tr class="collapsible">
<td>1</td>
<td colspan="4">build_model</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="content" colspan="3">
<table>
<tbody>
<tr>
<td>MACHINE_ERROR,OTHER_INFO,WARNINGS,PATTERN_VAR</td>
<td>1</td>
<td> Regold</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="collapsible">
<td>2</td>
<td colspan="4">build_testmode</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="content" colspan="3">
<table>
<tbody>
<tr>
<td>OTHER_INFO,COVERAGE_VAR</td>
<td>1</td>
<td> Open CCR</td>
</tr>
<tr>
<td>CORE,TESTCASE_ERRORS,CRITICAL_ERRORS,MACHINE_ERROR,PATTERN_VAR,COVERAGE_VAR</td>
<td>1</td>
<td> Fix Testcase</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="collapsible">
<td>3</td>
<td colspan="4">commit_tests</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="content" colspan="3">
<table>
<tbody>
<tr>
<td>MACHINE_ERROR,WARNINGS</td>
<td>1</td>
<td> Rerun</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="collapsible">
<td>4</td>
<td colspan="4">create_logic_tests</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="content" colspan="3">
<table>
<tbody>
<tr>
<td>CORE,OTHER_INFO,COVERAGE_VAR</td>
<td>1</td>
<td> Regold</td>
</tr>
<tr>
<td>CORE,CRITICAL_ERRORS,MACHINE_ERROR,OTHER_INFO,WARNINGS,SEVERE,PATTERN_VAR,COVERAGE_VAR</td>
<td>1</td>
<td> Rerun</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="collapsible">
<td>5</td>
<td colspan="4">diagnose_failures</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="content" colspan="3">
<table>
<tbody>
<tr>
<td>TESTCASE_ERRORS,CRITICAL_ERRORS,PATTERN_VAR,COVERAGE_VAR</td>
<td>1</td>
<td> Rerun</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="collapsible">
<td>6</td>
<td colspan="4">verify_test_structures</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="content" colspan="3">
<table>
<tbody>
<tr>
<td>TESTCASE_ERRORS,MACHINE_ERROR,OTHER_INFO,WARNINGS,SEVERE,COVERAGE_VAR</td>
<td>1</td>
<td> Open CCR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="collapsible">
<td>7</td>
<td colspan="4">write_toggle_gram</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="content" colspan="3">
<table>
<tbody>
<tr>
<td>CORE</td>
<td>1</td>
<td> Fix Testcase</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

https://jsfiddle.net/g4Lo92zb/
I changed your HTML and JS.
You can collapse a row that uses less code, and makes it look neater.
Be sure when you set the display style property on your element, to set it to the valid display property value.
table display: table;
tr display: table-row;
td display: table-cell;

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>

Hide table columns by class

I have a table from n columns. Each cell has a class column-n.
I want to add on table class hide-column-n and hide all cells with class column-n.
Is this possible do it through css?
Example:
.table {
border: 1px solid black;
}
.table thead{
background-color: lightgray;
}
.table td{
border: 1px solid gray;
width: 50px;
}
<table class="table">
<thead>
<tr>
<td class="column-1">One</td>
<td class="column-2">Two</td>
<td class="column-3">Three</td>
<td class="column-x">...</td>
<td class="column-n">N</td>
</tr>
</thead>
<tbody>
<tr>
<td class="column-1">One</td>
<td class="column-2">Two</td>
<td class="column-3">Three</td>
<td class="column-x">...</td>
<td class="column-n">N</td>
</tr>
<tr>
<td class="column-1">One</td>
<td class="column-2">Two</td>
<td class="column-3">Three</td>
<td class="column-x">...</td>
<td class="column-n">N</td>
</tr>
<tr>
<td>...</td>
</tr>
</tbody>
</table>

Here is example https://jsfiddle.net/xr21kwrh/
<table class="table">
<thead>
<tr>
<th class=column-1">One</th>
<th class"column-2">Two</th>
...
<th class="column-n">N</th>
</tr>
</thead>
<tbody>
<tr>
<td class=column-1">One</t>
<td class"column-2">Two</td>
...
<td class="column-n">N</td>
</tr>
<tr>
<td class=column-1">One</t>
<td class"column-2">Two</td>
...
<td class="column-n">N</td>
</tr>
...
</tbody>
</table>
<style>
th:nth-child(2){display: none;}
td:nth-child(2){display: none;}
</style>

<table class="table">
<thead>
<tr>
<th class=column-1">One</th>
<th class"column-2">Two</th>
...
<th class="column-n">N</th>
</tr>
</thead>
<tbody>
<tr>
<td class=column-1">One</t>
<td class"column-2">Two</td>
...
<td class="column-n">N</td>
</tr>
<tr>
<td class=column-1">One</t>
<td class"column-2">Two</td>
...
<td class="column-n">N</td>
</tr>
...
</tbody>
</table>
<style>
.column-n{ display-none !important; }
</style>

If you use sass/scss you can do so (in SCSS):
#for $i from 1 through 10 {
.hide-column-#{$i} .column-#{$i} {
display: none;
}
}
it will compile to:
.hide-column-1 .column-1 {
display: none;
}
.hide-column-2 .column-2 {
display: none;
}
....
.hide-column-n .column-n {
display: none;
}
then use it like expected:
<table class="table hide-column-1 hide-column-2">
codepen demo here

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Why does an extra column appear when I hover my table? - html

Related

Hide and show table inside table when check box is checked in pure css

HTML table design does not render well on Outlook?

Proper width Alignment of child table inside parent table in HTML

Add vertical scroll wheel to HTML table

Hide table columns by class

Categories

Resources