table
{
background-color: lime;
border-collapse: collapse;
}
tr
{
border-width: 0 0 1px 0;
border-style: solid;
}
tr:last-child
{
border: none; // so the last child from thead and tbody dont have border
}
<table>
<thead>
<th>Rank</th>
<th>Player</th>
<th>Pts</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>player1</td>
<td>50</td>
</tr>
<tr>
<td>2</td>
<td>player2</td>
<td>40</td>
</tr>
<tr>
<td>3</td>
<td>player3</td>
<td>30</td>
</tr>
<tr>
<td>4</td>
<td>player4</td>
<td>40</td>
</tr>
</tbody>
</table>
Now, I want a transparent border between the rows, but only the rows within tbody, but not between thead and tbody.
First, I tried
table {
border-collapse: collapse;
tr {
border-width: 0 0 1px 0;
border-style: solid;
}
tr:last-child {
border: none; // so the last child from thead and tbody dont have border
}
}
In the case, I get the border on the element I wanted, but it's black and not transparent.
Then I tried with border-spacing:
table {
border-spacing: 0 1px;
tr:last-child {
border: none;
border-spacing: none; //those two don't seem to work
}
}
Now I have transparent borders, but there are borders before and after the thead as well, which I can't eliminate.
So, I have now either:
1. border only in tbody but not between thead and first data row(good), but the borders are not transparent(bad)
or
2. transparent border(good), but unwanted border between thead and first data row(bad).
Is there a way to combine this so I have transparent border, but NOT between thead and first data row?
edit:
I want the border to be full transparent, but as soon as I set the border-color with rgba(0,0,0,0), the border "disappears". Ok, it doesn't really disappeares, but take the background-color from td(the lightgrey color, which is a rgba value as well) and I have no idea why.
use border-color: rgba(0,0,0,.5);
<!DOCTYPE html>
<html>
<head>
<style>
table
{
background:yellow;
border-spacing: 0;
}
tbody tr:not(:last-of-type) td
{
border-width: 0 0 5px 0;
border-style: solid;
border-color:black;
border-color: rgba(0,0,0,.5);
}
</style>
</head>
<body>
<table>
<thead>
<th>Rank</th>
<th>Player</th>
<th>Pts</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>player1</td>
<td>50</td>
</tr>
<tr>
<td>2</td>
<td>player2</td>
<td>40</td>
</tr>
<tr>
<td>3</td>
<td>player3</td>
<td>30</td>
</tr>
<tr>
<td>4</td>
<td>player4</td>
<td>40</td>
</tr>
</body>
</html>
The problem is that your table has a background color. If you make the border fully transparent, it is transparent, but it won't show you what's behind the table. You're seeing the table's background-color. Also, since you're using a table, any reason you don't just use border-spacing instead?
But rgba(0,0,0,0) for the border color could work as well I suppose.
table
{
border-spacing: 0 20px;
}
tr
{
background-color: lime;
}
tr:last-child
{
border: none; // so the last child from thead and tbody dont have border
}
<table>
<thead>
<th>Rank</th>
<th>Player</th>
<th>Pts</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>player1</td>
<td>50</td>
</tr>
<tr>
<td>2</td>
<td>player2</td>
<td>40</td>
</tr>
<tr>
<td>3</td>
<td>player3</td>
<td>30</td>
</tr>
<tr>
<td>4</td>
<td>player4</td>
<td>40</td>
</tr>
</tbody>
</table>
Edit:
A way to achieve this is to use an :after on the tr of the thead, so you can "simulate" a border.
thead {
background: lime;
tr:after {
background: lime;
content: "";
height: 2px;
position: absolute;
left: 56px;
top: 77px;
width: calc(100% - 111px);
}
}
With this, you can place the "border" on top of the space between thead and the tbody. Obviously, this may not be the best solution, but I couldn't find another way.
Example: https://jsfiddle.net/qapmqfau/6/
Added an empty table row after each row
<!DOCTYPE html>
<html>
<head>
<style>
table
{
border-spacing: 0;
border-collapse:collaspe;
}
th
{
background:pink;
}
tr:nth-child(even)
{
background:transparent;
height:2px;
}
tr:nth-child(odd)
{
background:green;
}
</style>
</head>
<body>
<table>
<thead>
<th>Rank</th>
<th>Player</th>
<th>Pts</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>player1</td>
<td>50</td>
</tr>
<tr></tr>
<tr>
<td>2</td>
<td>player2</td>
<td>40</td>
</tr>
<tr></tr>
<tr>
<td>3</td>
<td>player3</td>
<td>30</td>
</tr>
<tr></tr>
<tr>
<td>4</td>
<td>player4</td>
<td>40</td>
</tr>
</body>
</html>
Related
My HTML:
<table style="width:100%">
<tr>
<th>First name</th>
<th>Last name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
My CSS:
table, th, td {
margin-top:150px;
margin-bottom:150px;
border:1px solid black;
}
th, td {
padding:15px;
}
th {
text-align:left;
border-collapse:collapse;
}
I want to collapse the borders of the TH only, but it's not working. Border collapse and border spacing aren't working when i target only the TH. I can change the background color and the padding and do other changes to TH only, but border changes seems to not work. Why is that?
Note: Before you tell me how it can be done using other ways, please tell me why THIS way isn't working.
Because border-collapse is a style rule of the table and not of the single cells (td or th). This means that you set it on the table element and all the borders in the table will collapse or separate.
You can mimic the behavior of border-collapse: separate only in td by doing something "hacky" like inserting a div inside tds. Check out the fiddle below:
table {
border-collapse: collapse;
}
th {
border: 1px solid black;
}
td {
padding: 2px;
}
td:first-child {
padding-left: 0;
}
td:last-child {
padding-right: 0;
}
td > div {
height: 100%;
width: 100%;
border: 1px solid black;
}
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td><div>Cell 1</div></td>
<td><div>cell 2</div></td>
</tr>
<tr>
<td><div>Cell 3</div></td>
<td><div>Cell 4</div></td>
</tr>
</tbody>
</table>
as everybody told you , border-collapse is a rule set for the whole table, it tells how cells should be printed at screen side by sides.
A work around could be to fake borders with a box-shadow.
inside tds :
table {
border-collapse: collapse;
}
th {
border: solid 2px;
box-shadow: inset 0 -2px;
}
td {
border: solid transparent;
box-shadow: inset 0 0 0 2px;
padding:3px;
}
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td> Cell 1 </td>
<td> Cell 2 </td>
</tr>
<tr>
<td> Cell 3 </td>
<td> Cell 4 </td>
</tr>
</tbody>
</table>
outside th
thead {
padding-bottom: 2px;
}
th {
border: 0;
box-shadow: 0 -2px, inset 0 -2px, 2px 0, -2px 0, 2px -2px, -2px -2px;
padding: 2px;
}
td {
border: solid 2px;
}
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td> Cell 1 </td>
<td> Cell 2 </td>
</tr>
<tr>
<td> Cell 3 </td>
<td> Cell 4 </td>
</tr>
</tbody>
</table>
The border-collapse property can only be applied to <table> elements - not individual rows or cells
https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
This question already has answers here:
Why do browsers insert tbody element into table elements?
(2 answers)
Why do browsers still inject <tbody> in HTML5?
(6 answers)
Closed 2 years ago.
I created the following code. In this case, we thought that tr:nth-child(odd) works as follows
caption-> not tr
tr-> not odd
tr-> background red!
tr-> not odd
tr-> background red!
But this worked this way
caption-> not tr
tr-> no background red
tr-> no background red
tr-> background red!
tr-> no background red
table {
border-collapse: collapse;
color: #000000;
width: 80%;
}
td,
th {
border: 1px solid #000000;
background-color: rgba(0, 0, 0, 0.3);
text-align: center;
padding: 3px;
}
th {
background-color: #31A9EE;
}
tr:nth-child(odd) {
background: red;
}
<table border="1">
<caption>caption</caption>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</table>
Why does nth-child not work as desired? I want to do this:
table {
border-collapse: collapse;
color: #000000;
width: 80%;
}
td,
th {
border: 1px solid #000000;
background-color: rgba(0, 0, 0, 0.3);
text-align: center;
padding: 3px;
}
th {
background-color: #31A9EE;
}
tr:nth-child(odd) {
background: red;
}
<table border="1">
<caption>caption</caption>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
</tr>
<tr style="background: red;">
<td>1</td>
<td>1</td>
<td>2</td>
</tr>
<tr style="background: transparent;">
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr style="background: red;">
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</table>
I want to apply bg-color to row 1 and 3
Because the first tr is not an odd child...its the second child...and so on.
What you actually need is
tr:nth-of-type(even){
background: red;
}
to target the 2nd tr etc....
table {
border-collapse: collapse;
color: #000000;
width: 80%;
}
td,
th {
border: 1px solid #000000;
background-color: rgba(0, 0, 0, 0.3);
text-align: center;
padding: 3px;
}
th {
background-color: #31A9EE;
}
tr:nth-of-type(even){
background: red;
}
<table border="1">
<caption>caption</caption>
<tr>
<th>First tr</th>
<th>First tr</th>
<th>First tr</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</table>
Even if you write the tr element directly in thetable element, the HTML processing will interpret that there is a tbody element under thetable element and that there is a tr element in it. On the other hand, the caption element is placed just below thetable element.
Therefore, tr:nth-child(odd) doesn't count the caption element which is not a sibling of the tr element.
So why is the tbody element inserted even though the tr element is allowed directly under the table? For historical reasons, the tbody element wasn't omissible in the HTML4 era, and tr element didn't come directly under table element. This means that there is a tbody element without writing a tag.
11.2.3 Row groups: the THEAD, TFOOT, and TBODY elements
TFOOT must appear before TBODY within a TABLE definition so that user agents can render the foot before receiving all of the (potentially numerous) rows of data. The following summarizes which tags are required and which may be omitted:
The TBODY start tag is always required except when the table contains only one table body and no table head or foot sections. The TBODY end tag may always be safely omitted.
The start tags for THEAD and TFOOT are required when the table head and foot sections are present respectively, but the corresponding end tags may always be safely omitted.
Conforming user agent parsers must obey these rules for reasons of backward compatibility.
For this reason, it seems that even today, with the spread of HTML5, major browsers supplement the tbody element even without a tag.
You can use tr:nth-child(even) instead of tr:nth-child(odd).
table {
border-collapse: collapse;
color: #000000;
width: 80%;
}
td,
th {
border: 1px solid #000000;
background-color: rgba(0, 0, 0, 0.3);
text-align: center;
padding: 3px;
}
th {
background-color: #31A9EE;
}
tr:nth-child(even) {
background: red;
}
<table border="1">
<caption>caption</caption>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</table>
change odd to even
or
change html to this
<table border="1">
<caption>caption</caption>
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</table>
I have a table that is controlled by a style sheet.
the table has been created from a poster which my boss wants it to look like. the problem i am having is on the poster there is a gap between two of the columns.
I have tried just putting two tables side by side however this caused me issues if viewed on a mobile devise, so i tried to add a column that had a border left and right and the same colour background as the rest of the page but i cant get rid of the top/bottom borders that are in place from the style sheet.
Style sheet.
.table__container {
overflow-x: scroll;
height: 100%;
width: 100%;
}
table {
border-collapse: collapse;
}
tr {
border-bottom: 0px dashed #DDD;
}
table tr th {
color: #88B53D;
}
table tr th, table tr td {
vertical-align: top;
}
.row__header {
border-top: 3px solid #DDD;
}
.row__header--day {
font-size: 1em;
text-transform: uppercase;
}
CSS on page
.nothing {
border-left: 1px solid #DDD;
border-right: 1px solid #DDD;
border-top: 0px;
border-bottom: 0px;
background-color: #eee;
}
HTML table
<div class="table__container">
<table width="100%">
<tr>
<th></th>
<th></th>
<th></th>
<td class="nothing">Gap should be here</td>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr class="row__header" style="text-align:center;">
<th class="row__header--day"></th>
<td></td>
<td></td>
<td class="nothing">Gap should be here</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
The style sheet was provided to me as part of our branding so i cant mess with it too much.
Is this the expected result? If yes then I will add some explanation.
.table__container {
height: 100%;
width: 100%;
}
table tr td.gap{
width:40%;
text-align:center;
border:none;
}
table tr td{
border:1px solid #000
}
<div class="table__container">
<table width="100%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td class="gap"></td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td class="gap"></td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</div>
I am having issue trying to make table 1 look like table 2 using css. I also noticed the increased height and watermark image does not reflect on print preview
Table 1
Table 2
Adding a row at the end of the tbody solve this.
<table>
<thead>
<tr>
<th>S/N</th>
<th>Description of goods</th>
<th>QTY</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Arch</td>
<td>7.92</td>
</tr>
<tr>
<td>2</td>
<td>White</td>
<td>3.96</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid #000;
}
td {
border-top: 0;
border-bottom: 0;
}
table {
height: 150px;
}
tr:last-child {
height: 100%;
}
Check my example https://jsfiddle.net/moisesnandres/4py2m8aq/
I have two tables that show data from database.
Now I set 1st table for headlines and 2nd table for the data.
I set like this
<table class="t_status">
<td>No</td>
<td>Name</td>
<td>Address</td>
</table>
In table #2
<table class="t_status">
<td>1</td>
<td>Michael</td>
<td>California</td>
<tr>
<td>2</td>
<td>Greg</td>
<td>LA</td>
Now facing the problem when data display, table 1 and table 2 set different width.
This is the CSS
table
{
empty-cells: show;
border-collapse: collapse;
width: 100%;
}
.t_status
{
border-collapse: collapse;
background: #fff;
border: 1px solid #d9d9d9;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
width: 100%;
margin-top: -1px;
}
.t_status td, th
{
border-top: 1px solid #c0c0c0;
border-bottom: 1px solid #c0c0c0;
border-left: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
padding: 10px;
font-size: 40pt;
font-weight: bold;
}
.t_status td
{
color: #fff;
background-color: #000;
}
.t_status th
{
font-size: 40pt;
color: #fff;
}
Try to put them like this:
<table class="t_status">
<tr>
<td>No</td>
<td>Name</td>
<td>Address</td>
</tr>
</table>
and
<table class="t_status">
<tr>
<td>1</td>
<td>Michael</td>
<td>California</td>
</tr>
<tr>
<td>2</td>
<td>Greg</td>
<td>LA</td>
</tr>
</table>
if am correct you are using two tables for scrolling effect of head and data, so you will get table header for all the data.
to achieve this effect you can try using jquery table jtable
sample code
Your html syntax is incorrect. Use tr tags:-
<table class="t_status">
<tr>
<td>No</td>
<td>Name</td>
<td>Address</td>
</tr>
</table>
You should put all information into one table, thus you can assure that the rows have the same width.
<table class="t_status">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Michael</td>
<td>California</td>
</tr>
<tr>
<td>2</td>
<td>Greg</td>
<td>LA</td>
</tr>
</tbody>
</table>
<thead></thead> and <tbody></tbody> are not necessary.
It seems that you have forgot the <tr> tags. By the way, if you want to preserve your markup (correct or not, but two different tables), you can try with nth selectors and give a fixed width to each cell:
.t_status td:nth-child(1) {
width:2em;
}
.t_status td:nth-child(2) {
width:5em;
}
.t_status td:nth-child(3) {
width:5em;
}
Here's a working example.