CSS
table tr {border-bottom:1px solid #008999}
HTML
<table width="100%" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th scope="col">one</th>
<th scope="col">two</th>
<th scope="col">three</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Hello</th>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
Add:
table
{
border-collapse: collapse;
}
Otherwise tr creates no single block.
Simple example:
table
{
border: 5px solid #900;
background: #fff;
}
tr
{
border: 5px solid #090;
}
td
{
background: #ccc;
padding: 5px 0;
}
table + table
{
border-collapse: collapse;
}
<table>
<tr>
<td>def</td>
<td>ault</td>
</tr>
</table>
<table>
<tr>
<td>coll</td>
<td>apse</td>
</tr>
</table>
Try giving
table tr th {border-bottom:1px solid #008999}
Then you can use
table { border-collapse: collapse; }
table tr {border-bottom:1px solid #008999; }
See The collapsing border model
tr by definition wont take border styles. You need to apply it to the td's within it:
table tr td {border-bottom:1px solid #008999}
Related
How can I color the entire thead row without these borders?
<thead bgcolor="#d6f5d6">
<tr className="ha">
<th>Evento</th>
<th>Valor</th>
</tr>
</thead>
table thead tr,
table thead tr th{
background: #d6f5d6;
border: 1px solid #d6f5d6;
background-clip: content-box;
}
table thead tr th{
border: none;
background-clip: content-box;
}
You want the border-spacing property.
table {
border-spacing: 0;
}
table thead tr,
table thead tr th{
background: #d6f5d6;
border: 1px solid #d6f5d6;
background-clip: content-box;
}
table thead tr th{
border: none;
background-clip: content-box;
}
<table>
<thead bgcolor="#d6f5d6">
<tr className="ha">
<th>Evento</th>
<th>Valor</th>
</tr>
</thead>
<tbody>
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>three</td>
<td>four</td>
</tr>
</tbody>
</table>
there is a conflict with style borders in a table.
Tested in Firefox 91.0.2 (64 bit)
It is said that mainly the cell borders should be styled.
It is not that there is no solution by tricking. It is rather the case that there is a conflict.
There are complex hierarchies when styling the borders. The last one takes effect.
General:
table
thead, tbody, tfoot
tr, col
th, td
Special:
border-top, border-right
border-bottom, border-left
The General Hierarchy prevents column-borders from being styled if cell-borders are styled. Only tricks can solve this problem. !important does not solve the problem.
Likewise, row-borders cannot be styled if cell-borders are styled. This is very complex when styling with tr:hover. Correct would be styling with tr:hover td. But there is also a conflict.
There is a trick.
With border-top and border-bottom:
For this only the cell-border-top may be styled. Because these are overwritten by the row-border-bottom (see hierarchy above).
For border-left and border-right:
Only the cell-border-right may be styled for this purpose. Because these are overwritten by the column-border-left (see hierarchy above).
So it is possible to solve the problem with some tricks. However, I am not looking for a trick, but for a solution to the conflict.
In the example the following should work (and at this point don't work without tricks):
cells (th, td): border = 1px solid #fff
column 2 (.col2): border-left, border-right = 1px solid #000
row hover (tr:hover): border-top, border-bottom = 1px solid #000
table {
border-collapse: collapse;
text-align: right;
cursor: default;
}
th {
background: #ccc;
text-align: center;
}
th, td {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
}
.col0 {
background: #ddd;
}
.col2 {
border-right: 1px solid #000;
border-left: 1px solid #000;
}
tbody tr:hover td {
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">
<col class="col4">
</colgroup>
<thead>
<tr>
<th>ID</th>
<th>COL 1</th>
<th>COL 2</th>
<th>COL 3</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>
<td class="c4">15,24</td>
</tr>
<tr>
<td>2</td>
<td class="c1">95,35</td>
<td class="c3">36,25</td>
<td class="c6">45,38</td>
<td class="c3">28,73</td>
</tr>
<tr>
<td>3</td>
<td class="c2">37,25</td>
<td class="c4">15,24</td>
<td class="c8">41,25</td>
<td class="c5">8,36</td>
</tr>
<tr>
<td>4</td>
<td class="c7">97,64</td>
<td class="c3">28,73</td>
<td class="c0">36,94</td>
<td class="c0">8,36</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>SUM</th>
<th>---</th>
<th>---</th>
<th>---</th>
<th>---</th>
</tr>
</tfoot>
</table>
https://jsfiddle.net/d9kju4sr/1/
I found out that you can't style thead, tr, or tbody. What I want to do is have a 2px white border between the cells and doesn't over lap and give the table a border radius where the table cells don't break the radius.
body {
background-color: blue;
color: white;
}
table {
border-collapse: separate !important;
width: 100%;
border: 2px solid white;
border-radius: 12px !important;
}
th {
padding : 12px;
border: 2px solid white;
}
td {
padding : 12px;
border: 2px solid white;
}
<table id="user-table">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>password</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Kyle</td>
<td>bb5dc8842ca31d4603d6aa11448d1654</td>
</tr>
<tr>
<td>2</td>
<td>Brit</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
<tr>
<td>3</td>
<td>Trevor</td>
<td>bb5dc8842ca31d4603d6aa11448d1654</td>
</tr>
<tr>
<td>4</td>
<td>Justin</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
<tr>
<td>5</td>
<td>Dave</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
</tbody>
</table>
Is there a way of going about this?
Also I tried to add the reset I was using to the code and everything broke because I don't know how to add it before the css that runs in the code snippet example:
https://meyerweb.com/eric/tools/css/reset/reset.css
Its isn't quite true that you cant style th, tr, td elements in a table. You can see below how the background colour of th & tr is changed.
You can target cells in the corners through pseudo classes such as :first-child, :last-child and add individual border radius property.
In your sample code I've used these properties to mention the borders.
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
body {
background-color: blue;
color: white;
}
table {
border-collapse: separate !important;
width: 100%;
border: 2px solid white;
border-radius: 12px !important;
}
th {
padding : 12px;
border: 2px solid white;
background: red;
}
th:first-child {
border-top-left-radius: 10px;
}
th:last-child {
border-top-right-radius: 10px;
}
td {
padding : 12px;
border: 2px solid white;
}
tr:nth-child(even) {
background: grey;
}
tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}
tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}
<table id="user-table">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>password</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Kyle</td>
<td>bb5dc8842ca31d4603d6aa11448d1654</td>
</tr>
<tr>
<td>2</td>
<td>Brit</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
<tr>
<td>3</td>
<td>Trevor</td>
<td>bb5dc8842ca31d4603d6aa11448d1654</td>
</tr>
<tr>
<td>4</td>
<td>Justin</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
<tr>
<td>5</td>
<td>Dave</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
</tbody>
</table>
I have seen a few similar questions but they don't match what I am after. I have a situation where a table can have inner tables. However, I like the inner table to ignore the styles defined by "myTable". How can I do this?
Preferably, without adding a CSS for inner table. Or at least without adding a new class or reference to an ID for the inner table. Thank you for any help.
#myTable td, #myTable th {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
word-wrap: break-word;
}
#myTable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #00bf11;
color: white;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 12px;
font-family: Verdana, sans-serif;
table-layout: fixed;
}
<html>
<body>
<table id="myTable">
<tr class="header">
<th onclick="sortTable(0)" style="width:6%;">Col1</th>
<th onclick="sortTable(1)" style="width:9%;">Col2</th>
<th onclick="sortTable(2)" style="width:85%;">Col3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>
<table class="table table-bordered">
<tbody>
<tr>
<th>Col One</th>
<th>Col Two</th>
<th>Col Three</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>
</td>
</table>
</body>
</html>
Deryck has the right answer altough it's not complete because of browser implementation and missing tr
#myTable > tbody > tr > td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
word-wrap: break-word;
}
#myTable > tbody > tr > th {
border: 1px solid #ddd;
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #00bf11;
color: white;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 12px;
font-family: Verdana, sans-serif;
table-layout: fixed;
}
<html>
<body>
<table id="myTable">
<tr class="header">
<th onclick="sortTable(0)" style="width:6%;">Col1</th>
<th onclick="sortTable(1)" style="width:9%;">Col2</th>
<th onclick="sortTable(2)" style="width:85%;">Col3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>
<table class="table table-bordered">
<tbody>
<tr>
<th>Col One</th>
<th>Col Two</th>
<th>Col Three</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>
</td>
</table>
</body>
</html>
If you are trying to make it so the styles you have there don't apply to anything but the specific children (tr, th, etc at the top level) you can use > to specify the style to only apply to the direct children of #myTable
#myTable > td, #myTable > th {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
word-wrap: break-word;
}
#myTable > th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #00bf11;
color: white;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 12px;
font-family: Verdana, sans-serif;
table-layout: fixed;
}
<html>
<body>
<table id="myTable">
<tr class="header">
<th onclick="sortTable(0)" style="width:6%;">Col1</th>
<th onclick="sortTable(1)" style="width:9%;">Col2</th>
<th onclick="sortTable(2)" style="width:85%;">Col3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>
<table class="table table-bordered">
<tbody>
<tr>
<th>Col One</th>
<th>Col Two</th>
<th>Col Three</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>
</td>
</table>
</body>
</html>
I've got a table showing participation of countries in a project in 2013 and 2018. For a year in which a country participated, we want to display a black circle. The cell will be empty for a year in which the country didn't participate.
For the sake of accessibility, I was figuring on having "Yes" and "No" in the table, and then using CSS repositioning and the ::before pseudo-element to put the screen reader-readable text off-screen and swap the black circle into place in the Yes cells.
I could tell that the black circle wasn't centered. To emphasize what was going on, I replaced "Yes" with "Affirmative" and replaced "No" with a hollow circle instead of nothing. The display produced by the code below shows that the circles are being displayed at the left of where the words "Affirmative" and "No" would have been if I hadn't displaced them. How can I display the symbols centered in the columns instead?
<!DOCTYPE html>
<html>
<style>
table {
border-collapse: collapse;
font-size: 24px;
border: none;
margin: 1em 0;
}
/* thead */
table thead th {
font-weight: bold;
padding: 0 1em;
}
table thead th.text {
text-align: left;
}
table thead th.indicator {
text-align: center;
}
table thead th:not(:first-child) {
border-left: 1px solid white;
}
/* tbody */
table tbody th,
table tbody td {
padding: 0.15em 1em;
color: black;
background-color: white;
}
table tbody th {
text-align: left;
font-weight: normal;
}
table tbody td {
border-left: 1px solid white;
}
table tbody td.text {
text-align: left;
}
table tbody td.indicator {
text-align: center;
}
/* Specifics for IC tables */
table.ic thead th {
color: white;
background-color: #6BB1C9;
}
table.ic tbody tr:nth-child(odd) th,
table.ic tbody tr:nth-child(odd) td {
background-color: #E1F0F4;
}
/* Indicator symbol substitution */
table tbody td .yes {
position: relative;
left: -999em;
width: 0;
}
table tbody td .yes::before {
position: relative;
left: 999em;
content: "\0025cf";
}
table tbody td .no {
position: relative;
left: -999em;
width: 0;
}
table tbody td .no::before {
position: relative;
left: 999em;
content: "\0025cb";
}
</style>
<h1>Table example</h1>
<table class="ic">
<thead>
<tr>
<th scope="col">Country</th><th scope="col" class="indicator">2013</th><th scope="col" class="indicator">2018</th>
</tr>
</thead>
<tbody>
<tr> <th scope="row">Australia</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="no">No</span> </tr>
<tr> <th scope="row">Bolivia</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">Croatia</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="no">No</span> </tr>
<tr> <th scope="row">Denmark</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">Ethiopia</th> <td class="indicator"><span class="no">No</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">France</th> <td class="indicator"><span class="no">No</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">Germany</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
</tbody>
</table>
</html>
This gives me:
Without the substitution, I get the following, which shows that the symbols are being positioned at the left edge of where the words would be if I hadn't displaced them.
Can anyone give me any tips? I've tried setting widths of the displaced text to 0 and hiding overflow, to no avail.
The problem with this approach (if you care about accessibility) is that CSS pseudo-elements aren't actually added to the DOM. Most browsers will compensate for this, but Internet Explorer doesn't. There are enough people using IE that this matters. Resizing content to zero pixels height or width will also prevent screen readers from announcing the content.
A better way of approaching this issue would be to load all content into the DOM and then use the aria-hidden attribute on the content you DON'T want screen readers to announce.
Here's a fiddle of a more accessible version of this:
https://jsfiddle.net/2jvL6f0L/
No need to hide span by positioning it to -999em.
See the following solution. Hope this will help. (JSFiddle link)
Here I've just made the span text transparent and positioned :before by calc(). This will always make it aligned in the middle.
table {
border-collapse: collapse;
font-size: 24px;
border: none;
margin: 1em 0;
}
/* thead */
table thead th {
font-weight: bold;
padding: 0 1em;
}
table thead th.text {
text-align: left;
}
table thead th.indicator {
text-align: center;
}
table thead th:not(:first-child) {
border-left: 1px solid white;
}
/* tbody */
table tbody th,
table tbody td {
padding: 0.15em 1em;
color: black;
background-color: white;
}
table tbody th {
text-align: left;
font-weight: normal;
}
table tbody td {
border-left: 1px solid white;
}
table tbody td.text {
text-align: left;
}
table tbody td.indicator {
text-align: center;
}
/* Specifics for IC tables */
table.ic thead th {
color: white;
background-color: #6BB1C9;
}
table.ic tbody tr:nth-child(odd) th,
table.ic tbody tr:nth-child(odd) td {
background-color: #E1F0F4;
}
/* Indicator symbol substitution */
table tbody td .yes {
position: relative;
width: 100%;
color: transparent;
display: block;
}
table tbody td .yes::before {
position: absolute;
left: calc(50% - 10px);
content: "\0025cf";
display: block;
color: #000;
width: 20px;
}
table tbody td .no {
position: relative;
width: 100%;
color: transparent;
display: block;
}
table tbody td .no::before {
position: absolute;
left: calc(50% - 10px);
content: "\0025cb";
display: block;
color: #000;
width: 20px;
}
<h1>Table example</h1>
<table class="ic">
<thead>
<tr>
<th scope="col">Country</th><th scope="col" class="indicator">2013</th><th scope="col" class="indicator">2018</th>
</tr>
</thead>
<tbody>
<tr> <th scope="row">Australia</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="no">No</span> </tr>
<tr> <th scope="row">Bolivia</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">Croatia</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="no">No</span> </tr>
<tr> <th scope="row">Denmark</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">Ethiopia</th> <td class="indicator"><span class="no">No</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">France</th> <td class="indicator"><span class="no">No</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">Germany</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
</tbody>
</table>
Well, I came up with one solution: set display: block; on the ::before. That has a couple of side effects: the table rows are now taller than I'd like, even though I've set padding and margin to 0; and the circles aren't vertically centered, and setting vertical-align: middle; doesn't fix that. I've wound up setting top: 4px; but I'm not thrilled with that approach.
Incorporating ideas from previous responses here, I've now come up with the following replacement for my previous approach.
table tbody td.indicator {
text-align: left; /* not center */
}
...
table tbody td .yes {
position: relative;
left: -999em;
}
table tbody td .yes::before {
position: relative;
left: calc(50% + 998.75em);
content: "\0025cf";
}
Below is one solution that should help.
I moved the Affirmative and No into the title attribute of the <span> and placed the HTML elements for the two kinds of circles as the content of the <span>
This removed the need for the :before in the CSS.
The title helps with Accessibility, but not really since all the screen readers will read is the word "Affirmative" or "No" with no context. It might be better, if you are concerned about screen readers to improve on the title attribute to be something more like: title="Affirmative for Germany in 2013" or something like that.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
font-size: 24px;
border: none;
margin: 1em 0;
}
/* thead */
table thead th {
font-weight: bold;
padding: 0 1em;
}
table thead th.text {
text-align: left;
}
table thead th.indicator {
text-align: center;
}
table thead th:not(:first-child) {
border-left: 1px solid white;
}
/* tbody */
table tbody th,
table tbody td {
padding: 0.15em 1em;
color: black;
background-color: white;
}
table tbody th {
text-align: left;
font-weight: normal;
}
table tbody td {
border-left: 1px solid white;
}
table tbody td.text {
text-align: left;
}
table tbody td.indicator {
text-align: center;
}
/* Specifics for IC tables */
table.ic thead th {
color: white;
background-color: #6BB1C9;
}
table.ic tbody tr:nth-child(odd) th,
table.ic tbody tr:nth-child(odd) td {
background-color: #E1F0F4;
}
</style>
</html>
<body>
<h1>Table example</h1>
<table class="ic">
<thead>
<tr>
<th scope="col">Country</th>
<th scope="col" class="indicator">2013</th>
<th scope="col" class="indicator">2018</th>
</tr>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Australia</th>
<td class="indicator"><span title="Affirmative">●</span></td>
<td class="indicator"><span title="No">○</span></td>
</tr>
<tr>
<th scope="row">Bolivia</th>
<td class="indicator"><span title="Affirmative">●</span></td>
<td class="indicator"><span title="Affirmative">●</span></td>
</tr>
<tr>
<th scope="row">Croatia</th>
<td class="indicator"><span title="Affirmative">●</span></td>
<td class="indicator"><span title="No">○</span></td>
</tr>
<tr>
<th scope="row">Denmark</th>
<td class="indicator"><span title="Affirmative">●</span></td>
<td class="indicator"><span title="Affirmative">●</span></td>
</tr>
<tr>
<th scope="row">Ethiopia</th>
<td class="indicator"><span title="No">○</span></td>
<td class="indicator"><span title="Affirmative">●</span></td>
</tr>
<tr>
<th scope="row">France</th>
<td class="indicator"><span title="No">○</span></td>
<td class="indicator"><span title="Affirmative">●</span></td>
</tr>
<tr>
<th scope="row">Germany</th>
<td class="indicator"><span title="Affirmative">●</span></td>
<td class="indicator"><span title="Affirmative">●</span></td>
</tr>
</tbody>
</table>
</body>
</html>