I am preparing Asp.net website. On my style sheet, i want my table to have those properties:
table {
width:100%;
height:500px;
}
Table's first column should form 20% of the whole table.
And my second column should form 80% of the table. And i am not sure how to design differently 2 columns in css. But i think it should be like this:
table td.first {
}
table td.second {
}
My regards...
Usually one gives an id to the table columns this way:
<table id="my-table">
<tr>
<td id="first-column">... content ...</td>
<td id="second-column">... content ...</td>
</tr>
</table>
Then you can adress the columns in css this way:
table#my-table {
width: 100%;
height: 500px;
}
table#my-table td#first-column {
width: 20%;
}
table#my-table td#second-column {
width: 80%;
}
If I understand correctly you are simply trying to target a specific column in your table. Just give your <td>'s an id like:
<td id="columnOne">... etc
You target them in the CSS using this syntax...
either:
table td#columnOne { *styles* }
or simply:
#columnOne { *styles* }
This method is safer and more compatible than using pseudo classes as I think you are trying to do, which would be:
table td:first-child { *styles* }
and:
table td:nth-child(2) { *styles* }
Related
I have a regular HTML table in my app with the following structure (the values are not important):
<table>
<tr>
<th>Header Row 1</th>
<th>Header Row 2</th>
</tr>
{Object.values(someArray).map((value, index) => {
return (
<tr>
<td>{value.1}</td>
<td>{value.2}</td>
<td>{value.3}</td>
</tr>
);
})}
</table>
I'm trying to solve the problem of having my .css rules being globally applied, as I want different tables to have different styling rules.
So I started to implement styled-components.
This is what I came up with
const CustomTable = styled.table`
&&& {
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td,
tr {
padding: 5px;
}
th {
text-align: left;
}
table {
width: 100%;
}
}
`;
Only the first grouping of rules seems to be applied to my table. So padding, text-align, and width doesn't seem to take effect. Is this a valid structure (grouping multiple elements that have multiple rules) or do I need to individually create styled-components for each table element (<td>, <td>, .. etc)?
If you want to add global styles you can usecreateGlobalStyle from styled-components and use it to inject global styles to your components.
import { createGlobalStyle } from "styled-components"
like this, I have updated #deve's code.Codesandboxlink
I've got a table
<table id="mytable">
<tr style="display: none;"><td> </td></tr>
<tr><td> </td></tr>
<tr style="display: none;"><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
I'm trying to set the table striping to use nth-child selectors but just can't seem to crack it.
table #mytable tr[#display=block]:nth-child(odd) {
background-color: #000;
}
table #mytable tr[#display=block]:nth-child(odd) {
background-color: #FFF;
}
I'm pretty sure I'm close ... can't quite seem to crack it.
anyone pass along a clue?
Here's as close as you're going to get. Note that you can't make the nth-child count only displayed rows; nth-child will take the nth child element no matter what, not the nth child that matches a given selector. If you want some rows to be missing and not affect the zebra-striping, you will have to remove them from the table entirely, either through the DOM or on the server side.
#mytable tr:nth-child(odd) {
background-color: #000;
}
#mytable tr:nth-child(even) {
background-color: #FFF;
}
<table id="mytable">
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
Here are the fixes that I made:
table #mytable tr[#display=block]:nth-child(odd) {
background-color: #000;
}
There's no need to specify an ancestor selector for an id based selector; there is only ever one element that will match #table, so you're just adding extra code by adding the table in.
#mytable tr[#display=block]:nth-child(odd) {
background-color: #000;
}
Now, [#display=block] would match elements which had an attribute display set to block, such as <tr display=block>. Display isn't a valid HTML attribute; what you seem to be trying to do is to have the selector match on the style of the element, but you can't do that in CSS, since the browser needs to apply the styles from the CSS before it can figure that out, which it's in the process of doing when it's applying this selector. So, you won't be able to select on whether table rows are displayed. Since nth-child can only take the nth child no matter what, not nth with some attribute, we're going to have to give up on this part of the CSS. There is also nth-of-type, which selects the nth child of the same element type, but that's all you can do.
#mytable tr:nth-child(odd) {
background-color: #000;
}
And there you have it.
If you are using JQuery to change the visibility of rows you can apply the following function to the table to add an .odd class where appropriate. Call it each time the rows visible is different.
function updateStriping(jquerySelector){
$(jquerySelector).each(function(index, row){
$(row).removeClass('odd');
if (index%2==1){ //odd row
$(row).addClass('odd');
}
});
}
And for the css simply do
table#tableid tr.visible.odd{
background-color: #EFF3FE;
}
While you can't Zebra stripe a table with hidden rows using CSS3 you can do it with JavaScript. Here is how:
var table = document.getElementById("mytable");
var k = 0;
for (var j = 0, row; row = table.rows[j]; j++) {
if (!(row.style.display === "none")) {
if (k % 2) {
row.style.backgroundColor = "rgba(242,252,244,0.4)";
} else {
row.style.backgroundColor = "rgba(0,0,0,0.0)";
}
k++;
}
}
For a jquery way, you could use this function which iterates through the rows in your table, checking the visbility of the row and (re)setting a class for visible odd rows.
function updateStriping(jquerySelector) {
var count = 0;
$(jquerySelector).each(function (index, row) {
$(row).removeClass('odd');
if ($(row).is(":visible")) {
if (count % 2 == 1) { //odd row
$(row).addClass('odd');
}
count++;
}
});
}
Use css to set a background for odd rows.
#mytable tr.odd { background: rgba(0,0,0,.1); }
Then you can call this zebra-striper whenever by using:
updateStriping("#mytable tr");
I came up with a sort of solution but it's reliant on the fact that the table can only ever have a maximum number of hidden rows and comes with the downside of requiring 2 additional CSS rules for each possible hidden row. The principle is that, after each hidden row, you switch the background-color of the odd and even rows around.
Here's a quick example with just 3 hidden rows and the necessary CSS for up to 4 of them. You can already see how unwieldy the CSS can become but, still, someone may find some use for it:
table{
background:#fff;
border:1px solid #000;
border-spacing:1px;
width:100%;
}
td{
padding:20px;
}
tr:nth-child(odd)>td{
background:#999;
}
tr:nth-child(even)>td{
background:#000;
}
tr[data-hidden=true]{
display:none;
}
tr[data-hidden=true]~tr:nth-child(odd)>td{
background:#000;
}
tr[data-hidden=true]~tr:nth-child(even)>td{
background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{
background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{
background:#000;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{
background:#000;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{
background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{
background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{
background:#000;
}
<table>
<tbody>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr data-hidden="true"><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr data-hidden="true"><td></td><td></td></tr>
<tr data-hidden="true"><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</tbody>
</table>
in jquery ..
var odd = true;
$('table tr:visible').each(function() {
$(this).removeClass('odd even').addClass(odd?'odd':'even');
odd=!odd
});
You can easily fake the zebra stripes if you apply a vertically repeating gradient on the parent table, positioned exactly to match the rows' height (the rows would have to be transparent). That way the table won't care if anything's hidden, it will repeat no matter what.
If anyone tries to do something like me, where I have alternating hidden and visible rows, you can do this:
.table-striped tbody tr:nth-child(4n + 1) {
background-color: rgba(0,0,0,.05);
}
This will get every 4th element starting with the 1st one, and allows you to maintain striping with hidden rows between each visible row.
Here is a 2022 version of a javascript version
let cnt = 0;
document.querySelectorAll("#mytable tbody tr").forEach(tr => {
cnt += tr.hidden ? 0 : 1;
tr.classList.toggle("odd",cnt%2===0);
});
.odd { background-color: grey; }
<table id="mytable">
<thead><tr><th>Num</th></tr></thead>
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr hidden><td></td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
</tbody>
</table>
I add in css:
tr[style="display: table-row;"]:nth-child(even) {
background-color: #f3f6fa;
}
and on create tr add in tag
style="display: table-row;"
Jquery codes for zebra color in html table
$("#mytabletr:odd").addClass('oddRow');
$("#mytabletr:even").addClass('evenEven');
And CSS you can do
.oddRow{background:#E3E5E6;color:black}
.evenRow{background:#FFFFFF;color:black}
had some trouble researching this, maybe I'm just not thinking clearly. I am using Bootstrap 3 and have a table to pull in data and I am highlighting certain data with their Alert styled divs.
The problem I have is that depending on the data they all have differing heights and I want them to all be the same. I've seen other examples but they weren't utilizing a table structure.
Is there a way to do this or is my only option to ditch the tables and do individual bootstrap columns?
Attached is an example of a table row.
I've updated your fiddle. I'm assuming that you have alerts throughout each of your rows, therefore we're iterating through each <tr> and finding the .alert divs, then determining which alert has the most "height". Then we add this height CSS to every .alert in the row.
The HTML structure has changed, I've added <thead> and <tbody>
<table class="table">
<thead>
<tr>
<th>Address</th>
<th>Super Permits</th>
<th>Active?</th>
</tr>
</thead>
<tbody>
....
....
$('.table').find('tbody tr').each(function (e) {
var heights = $(".alert").map(function ()
{
return $(this).outerHeight();
}).get(),
maxHeight = Math.max.apply(null, heights);
$(this).find('.alert').css('height', maxHeight);
});
Just add custom css for the "alert" class, and it will apply to all alert types, like:
.alert {
height: 90px
}
https://jsfiddle.net/W3AVE/4j72mfeo/
HTML
<table>
<tr class='same-height'>
<td><div><span>text</span></div></td>
<td><div><span>some long text here</span></div></td>
<td><div><span>text medium</span></div></td>
</tr>
</table>
CSS
div {
border: 1px solid black;
}
span {
text-align: center;
display: block;
position: relative;
top: 50%;
transform: translate(0, -50%)
}
JS
(function($){
var $el = $(".same-height"),
h = $el.height();
$el.find("div").each(function()
{
var $self = $(this);
$self.css({"height": h});
});
}(jQuery));
I'm having an issue where I can't seem to find an answer to, but I can't imagine it's not possible.
I have a table with two columns: the left column contains a label, the right side contains a value. However, the value can be empty. The label is fixed text.
What I want is to hide the entire row if the right cell of the row (the value) is empty.
For example:
<table>
<tr>
<td class="label">number of users:</td>
<td class="value">8</td>
</tr>
<tr>
<td class="label">total number of people:</td>
<td class="value"></td>
</tr>
</table>
Since the last row does not contain a value, I want the entire row to be hidden.
I can hide the cell using td:empty, but that's not enough. I tried to work around this by setting the height of the row to 0px and make it expand when the 'value'-cell is shown, but I can't get that to work either since the label cell already expands the row.
Anyone knows how I can tackle this problem using just HTML/CSS?
There's no parent selector in css, so you can't do this with css.
You may use jQuery:
$('td').each(function(){
if($(this).is(:empty)){
$(this).closest('tr').hide();
}
});
Or in shorter form,
$('tr:has("td:empty")').hide();
See the docs: :empty, :has,closest and each
While JavaScript is necessary to solve this problem, jQuery is, by no means, a requirement. Using the DOM, one can achieve this with the following:
function hideParentsOf(cssSelector) {
var elems = document.querySelectorAll(cssSelector);
if (elems.length) {
Array.prototype.forEach.call(elems, function (el) {
el.parentNode.style.display = 'none';
});
}
}
hideParentsOf('td:empty');
function hideParentsOf(cssSelector) {
// cssSelector: String,
// a string representing a CSS selector,
// such as 'td:empty' in this case.
// retrieving a NodeList of elements matching the supplied selector:
var elems = document.querySelectorAll(cssSelector);
// if any elements were found:
if (elems.length) {
// iterating over the array-like NodeList with Array.forEach():
Array.prototype.forEach.call(elems, function(el) {
// el is the current array-element (or NodeList-element in
// this instance).
// here we find the parentNode, and set its 'display' to 'none':
el.parentNode.style.display = 'none';
});
}
}
hideParentsOf('td:empty');
<table>
<tr>
<td class="label">number of users:</td>
<td class="value">8</td>
</tr>
<tr>
<td class="label">total number of people:</td>
<td class="value"></td>
</tr>
</table>
References:
CSS:
:empty pseudo-class.
JavaScript:
Array.prototype.forEach().
document.querySelectorAll().
Function.prototype.call().
Node.parentNode.
HTMLElement.style.
An HTML/CSS solution exists if you don't mind throwing out <table> <tr> and <td>. You can get the same end result with CSS - including still rendering like a table:
CSS:
/* hide if empty */
.hideIfEmpty:empty { display: none; }
/* label style */
.hideIfEmpty::before { font-weight:bold; }
/* labels */
.l_numberofusers::before { content:"Number of users: "; }
.l_numberofpeople::before { content: "Number of people:"; }
.l_numberofdogs::before { content: "Number of dogs:" }
/* table like rows/cells */
.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }
HTML
<!-- if the div.hideIfEmpty is empty, it'll be hidden;
labels come from CSS -->
<div class="table">
<div class="row hideIfEmpty l_numberofusers"><span class="cell">8</span></div>
<div class="row hideIfEmpty l_numberofpeople"><span class="cell">12</span></div>
<div class="row hideIfEmpty l_numberofdogs"></div>
</div>
The caveat is that your <div> has to be empty to hide the row, and values in the <div> must have a class .cell applied to them.
Result:
Number of users: 8
Number of people: 12
This will make your CSS very long if you have many labels/rows since you have to have one rule for every row to populate the label.
I've got a table
<table id="mytable">
<tr style="display: none;"><td> </td></tr>
<tr><td> </td></tr>
<tr style="display: none;"><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
I'm trying to set the table striping to use nth-child selectors but just can't seem to crack it.
table #mytable tr[#display=block]:nth-child(odd) {
background-color: #000;
}
table #mytable tr[#display=block]:nth-child(odd) {
background-color: #FFF;
}
I'm pretty sure I'm close ... can't quite seem to crack it.
anyone pass along a clue?
Here's as close as you're going to get. Note that you can't make the nth-child count only displayed rows; nth-child will take the nth child element no matter what, not the nth child that matches a given selector. If you want some rows to be missing and not affect the zebra-striping, you will have to remove them from the table entirely, either through the DOM or on the server side.
#mytable tr:nth-child(odd) {
background-color: #000;
}
#mytable tr:nth-child(even) {
background-color: #FFF;
}
<table id="mytable">
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
Here are the fixes that I made:
table #mytable tr[#display=block]:nth-child(odd) {
background-color: #000;
}
There's no need to specify an ancestor selector for an id based selector; there is only ever one element that will match #table, so you're just adding extra code by adding the table in.
#mytable tr[#display=block]:nth-child(odd) {
background-color: #000;
}
Now, [#display=block] would match elements which had an attribute display set to block, such as <tr display=block>. Display isn't a valid HTML attribute; what you seem to be trying to do is to have the selector match on the style of the element, but you can't do that in CSS, since the browser needs to apply the styles from the CSS before it can figure that out, which it's in the process of doing when it's applying this selector. So, you won't be able to select on whether table rows are displayed. Since nth-child can only take the nth child no matter what, not nth with some attribute, we're going to have to give up on this part of the CSS. There is also nth-of-type, which selects the nth child of the same element type, but that's all you can do.
#mytable tr:nth-child(odd) {
background-color: #000;
}
And there you have it.
If you are using JQuery to change the visibility of rows you can apply the following function to the table to add an .odd class where appropriate. Call it each time the rows visible is different.
function updateStriping(jquerySelector){
$(jquerySelector).each(function(index, row){
$(row).removeClass('odd');
if (index%2==1){ //odd row
$(row).addClass('odd');
}
});
}
And for the css simply do
table#tableid tr.visible.odd{
background-color: #EFF3FE;
}
While you can't Zebra stripe a table with hidden rows using CSS3 you can do it with JavaScript. Here is how:
var table = document.getElementById("mytable");
var k = 0;
for (var j = 0, row; row = table.rows[j]; j++) {
if (!(row.style.display === "none")) {
if (k % 2) {
row.style.backgroundColor = "rgba(242,252,244,0.4)";
} else {
row.style.backgroundColor = "rgba(0,0,0,0.0)";
}
k++;
}
}
For a jquery way, you could use this function which iterates through the rows in your table, checking the visbility of the row and (re)setting a class for visible odd rows.
function updateStriping(jquerySelector) {
var count = 0;
$(jquerySelector).each(function (index, row) {
$(row).removeClass('odd');
if ($(row).is(":visible")) {
if (count % 2 == 1) { //odd row
$(row).addClass('odd');
}
count++;
}
});
}
Use css to set a background for odd rows.
#mytable tr.odd { background: rgba(0,0,0,.1); }
Then you can call this zebra-striper whenever by using:
updateStriping("#mytable tr");
I came up with a sort of solution but it's reliant on the fact that the table can only ever have a maximum number of hidden rows and comes with the downside of requiring 2 additional CSS rules for each possible hidden row. The principle is that, after each hidden row, you switch the background-color of the odd and even rows around.
Here's a quick example with just 3 hidden rows and the necessary CSS for up to 4 of them. You can already see how unwieldy the CSS can become but, still, someone may find some use for it:
table{
background:#fff;
border:1px solid #000;
border-spacing:1px;
width:100%;
}
td{
padding:20px;
}
tr:nth-child(odd)>td{
background:#999;
}
tr:nth-child(even)>td{
background:#000;
}
tr[data-hidden=true]{
display:none;
}
tr[data-hidden=true]~tr:nth-child(odd)>td{
background:#000;
}
tr[data-hidden=true]~tr:nth-child(even)>td{
background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{
background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{
background:#000;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{
background:#000;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{
background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{
background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{
background:#000;
}
<table>
<tbody>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr data-hidden="true"><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr data-hidden="true"><td></td><td></td></tr>
<tr data-hidden="true"><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</tbody>
</table>
in jquery ..
var odd = true;
$('table tr:visible').each(function() {
$(this).removeClass('odd even').addClass(odd?'odd':'even');
odd=!odd
});
You can easily fake the zebra stripes if you apply a vertically repeating gradient on the parent table, positioned exactly to match the rows' height (the rows would have to be transparent). That way the table won't care if anything's hidden, it will repeat no matter what.
If anyone tries to do something like me, where I have alternating hidden and visible rows, you can do this:
.table-striped tbody tr:nth-child(4n + 1) {
background-color: rgba(0,0,0,.05);
}
This will get every 4th element starting with the 1st one, and allows you to maintain striping with hidden rows between each visible row.
Here is a 2022 version of a javascript version
let cnt = 0;
document.querySelectorAll("#mytable tbody tr").forEach(tr => {
cnt += tr.hidden ? 0 : 1;
tr.classList.toggle("odd",cnt%2===0);
});
.odd { background-color: grey; }
<table id="mytable">
<thead><tr><th>Num</th></tr></thead>
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr hidden><td></td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
</tbody>
</table>
I add in css:
tr[style="display: table-row;"]:nth-child(even) {
background-color: #f3f6fa;
}
and on create tr add in tag
style="display: table-row;"
Jquery codes for zebra color in html table
$("#mytabletr:odd").addClass('oddRow');
$("#mytabletr:even").addClass('evenEven');
And CSS you can do
.oddRow{background:#E3E5E6;color:black}
.evenRow{background:#FFFFFF;color:black}