Style on colgroup not working - javascript

I have following colgroup not working properly.
<colgroup class="" style="background-color:#FF0000;"></colgroup>
Please see this jsfiddle. My styles on colgroup not working.

Most properties that you can set on colgroup won’t have an effect, since by definitions, table cells inherit properties from tr elements (rows), not columns or column groups (to the extent that there is inheritance).
Set, in CSS, the properties directly on the cell elements. For example, to set the background color of the first two columns, assuming that only td markup is used for the cells, use
td:first-child, td:first-child + td {
background: #f00;
color: #fff;
}

Here is an example of colgroup:
<html> <body>
<table width="100%" border="1"> <colgroup style="background-color:#22FF22;"></colgroup> <colgroup style="background-color:#888888;"></colgroup> <colgroup style="background-color:#FF0000;"></colgroup>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
</tr>
</table>
</body> </html>
if your code is bit different show us the more code to repy appropriately..

Related

line underneath HTML table: caption or tfoot

I want to show an HTML table with a caption on top and a horizontal line underneath, like this:
I see two ways to implement this, but both have their respective downsides. First method is like this:
<table>
<caption><b>***** yada yada yada *****</b></caption>
<tr>
<th></th>
<th>lorem</th>
<th>ipsum</th>
<th>dolor</th>
<th>sit</th>
<th>amet</th>
</tr>
<tr>
<th>hello</th>
<td>note</td>
<td>the</td>
<td>hori</td>
<td>zontal</td>
<td>line</td>
</tr>
<tr>
<th>world</th>
<td>under</td>
<td>neath:</td>
<td>2nd</td>
<td>caption??</td>
<td>tfoot??</td>
</tr>
<tfoot>
<tr>
<td colspan="6">
<hr>
</td>
</tr>
</tfoot>
</table>
What I don't like about this is that I have to use the colspan attribute; you know, the real table is generated from data, and finding out the colspan means some extra JavaScript I have to write, if I do it like this.
The other way would be like this:
<table>
<caption><b>***** yada yada yada *****</b></caption>
<caption style="caption-side: bottom;">
<hr>
</caption>
<tr>
<th></th>
<th>lorem</th>
<th>ipsum</th>
<th>dolor</th>
<th>sit</th>
<th>amet</th>
</tr>
<tr>
<th>hello</th>
<td>note</td>
<td>the</td>
<td>hori</td>
<td>zontal</td>
<td>line</td>
</tr>
<tr>
<th>world</th>
<td>under</td>
<td>neath:</td>
<td>2nd</td>
<td>caption??</td>
<td>tfoot??</td>
</tr>
</table>
By using caption instead of tfoot, I don't have to give the colspan, which is good. But the table already has a caption, and the second caption is not compliant with the spec.
The second method is simpler and looks just fine in all browsers I tested with, so I'm preferring that - browsers seem to be able to handle lot's of 'meaningful violations' of the spec. But it doesn't feel 100% comfortable to be 'naughty' like that.
Q1: Is there a way to do this without tfoot and colspan, while being spec compliant at the same time?
Q2: do the above methods really look the same in all browsers?
Q1: Is there a way to do this without tfoot and colspan, while being
spec compliant at the same time?
Yes, do your styling with CSS. HTML is a semantic language.
Q2: do the above methods really look the same in all browsers?
In any modern, standards compliant client, yes they will.
Also, the <b> element shouldn't be used for purely stylistic purposes. It's a semantic tag to invoke emphasis. Styling should be done with CSS (shown below).
table { border-bottom: 1px solid black; }
caption { font-weight:bold; }
<table>
<caption>***** yada yada yada ****</caption>
<tr>
<th></th>
<th>lorem</th>
<th>ipsum</th>
<th>dolor</th>
<th>sit</th>
<th>amet</th>
</tr>
<tr>
<th>hello</th>
<td>note</td>
<td>the</td>
<td>hori</td>
<td>zontal</td>
<td>line</td>
</tr>
<tr>
<th>world</th>
<td>under</td>
<td>neath:</td>
<td>2nd</td>
<td>caption??</td>
<td>tfoot??</td>
</tr>
</table>
Q2: do the above methods really look the same in all browsers?
No, they don't. The hr in tfoot is a couple of pixels shorter compared to the hr within caption, the line thickness of '1px solid black' is not really the same line thickness as that of hr, and also, the vertical spacing varies by a few pixels (not many) between the 3 solutions.
But yes, I agree, you should do this with CSS, and not use hr at all.
<!DOCTYPE html>
<html>
<head>
<title>HTML colspan Attribute</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
text-align: center;
}
</style>
</head>
<body>
<center>
<h1 style="color: green;">Table Design</h1>
<h2>HTML colspan & Rowspan Attribute</h2>
<table>
<tr>
<th colspan="2">Name</th>
<th colspan="2">Phone</th>
<th colspan="2">Address</th>
</tr>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Home</td>
<td>Office</td>
<td>Present</td>
<td>Parmanent</td>
</tr>
<tr>
<td>Sayeed</td>
<td>Dev</td>
<td>017597383</td>
<td>01784763</td>
<td>BD</td>
<td>Dhaka</td>
</tr>
<tr>
<td>Sayeed</td>
<td>Dev</td>
<td colspan="2">017597383</td>
<td colspan="2">USA</td>
</tr>
<tr>
<td rowspan="2">Sayeed</td>
<td >Dev</td>
<td >017597383</td>
<td >017597383</td>
<td rowspan="2">USA</td>
<td >Dhaka</td>
</tr>
<tr>
<td>Dev</td>
<td >017597383</td>
<td >017597383</td>
<td >Dhaka</td>
</tr>
</table>
</center>
</body>
</html>

removing some empty table details and adding classes and width

I am trying to remove the empty code from table with jquery and add some class to the table tags
like i am trying to remove <td class="faux_align"></td> and <th class="faux_align"></th> from the table and check if the table already has a class of table - do nothing and if it does not have a class of table' - do add the classtable` to the table tag.
and also checking if the width attribute is defined within table and if not, add width as 100% and if defined but width is not 100%, make its width 100%
I am trying something like this:
$('table > tr > td').remove();
and same with th tag, but i am confused how do i do with remaining this in one single jquery function.
$('table').addClass('table').attr('width', '100%').find('td.faux_align, th.faux_align').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="">
<tr>
<th class="faux_align">faux</th>
<th>text</th>
</tr>
<tr>
<td class="faux_align">faux</td>
<td>text</td>
</tr>
</table>
<table class="table">
<tr>
<th class="faux_align">faux</th>
<th>text</th>
</tr>
<tr>
<td class="faux_align">faux</td>
<td>text</td>
</tr>
</table>

Creating a custom table row

I am trying to create a custom table row but having difficulty getting it to behave properly. I've tried the two below methods and they give bizarre results. I realize that this is very easy to to without custom elements but this is a small example of a much larger project. What can I change to achieve the desired result?
class customTableRow extends HTMLElement {
constructor(){
super();
var shadow = this.attachShadow({mode: 'open'});
this.tableRow = document.createElement('tr');
var td = document.createElement('td');
td.innerText = "RowTitle";
this.tableRow.appendChild(td);
var td2 = document.createElement('td');
td2.innerText = "RowContent";
td2.colSpan = 4;
this.tableRow.appendChild(td2);
shadow.appendChild(this.tableRow);
}
}
customElements.define('custom-tr', customTableRow);
//Attempt 2
var newTr = new customTableRow;
document.getElementById('table2Body').appendChild(newTr);
td {
border: 1px solid black;
}
<span>Attempt 1:</span>
<table>
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
<th>Five</th>
</tr>
</thead>
<tbody>
<custom-tr />
</tbody>
</table>
<hr>
<span>Attempt 2:</span>
<table id="table2">
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
<th>Five</th>
</tr>
</thead>
<tbody id="table2Body">
<!-- It should append here -->
</tbody>
</table>
<hr>
<span>This is how I want it to look:</span>
<table id="table2">
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
<th>Five</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row Title</td>
<td colspan="4">Row Content</td>
</tbody>
</table>
A <table> element and its subcomponents <tbody>, <tr> require a very specific syntax. For example, only <tr> elements are authorized as children of <tbody>.
Therefore you cannot define a element and insert it in <tbody> or <table>. If you do that it will be moved outside of the <table> at parsing. Hence the display of your first example (look the code in the Dev Tools).
Instead you should define a customized tag instead like in this answer to a similar question.
Or you should redefine a complete custom table structure with <custom-table>, <custom-tbody>... like in this other answer.
Also, you should use closing tag <custom-tr></custom-tr>, and insert your CSS rule in the Shadow DOM if you want it to by applied inside it.

Table row hover, background change and click but have some child cells in the row have different properties

<table>
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
</tr>
<tr onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="DoNav('go.html');">
<td>1</td>
<td>John/td>
<td>Dump</td>
</tr>
</table>
Javascript:
function ChangeColor(tableRow, highLight)
{if (highLight)
{tableRow.style.backgroundColor = '#F5FFDB';}
else
{tableRow.style.backgroundColor = '';}}
function DoNav(theUrl)
{document.location.href = theUrl;}
I use the following structure to draw the table. When I hover on a row it changes the background and anywhere I click on the row it will jump to the url. What I'm trying to do is have some id identifier (that maybe goes into <td>) which basically tells certain columns in a row to behave differently. Namely this is what I'm looking for:
<table>
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
</tr>
<tr>
<td id="hover_go_style_1">1</td>
<td id="hover_go_style_1">John</td>
<td id="hover_go_style_2">Dump</td>
</tr>
</table>
Any ideas?
EDIT:
I forgot to mention... the id="hover_go_style_1" would take me to one url and id="hover_go_style_2" would take me to another url. That's the "difference". As it is now with onClick the whole row takes me to one url, but in essence im trying to isolate cells. Not sure how to explain this better.
You should be using CSS for your hover color, it's much simpler there. Your click event can be much nicer hooked up and handled completely in your JavaScript also. I've added a data-url (HTML5-compatible) attribute to your row to define the URL.
jsFiddle
HTML
<table>
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
</tr>
<tr data-url="go.html">
<td>1</td>
<td>John</td>
<td>Dump</td>
</tr>
</table>
JS
$('tr[data-url]').click(function () {
window.location.href = $(this).attr('data-url');
});
CSS
tr:hover td {
background-color:#F5FFDB;
}
/* Style the third column differently */
tr:hover td:nth-child(3) {
background-color:#F00;
}

HTML column width changes when table row is hidden

I am a relative newcomer to web programming, so probably I am making some obvious mistake here.
When I am trying to hide a row in a table from javascript like rows[i].style.display = 'none', the table layout is getting completely broken. Originally, the cell content was getting wrapped, and the table width was getting shrunk. I then added style="table-layout: fixed" in the table tag and style="white-space:nowrap" in each td. This stopped the line wrapping, but still the content was not aligned on a line. Cells started moving left if there is space and column width varied from one row to another. I then added a fixed width to each of the th and td element and also to the div containing the table. Still the problem remained.
My current HTML is something like the following.
<div style="width: 300px">
<table id="errorTable" width="100%" cellpadding="5" cellspacing="2" style="table-layout: fixed">
<tr id="HeaderRow">
<th style="width: 100px;">Header 1</th>
<th style="width: 50px;">Header 2</th>
<th style="width: 150px;">Header 3</th>
</tr>
<tr id="DetailRow1">
<td style="white-space:nowrap; width: 100px;">Data 1_1 in Row 1</td>
<td style="white-space:nowrap; width: 50px;">Data 1_2 in Row 1</td>
<td style="white-space:nowrap; width: 150px;">Data 1_3 in Row 1</td>
</tr>
<tr id="DetailRow2">
<td style="white-space:nowrap; width: 100px;">Data 2</td>
<td style="white-space:nowrap; width: 50px;">Data 2</td>
<td style="white-space:nowrap; width: 150px;">Data 2</td>
</tr>
<tr id="DetailRow3">
<td style="white-space:nowrap; width: 100px;">Data 3_1</td>
<td style="white-space:nowrap; width: 50px;">Data 3_2</td>
<td style="white-space:nowrap; width: 150px;">Data 3_3</td>
</tr>
</table>
</div>
When the table is displayed first time, the columns are aligned properly, with width 100, 50 and 150 px respectively. But if a row, say the second one is hidden, the cell width of the remaining two displayed rows are no longer fixed at 100, 50 and 150 and data is no longer aligned vertically. Please note that the overall table width remains 300 px. Data in each cell moves left if there is available space and the additional space is used by the last, in this case, third column.
The following post was helpful but did not solve my problem fully, as you can see.
Hiding table rows without resizing overall width
Any help will be most welcome.
The problem is the display type that you use to make the table-row visible.
To hide a table-row use display="none"
To show a table-row use display="table-row"
I did a sample so you can see these in action.
function show(){
document.getElementById('trB').style.display='table-row';
}
function hide(){
document.getElementById('trB').style.display='none';
}
#import url("https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css");
table{
border: 1px solid #ccc;
}
<table id="myTable" class="table table-striped table-hover">
<thead>
<tr>
<td>#</td>
<td>Letter</td>
</tr>
</thead>
<tbody>
<tr id="trA">
<td>1</td>
<td>A</td>
</tr>
<tr id="trB">
<td>2</td>
<td>B</td>
</tr>
<tr id="trC">
<td>3</td>
<td>C</td>
</tr>
</tbody>
</table>
<button id="showB" onclick="show()">show B</button>
<button id="hideB" onclick="hide()">hide B</button>
Hope this could help who are struggling with the same problem.
Instead of using display: none; I used visibility: collapse; for the hidden rows. This still keeps the width of the columns and the whole layout.
I had the same problem: I tried to hide a column by elem.style.display="none" but when showing again the layout was broken. This display-style worked for me:
columns.item(i).style.display = "table-cell";
Always fix the width of your columns. Would that sole your problem?
.myTable td{ width:33% !important; }
Ideally, you should also enclose header and body sections using thead and tbody
<table>
<thead>
<tr> ... </tr>
</thead>
<tbody>
.
.
.
</tbody>
</table>
I'm having the same problem. I threw a span inside of each table to see if I could force the width and it seems to work. It's ugly though.

Categories