I have a table with two CSS brightness filters applied:
#MyTable tr:nth-child(even)
{
filter: brightness(85%);
}
#MyTable td:nth-child(even)
{
filter: brightness(85%);
}
to clearly delineate rows and columns when individual cells can vary in background colour.
But the black gridlines (borders) are behaving very oddly.
In Firefox (51):
The right and bottom gridlines of all filtered cells are replaced with the background colour. White cells keep their gridlines. The behaviour is the same whether filters are applied to rows, columns or both.
In Chrome (56):
If I apply just the first filter, which alternates row brightness, then the top gridline and left gridline of coloured cells in even rows become the same colour as the background. White cells keep their gridlines.
If I apply just the second filter, which alternates column brightness, everything works fine.
If I apply both filters, the top and left gridlines of coloured cells in even rows but odd columns become the same colour as the background. Again, white cells, cells which are in even columns (i.e. have a filter), or cells which are in odd rows (i.e. don't have a filter), keep their black gridlines.
This also happens if I select even rows using a class instead of tr:nth-child(even).
What is causing this, and how do I fix it?
Edit - minimal working example:
<html>
<head>
<style>
#MyTable {
border-spacing: 0;
border-collapse: collapse;
}
#MyTable td {
margin: 0;
padding: 20px;
border: 1px solid black;
}
#MyTable tr:nth-child(even)
{
filter: brightness(85%);
}
#MyTable td:nth-child(even)
{
filter: brightness(85%);
}
</style>
</head>
<body>
<table id="MyTable">
<tr>
<td style="background-color: red;">A</td>
<td style="background-color: red;">B</td>
<td style="background-color: red;">C</td>
<td style="background-color: red;">D</td>
<td style="background-color: red;">E</td>
<td style="background-color: red;">F</td>
</tr>
<tr>
<td style="background-color: red;">A</td>
<td style="background-color: red;">B</td>
<td style="background-color: red;">C</td>
<td style="background-color: red;">D</td>
<td>E</td>
<td style="background-color: red;">F</td>
</tr>
<tr>
<td style="background-color: red;">A</td>
<td style="background-color: red;">B</td>
<td style="background-color: red;">C</td>
<td style="background-color: red;">D</td>
<td style="background-color: red;">E</td>
<td style="background-color: red;">F</td>
</tr>
</table>
</body>
</html>
I'm definitely not sure what's going on, or what even ought to be happening according to the spec. It might be undefined behavior.
I did notice that the rule border-collapse: separate will prevent the borders from disappearing.
#MyTable {
border-left: 1px solid black;
border-top: 1px solid black;
border-spacing: 0;
border-collapse: seperate;
}
#MyTable td {
margin: 0;
padding: 20px;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
#MyTable tr:nth-child(even) {
filter: brightness(85%);
}
#MyTable td:nth-child(even) {
filter: brightness(85%);
}
<html>
<body>
<table id="MyTable">
<tr>
<td style="background-color: red;">A</td>
<td style="background-color: red;">B</td>
<td style="background-color: red;">C</td>
<td style="background-color: red;">D</td>
<td style="background-color: red;">E</td>
<td style="background-color: red;">F</td>
</tr>
<tr>
<td style="background-color: red;">A</td>
<td style="background-color: red;">B</td>
<td style="background-color: red;">C</td>
<td style="background-color: red;">D</td>
<td>E</td>
<td style="background-color: red;">F</td>
</tr>
<tr>
<td style="background-color: red;">A</td>
<td style="background-color: red;">B</td>
<td style="background-color: red;">C</td>
<td style="background-color: red;">D</td>
<td style="background-color: red;">E</td>
<td style="background-color: red;">F</td>
</tr>
</table>
</body>
</html>
Related
In Firefox, I have a table which when border-collapse is applied the borders are in different thicknesses. But this problem doesn't occours in Chrome.
The HTML and CSS code of the table:
//HTML
<div id="divTabela">
<table width="100%" cellpadding="4" border="1" name="tabelainfo" id="tabelainfo" class="bordasimples">
<tbody>
<tr id="titulotabela">
<th colspan="1" rowspan="1">Data Inicial</th>
<th colspan="1" rowspan="1">Data Final</th>
<th colspan="1" rowspan="1">Distribuidor</th>
<th colspan="1" rowspan="1">Agendar</th>
<th colspan="1" rowspan="1">Ver Detalhes</th>
</tr>
<tr id="corpotabela">
<td align="center" colspan="1" rowspan="1">####</td>
<td align="center" colspan="1" rowspan="1">####</td>
<td align="center" colspan="1" rowspan="1">####</td>
<td align="center" colspan="1" rowspan="1"></td>
<td align="center" colspan="1" rowspan="1"><div title="Ver Detalhes"><div></div></div></td>
</tr>
<tr id="corpotabela"><td align="center" colspan="1" rowspan="1">####</td>
<td align="center" colspan="1" rowspan="1">####/td>
<td align="center" colspan="1" rowspan="1">####</td>
<td align="center" colspan="1" rowspan="1"></td>
<td align="center" colspan="1" rowspan="1"><div title="Ver Detalhes"><div></div></div></td>
</tr>
</tbody>
</table>
<br>
</div>
//CSS
table.bordasimples {border-collapse: collapse;}
table.bordasimples tr td {border:1px solid;}
table.bordasimples tr th {border:1px solid;}
#tabelainfo {
padding-top: 0px;
font-size: 12px;
font-family: Calibri;
text-align: justify;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
color: #083c06;
text-decoration: none;
}
See the table rows in the image below:
I solved the problem just changing the CSS code:
table.bordasimples {
border-spacing: 0px;
border:1px solid #D2DDD4;
}
table.bordasimples tr td, table.bordasimples tr th
{border:1px solid #D2DDD4;}
I replaced the border-collapse for border-spacing and changed the color of borders, now my table is the way I wanted, and with a better layout.
Thanks everyone!
I am trying to use the css not selector but not having much success. I am trying to apply attributes to images except for those in a .sponsors class.
img:not(.sponsors) {
width: initial;
max-width: 100%;
height: auto;
}
However it's applying the attributes to all images. The images in a sponsor class are in a table
<table class="sponsors" style="width: 100%; border-collapse: collapse; border-style: dotted;" border="0">
<tbody>
<tr>
<td style="width: 50%;"><img src="image1.jpg" /></td>
<td style="width: 50%;"><img src="image2.jpg" /></td>
</tr>
</tbody>
</table>
Any help would be appreciated
If you are using :
img:not(.sponsors) {
}
The "sponsors" class must be in an img tag.
In your example it should be :
<table style="width: 100%; border-collapse: collapse; border-style: dotted;" border="0">
<tbody>
<tr>
<td style="width: 50%;"><img class="sponsors" src="image1.jpg" /></td>
<td style="width: 50%;"><img class="sponsors" src="image2.jpg" /></td>
</tr>
</tbody>
</table>
Simple test for that : https://jsfiddle.net/c31nq2dh/
Try to move the class property and observe the result
For simplicity I've changed the CSS rule to border: solid 5px red; just to see where it gets applied.
The CSS :not() selector works on elements which have the class. See only the element which does not have the class sponsors gets the red colored border
img:not(.sponsors) {
border: solid 5px red;
}
<table style="width: 100%; border-collapse: collapse; border-style: dotted;" border="0">
<tbody>
<tr>
<td style="width: 50%;"><img class="sponsors" src="image1.jpg" /></td>
<td style="width: 50%;"><img src="image2.jpg" /></td>
</tr>
</tbody>
</table>
But your HTML has the class sponsors on the parent element. Add whatever rules you need to set or reset on the images like so:
.sponsors img {
border: solid 5px red;
}
<table class="sponsors" style="width: 100%; border-collapse: collapse; border-style: dotted;" border="0">
<tbody>
<tr>
<td style="width: 50%;"><img src="image1.jpg" /></td>
<td style="width: 50%;"><img src="image2.jpg" /></td>
</tr>
</tbody>
</table>
I would like to achieve this
Example of table
Number : 123
456
Mobile : 123
However i am achieving something like this
123
Number : 456
Mobile : 123
I am using <td> and <tr> in html.
How do I ensure that the cell is able to handle newline characters and display them as according to my first output
.td-custom {
border: 0px solid black;
width: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<table class="tableContainer" cellspacing="100px">
<tr>
<td class="td-custom">Name:</td>
<td class="td-custom">Name</td>
</tr>
<tr>
<td class="td-custom">Status Message:</td>
<td class="td-custom">Hey i am using ........... lololol
<br>asda</td>
</tr>
<tr>
<td class="td-custom">date:</td>
<td class="td-custom">21st Jan 2015</td>
</tr>
<tr>
<td class="td-custom">Remarks:</td>
<td class="td-custom">Nil</td>
</tr>
</table>
A working example of #Thomas solution with
.td-custom {
border: 0px solid black;
width: 200px;
vertical-align: top;
}
https://jsfiddle.net/ukq61zcb
I've created a table which has the following code:
<table class="details resultTable">
<thead class="details">
<tr class="details">
<th class="details headerText">Heading 1</th>
<th class="details headerText">Heading 2</th>
</tr>
</thead>
<tbody class="imu-details-view">
<tr class="details">
<td class="details">Text 1</td>
<td class="details">Text 2</td>
</tr>
</tbody>
</table>
here is the CSS for the table
resultTable {
border-collapse: collapse;
text-align: left;
width: 100%;
}
resultTable th {
border-bottom: 2px solid #6678B1;
padding: 10px 8px;
}
resultTable td {
border-bottom: 1px solid #CCCCCC;
padding: 6px 8px;
}
Now the issue I'm having is, in Firefox the table looks like so:
and then in IE 8/9 this is what it looks like:
can some one explain how I can make the IE table look like the Firefox one?
Try below code. add align=left to tag.
<th align="left" class="details headerText">Heading 1</th>
<th align="left" class="details headerText">Heading 2</th>
I have a selectable table (jQuery UI selectable). How do i "access" the edge (top, left, right, bottom) width css, or do I have to use javascript?
Update: with "accessing the edge" I mean for example create a border around a selected area in a table (select td elements, first .ui-selected in tr, last .ui-selected in tr, first tr containing .ui-selected, last tr containing .ui-selected).
<table class="ui-selectable">
<tr>
<td class="ui-selectee"></td>
<td class="ui-selectee"></td>
<td class="ui-selectee"></td>
<td class="ui-selectee"></td>
</tr>
<tr>
<td class="ui-selectee"></td>
<td class="ui-selectee ui-selected"></td>
<td class="ui-selectee ui-selected"></td>
<td class="ui-selectee"></td>
</tr>
<tr>
<td class="ui-selectee"></td>
<td class="ui-selectee ui-selected"></td>
<td class="ui-selectee ui-selected"></td>
<td class="ui-selectee"></td>
</tr>
<tr>
<td class="ui-selectee"></td>
<td class="ui-selectee"></td>
<td class="ui-selectee"></td>
<td class="ui-selectee"></td>
</tr>
</table>
ex: the left edge
.ui-selected {
border-left: 1px solid #00F;
}
.ui-selected ~ .ui-selected {
border-left: none;
}
Left:
td:first-child
Right:
td:last-child
Top:
tr:first-child td
Bottom:
tr:last-child td
Edit: with your updates, I can now state that there is no way to do it in CSS3. But CSS4's :nth-match and :nth-last-match (not implemented anywhere at the time of writing, and the spec is only a working draft) will be able to do it.