Are there any limitations in using the :not() operator?
I have this HTML:
<table>
<thead>
<th>AAAAAAA</th>
<th>VVVVVVVVVVV</th>
</thead>
<tr>
<td>111111</td>
<td>22222</td>
</tr>
</table>
<br>
<br>
<br>
<br>
<table class="t">
<thead>
<th>AAAAAAA</th>
<th>VVVVVVVVVVV</th>
</thead>
<tr>
<td>111111</td>
<td>22222</td>
</tr>
</table>
And this CSS:
table td:not(.t) {
border: 1px solid black;
padding-left: 5px;
}
table th:not(.t) {
border: 1px solid black;
padding-left: 5px;
}
Yet both tables get the CSS rules.
Jsfiddle
It's because .t is applied to a table not a td
Try this:
table:not(.t) td
{
...
}
table:not(.t) td, table:not(.t) th
{
border: 1px solid black;
padding-left: 5px;
}
Just noticed, you can group your declarations too since they're the same.
You're having that class for a table, not any other element. So instead of applying it to the td apply it to table it would work.
Related
Tested in Firefox 91.0.2 (64-bit) Windows 7.
The task: For table tr:hover, show the border-top and border-bottom in a different color so that the row is visually highlighted.
The problem: With tr:hover only the color of the border-bottom is changed.
I didn't find a solution in the already existing questions, because in these mostly no td background-color is used. Since td background-color is used in my case, the trick with a border transparency does not solve the problem. Also cellspacing does not solve the problem.
The problem seems to be that the browser first globally processes all border-top and then all border-bottom. The tr:hover border-top is overwritten by the normal border-bottom. Also an !important does not solve the problem.
The same problem exists with col border-right and border-left. However, there is no :hover active, so this problem can be solved more easily and is not a topic here. It is only included to show the problem of overwriting CSS rules.
It seems that not every CSS rule is processed individually, but they are collected and processed globally in the following order:
border-top
border-right
border-bottom
border-left
When both overlap, like in a table, the following overwrites the preceding, even with :hover! This is the problem.
So if you have a :hover border-top and also a normal border-bottom, then the :hover border-top will be overwritten by the normal border-bottom. crazy.
https://jsfiddle.net/8fh3nao6/5/
table {
border-collapse: collapse;
text-align: right;
cursor: default;
}
th {
background: #ccc;
text-align: center;
}
.col0 {
background: #ddd;
}
col {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
}
.col2 {
border-right: 1px solid #000;
border-left: 1px solid #000;
}
tr {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}
tr:hover {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.c0 {
background: #fff;
}
.c1 {
background: #f8a;
}
.c2 {
background: #b3c;
}
.c3 {
background: #aa6;
}
.c4 {
background: #cf9;
}
.c5 {
background: #9dd;
}
.c6 {
background: #0f8;
}
.c7 {
background: #44f;
}
.c8 {
background: #88b;
}
<table>
<colgroup>
<col class="col0">
<col class="col1">
<col class="col2">
<col class="col3">
</colgroup>
<thead>
<tr>
<th>ID</th>
<th>COL 1</th>
<th>COL 2</th>
<th>COL 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td class="c0"></td>
<td class="c0"></td>
<td class="c5">8,36</td>
</tr>
<tr>
<td>2</td>
<td class="c1">95,35</td>
<td class="c3">36,25</td>
<td class="c6">45,38</td>
</tr>
<tr>
<td>3</td>
<td class="c2">37,25</td>
<td class="c4">15,24</td>
<td class="c8">41,25</td>
</tr>
<tr>
<td>4</td>
<td class="c7">97,64</td>
<td class="c3">28,73</td>
<td class="c0">36,94</td>
</tr>
</tbody>
</table>
Use tr:hover td instead of tr:hover. Borders are applied to cells not rows.
I recommend you do this if you're applying background color as well, style the cells in the row, not the row itself.
Trying to make my table look nice, but I cannot get rid of those sharp corners...
Here is the HTML
<table border="0" cellspacing="0" cellpadding="0" class="expense-table-pink">
<thead>
<tr style="background-color: #bb1133;">
<th>aaa</th>
<th>bbb</th>
<th>ccc</th>
</tr>
</thead>
<tbody>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
</tbody>
</table>
And the CSS
.expense-table-pink {
width:100%;
background-color: #f9ecee;
border: 1px solid #bb1133;
border-collapse: separate;
border-spacing: 0;
border-radius: 6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font-weight: normal;
}
It's a matter of border pixels vs. corner pixels. In this case, increasing the border to 2px fixes this issue:
.expense-table-pink {
width:100%;
background-color: #f9ecee;
border: 2px solid #bb1133;
border-collapse: separate;
border-spacing: 0;
border-radius: 6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font-weight: normal;
}
<table border="0" cellspacing="0" cellpadding="0" class="expense-table-pink">
<thead>
<tr style="background-color: #bb1133;">
<th>aaa</th>
<th>bbb</th>
<th>ccc</th>
</tr>
</thead>
<tbody>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
</tbody>
</table>
This is that pointed red thing you are seeing,
style="background-color: #bb1133;
The accepted answer does not solve the issue completely because what if you really need border to be 1px such as in this case. Why increase the border when you can do something like this,
table { border-collapse: separate; }
tr:first-child th:first-child { border-top-left-radius: 5px; }
tr:first-child th:last-child { border-top-right-radius: 5px; }
This solves the border-radius issue without changing border itself which needed to be 1 px. Make border-radius of th corners to 5px to leave no gaps. My answer is the correct solution.
You can add a class for the left and the right corners...
CSS
.thleft {
border-radius: 6px 0 0 0;
}
.thright {
border-radius: 0 6px 0 0;
}
HTML
<th class="thleft">aaa</th>
<th>bbb</th>
<th class="thright">ccc</th>
JSFiddle here
I have a table with 3 columns. I'd like to remove the border/cellspacing between the first and second columns, and make it appear like one column.
Fiddle: https://jsfiddle.net/o8x3ego0/1/
HTML
<table id="holdingsDistributionTable" class="table table-responsive">
<tr>
<th colspan="2">Currency</th>
<th>Value</th>
</tr>
<tr>
<td>
<div class="currencyHolder greenCurrencyHolder">
<div class="currency greenCurrency">
AED
</div>
</div>
</td>
<td>
<div style="text-align: center">
UA Emirates Dirham
</div>
</td>
<td>
<b>345</b>
</td>
</tr>
<tr>
<td>
<div class="currencyHolder blueCurrencyHolder">
<div class="currency blueCurrency">
ARS
</div>
</div>
</td>
<td>
<div style="text-align: center">
Argentine Peso
</div>
</td>
<td>45345</td>
</tr>
</table>
In the above example, I'd like to remove the spacing between the 1st and 2nd columns in the data rows.
You can remove the border from the entire table by:
table {
border-collapse: collapse;
}
Then to add borders to the rows, table headers and the last table cells (or whatever table cells necessary by using :nth-child):
tr, th, td:last-child {
border: 1px solid black; /* changed to black to be more noticeable */
}
Then remove padding from the table header and table cells:
th, td {
padding: 0;
}
Here is the updated fiddle.
edit: it was col and not row, so i believe this is more like this : https://jsfiddle.net/o8x3ego0/6/ (same method, but padding to draw the hole in between th )
you can use
border-collapse to remove cellspacing and to allow style tr borders
a line-height to th instead padding
draw a transparent border at bottom of th (padding works too)
and erase bg color with background-clip to mimic the border-spacing only where you want to
body {
background-color: white;
}
/* demo */
tr:nth-child(1) th {
border-bottom: 3px solid transparent;
background-clip: content-box
}
table {
border-collapse: collapse;
}
/* end */
.table {
margin-bottom: 20px;
}
.table-responsive {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
.currencyHolder {
padding: 7px;
border-radius: 5px;
border-width: 2px;
border-style: solid;
margin-top: 10px;
margin-bottom: 10px;
max-width: 36px;
text-align: center;
}
.currency {
border-radius: 5px;
color: white;
font-size: 11px;
font-weight: bold;
}
.greenCurrencyHolder {
background-color: green;
border-color: darkgreen;
}
.greenCurrency {
background-color: darkgreen;
}
.blueCurrencyHolder {
background-color: azure;
border-color: cadetblue;
}
.blueCurrency {
background-color: cadetblue;
}
#holdingsDistributionTable {
display: table;
/*width: 100% !important;*/
}
#holdingsDistributionTable th {
background-color: #F4F5F6;
color: #AAABAE;
line-height: 2.5em;
/* instead vertical padding */
width: 25%;
font-weight: normal;
}
#holdingsDistributionTable th:last-child,
#holdingsDistributionTable td:last-child {
background-color: #DFE1E3;
color: #A19D9E;
}
#holdingsDistributionTable td:last-child {
background-color: #DFE1E3;
color: black;
}
#holdingsDistributionTable th,
#holdingsDistributionTable td {
min-height: 15px;
background-color: #F4F5F6;
}
<table id="holdingsDistributionTable" class="table table-responsive">
<tr>
<th colspan="2">Currency</th>
<th>Value</th>
</tr>
<tr>
<td>
<div class="currencyHolder greenCurrencyHolder">
<div class="currency greenCurrency">
AED
</div>
</div>
</td>
<td>
<div style="text-align: center">
UA Emirates Dirham
</div>
</td>
<td>
<b>345</b>
</td>
</tr>
<tr>
<td>
<div class="currencyHolder blueCurrencyHolder">
<div class="currency blueCurrency">
ARS
</div>
</div>
</td>
<td>
<div style="text-align: center">
Argentine Peso
</div>
</td>
<td>45345</td>
</tr>
</table>
The best solution would be to make your table only two columns in the first place and do not use colspan="2" then make the stylized currency abbreviation line up with the currency name by setting the two div in each column inline block items using display: inline-block; in your CSS
Fiddle: https://jsfiddle.net/f30tujzn/
this solution is not only easier then removing part of your border but will render faster, and respond better on smaller devices.
I want to focus a full table when is selected, but when I click on the table focus is not working.
So I tried hover on the table and hover is working. How can I focus the whole table?
https://jsfiddle.net/bbe7x7bp/1/
table {
border: 1px solid #e2e2e4;
text-align: left;
}
table:hover {
border: 3px solid #878b93;
outline: 1px solid #242b3a;
}
.table:focus {
border: 1px solid blue;
outline: 1px solid darkblue;
}
You can add tabindex to your table (in the HTML). Set tabindex="0" to put it in the natural tab order or tabindex=-1 to make it focusable, but not something you can tab to. tabindex=1 will force it to be the first thing in the tab order..
Just like here: https://jsfiddle.net/bbe7x7bp/2/
<table class="table" tabindex="1">
<tbody>
<trhead>
<td colspan="7">Some title</td>
</trhead>
<tr class="table-info">
<td>data 1</td>
<td>data 2</td>
<td colspan="5">data something</td>
</tr>
</tbody>
</table>
and
table {
border: 1px solid #e2e2e4;
text-align: left;
}
table:hover {
border: 3px solid #878b93;
outline: 1px solid #242b3a;
}
.table:focus {
border: 1px solid blue;
outline: 1px solid darkblue;
}
and you can read about tabindex right here: http://www.w3schools.com/tags/att_global_tabindex.asp
<a>s, <button>s, <input>s, and textareas all have the :focus state by default, but you can give a focus state to any element in HTML5. Both the contenteditable and tabindex attributes work for this, as in this example:
<table contenteditable tabindex="1">
<thead>
<tr>
<th>Option 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Me</td>
</tr>
</tbody>
</table>
Codepen here
Please have a look in the following URL:
"http://jsfiddle.net/7rsx0r4h/"
I want the output like the output table with border and should be look like separate box but don't want to change my html (div layout). Also every box i require some space then another box start.
Thanks,
Manish
demo - http://jsfiddle.net/victor_007/7rsx0r4h/1/
added outline for the first div
change body to the parent id or class
body > div {
outline:1px solid #4679bd;
}
changed border color to white so that it looks like empty space
div div {
border-top: 2px solid white;
}
body > div {
outline: 1px solid #4679bd;
}
div {
width: 496px;
border: 2px solid white;
border-top: 0;
color: #fff;
text-align: center;
font-size: 120%;
background: #4679bd;
}
div div {
font-size: 100%;
width: auto;
border: 0;
border-top: 2px solid white;
line-height: 250%;
}
<p>Divs:</p>
<div>
<div>1
<div>1.1
<div>1.2
<div>1.2.1</div>
</div>
</div>
</div>
<div>2
<div>2.1
<div>2.2
<div>2.2.1</div>
</div>
</div>
</div>
<div>3</div>
<div>4</div>
</div>
<br />
<p>Table:</p>
<table border="1px" width="500px">
<tr>
<td>1</td>
</tr>
<tr>
<td>1.1</td>
</tr>
<tr>
<td>1.2</td>
</tr>
<tr>
<td>1.2.1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>3.1</td>
</tr>
</table>