The following code, in all browsers - apart from Google Chrome Latest on the PC - displays a border on the tbody table cells, as specified in the CSS.
Chrome PC, displays the thead border, but not the TD borders. Why? Is it a bug in Chrome, or in my HTML/CSS?
Heres a jsFiddle that replicates it:
<table width="505" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>Testing</td>
<td>123</td>
</tr>
<tr>
<td>Testing</td>
<td>456</td>
</tr>
</tbody>
<thead>
<tr>
<th>foo</th>
<th>bar</th>
</tr>
</thead>
table {
width:736px;
border-collapse: collapse;
thead {
border-top: 2px solid #aaaaaa;
tr {
th {
border: 0;
padding: 12px 5px;
}
}
}
tbody {
border-top:0;
tr {
td {
padding: 10px 5px;
border-top: 1px solid #aaaaaa;
border-bottom: 1px solid #aaaaaa;
}
}
Try with putting tbody after thead.
HTML
<table width="505" cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th>foo</th>
<th>bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>Testing</td>
<td>123</td>
</tr>
<tr>
<td>Testing</td>
<td>456</td>
</tr>
</tbody>
</table>
JSFiddle
From MDN:
thead - A table element. The thead must appear after any caption or colgroup element, even implicitly defined, but before any tbody, tfoot and tr element.
Remove border-collapse: collapse and use border-top for TD and border-bottom for TABLE.
Live demo
Try this.
table {
width:736px;
border-collapse: collapse;
}
thead {
border-top: 2px solid #aaaaaa;
}
th {
border: 0;
padding: 12px 5px;
}
tbody {
border-top:0;
}
td {
padding: 10px 5px;
border-top: 1px solid #aaaaaa;
border-bottom: 1px solid #aaaaaa;
}
I had a table using -webkit-backface-visibility:hidden;, which was hiding border color, so to fix I used -webkit-backface-visibility:visible;.
Related
I have two different tables on separate pages, and I need to specify a certain style to each one. This is my code (It works with separate stylesheets, but I need it to work on one):
Here is a snippet of my tables and the CSS:
body {
font-family: verdana;
}
/* Table 1 css */
.table1,
th,
td {
color: #030099;
border: 1px solid black;
border-width: 0px 1px 1px 1px;
font-size: 110%;
}
/* Table 2 css */
.pcsetup,
th,
td {
color: #030099;
border: 1px solid black;
border-width: 0px 1px 1px 1px;
font-size: 110%;
}
.tc1 {
background-color: white;
border: 2px solid black;
padding: 5px;
}
<h4>table 1</h4>
<table cellpadding="10" cellspacing="0" class="table1">
<caption class="tc1"><strong>My PC Setup</strong></caption>
<tr>
<th>Component</th>
</tr>
<tr>
<td><strong>CPU:</strong></td>
</tr>
<tr>
<td><strong>RAM:</strong></td>
</tr>
</table>
<h4>table 2</h4>
<table cellpadding="10" cellspacing="0" class="pcsetup">
<caption class="tc1"><b>PC Setup</b></caption>
<tr>
<th>Component</th>
</tr>
<tr>
<th><strong>CPU</strong></th>
</tr>
<tr>
<th><strong>RAM</strong></th>
</tr>
</table>
How can I differentiate between the two?
How does one prevent the inheriting of borders in a nested tabled?
I tried to a add a borderless class to the nested table, but the borders of the parent class are still inherited.
.plain_tbl {
border: none;
}
.plain_tbl tr td {
border: none;
}
.tbl {
border: 1px solid;
}
.tbl tr td {
border: 1px solid;
}
<table class="tbl">
<tr>
<td align=center style="padding:50px">
<table border=0 class="plain_tbl">
<tr>
<td>0--------------------100</td>
</tr>
<tr>
<td align=center> ^ <br>50</td>
</tr>
</table>
</td>
</tr>
</table>
I am looking for a solution which does not change the parent class, i.e. how to make the nested class overwrite the parent class
The problem you have is
.tbl tr td {
border: 1px solid;
}
which will add a border to every <td> also if it is a table inside a table you could fix it by using
.tbl > tr > td {
border: 1px solid;
}
.plain_tbl {
border: none;
}
.plain_tbl tr td {
border: none;
}
.tbl {
border:1px solid;
}
.tbl > tr > td {
border: 1px solid;
}
<table class="tbl">
<tr>
<td align=center style="padding:50px">
<table border=0 class="plain_tbl">
<tr><td>0--------------------100</td></tr>
<tr><td align=center> ^ <br>50</td></tr>
</table>
</td>
</tr>
</table>
Update, another solution then previous using specificity
In the comments you asked
why does the nested class not overwrite the parent class?
The reason is Specificity and the order of your CSS rules. If you are not allowed to change the CSS order you can change the specificity. You need to be more specific then this
.tbl tr td {
border: 1px solid;
}
To be more specific you can change like so
.tbl .plain_tbl tr td {
border: none;
}
run the code snippet and see it work
.plain_tbl {
border: none;
}
.tbl .plain_tbl tr td {
border: none;
}
.plain_tbl tr td {
border: none;
}
.tbl {
border:1px solid;
}
.tbl tr td {
border: 1px solid;
}
<table class="tbl">
<tr>
<td align=center style="padding:50px">
<table border=0 class="plain_tbl">
<tr><td>0--------------------100</td></tr>
<tr><td align=center> ^ <br>50</td></tr>
</table>
</td>
</tr>
</table>
Third method, only changing the order of your css
because both rules actually have the same specificity you can also just place the rule .plain_tbl tr td after .tbl tr td { in your css file like so:
.plain_tbl {
border: none;
}
/*
move this to the bottom
.plain_tbl tr td {
border: none;
}
*/
.tbl {
border: 1px solid;
}
.tbl tr td {
border: 1px solid;
}
/* see here */
.plain_tbl tr td {
border: none;
}
<table class="tbl">
<tr>
<td align=center style="padding:50px">
<table border=0 class="plain_tbl">
<tr><td>0--------------------100</td></tr>
<tr><td align=center> ^ <br>50</td></tr>
</table>
</td>
</tr>
</table>
your problem lies with the order of rules, since .tbl td is more general, it also applied to the inner element, and since its the last rule applied, it overrides the previous rule, which is the more specific rule
.
so simply rearrange your css and fix
.tbl {
border: 1px solid;
}
.tbl tr td {
border: 1px solid;
}
.plain_tbl {
border: none;
}
.plain_tbl tr td {
border: none;
}
<table class="tbl">
<tr>
<td align=center style="padding:50px">
<table border=0 class="plain_tbl">
<tr>
<td>0--------------------100</td>
</tr>
<tr>
<td align=center> ^ <br>50</td>
</tr>
</table>
</td>
</tr>
</table>
You can f.e. remove the plain_tbl class completely, and just apply the border to table cells that are in rows that are direct descendants of your main table:
.tbl,
.tbl > tr > td {
border: 1px solid;
}
I'm trying to create a table with rounded top corners and a different background color for the header line. I succeeded in making both individually (super beginner in html/css) thanks to online ressources but I fail when it comes to have the two at the same time.
What I mean is (and you can see it in the fiddle below), I can round the corners just fine and have the design I want for my table except that the header background-color is still a perfect rectangle and thus is overflowing outside the rounded corners.
I tried adding the border-radius property in various places but none worked the way I intended. How can I make the corners rounded and having the thead background-color fitting nicely in it ?
table.std {
margin-top: 0.2cm;
width: 100%;
border: 0.03cm solid #8a8a8a;
border-spacing: 0;
border-radius: 15px 15px 0px 0px;
font-size: 10pt;
}
table.std thead {
text-align: left;
background-color: lightgray;
height: 25px;
}
table.std thead tr th:first-child {
padding-left: 0.25cm;
/* To align with section title */
border-bottom: 0.03cm solid #8a8a8a;
}
table.std tbody tr td:first-child {
padding-left: 0.25cm;
/* To align with section title */
width: 30%;
}
table.std tbody tr td {
border-bottom: 0.01cm dashed lightgray;
height: 20px;
}
<div>
<table class="std">
<thead>
<tr>
<th colspan=2>Test</th>
</tr>
</thead>
<tbody>
<tr>
<td>ID</td>
<td>id1</td>
</tr>
<tr>
<td>Date</td>
<td>2019/12/19</td>
</tr>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
<tr>
<td>lorem</td>
<td>ipsum</td>
</tr>
<tr>
<td>john</td>
<td>doe</td>
</tr>
</tbody>
</table>
</div>
https://jsfiddle.net/co7xb42n/
Thanks for the help
Add the border-radius to th
table.std thead tr th:first-child {
padding-left: 0.25cm; /* To align with section title */
border-bottom: 0.03cm solid #8a8a8a;
border-radius: 15px 15px 0px 0px;
}
https://jsfiddle.net/53eshg64/
add border-radius from th tag.
table.std {
margin-top: 0.2cm;
width: 100%;
border: 0.03cm solid #8a8a8a;
border-spacing: 0;
border-radius: 15px 15px 0px 0px;
font-size: 10pt;
}
table.std thead {
text-align: left;
background-color: lightgray;
height: 25px;
}
table.std thead tr th:first-child {
padding-left: 0.25cm; /* To align with section title */
border-bottom: 0.03cm solid #8a8a8a;
border-radius: 15px 15px 0px 0px;
}
table.std tbody tr td:first-child {
padding-left: 0.25cm; /* To align with section title */
width: 30%;
}
table.std tbody tr td {
border-bottom: 0.01cm dashed lightgray;
height: 20px;
}
<div>
<table class="std">
<thead>
<tr>
<th colspan=2>Test</th>
</tr>
</thead>
<tbody>
<tr>
<td>ID</td>
<td>id1</td>
</tr>
<tr>
<td>Date</td>
<td>2019/12/19</td>
</tr>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
<tr>
<td>lorem</td>
<td>ipsum</td>
</tr>
<tr>
<td>john</td>
<td>doe</td>
</tr>
</tbody>
</table>
</div>
This is cause the th tag is above of the table tag and it doesn't have any border-radius
Add the border-radius to th
I want the outer borders of my table be dashed, while the inner borders be solid. So I made these css codes for my normal-table, but whole table border is solid.
.zulu-post .zulu-content .normal-table{
color: #444444;
border: 1px dashed #444444;
}
.zulu-post .zulu-content .normal-table td, .normal-table tr{
padding: 10px;
border: 1px solid #444444;
}
<table border="1" cellpadding="1" cellspacing="1" class="normal-table" style="width:500px;">
<tbody>
<tr>
<td>Table Name</td>
</tr>
<tr>
<td>Make sure that Stylesheet Classes is normal-table</td>
</tr>
<tr>
<td>Text Here...</td>
</tr>
</tbody>
</table>
This is one way of doing what you want:
Basically you add border left and top to all <td> tags and than remove the border from the sides of the table, and you use dashed border on <table>.
.normal-table {
color: #444444;
border: 1px dashed #444444;
}
.normal-table td {
padding: 10px;
border-left: 1px solid #444444;
border-top: 1px solid #444444;
}
.normal-table td:first-child {
border-left: none;
}
.normal-table tr:first-child td {
border-top: none;
}
<table cellpadding="1" cellspacing="0" class="normal-table" style="width:500px;">
<tbody>
<tr>
<td>Table Name</td>
</tr>
<tr>
<td>Make sure that Stylesheet Classes is normal-table</td>
</tr>
<tr>
<td>Text Here...</td>
</tr>
</tbody>
</table>
1st make use of border-collpase:collapse, this collapse the table border to single border then do styling part for table, tbody, tr and such.
.normal-table {
border: 2px solid red;
border-collapse: collapse;
}
tr {
border: 2px dashed red;
}
<table border="1" cellpadding="1" cellspacing="1" class="normal-table" style="width:500px;">
<tbody>
<tr>
<td>Table Name</td>
</tr>
<tr>
<td>Make sure that Stylesheet Classes is normal-table</td>
</tr>
<tr>
<td>Text Here...</td>
</tr>
</tbody>
</table>
You can use divs as an alternative:
.container {
width: 100%;
border: medium dashed darkgray;
display: table;
}
.cell {
width: 30%;
border: thin solid red;
height: 50px;
display: table-cell;
}
<div class='container'>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
</div>
I'm trying to make a full width table that has rounded corners, a border around the entire table, and a border under each table row (except the last one, don't want to double up...).
My sample: http://jsfiddle.net/7xD64/13/
My code:
<table>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</tbody>
</table>
table {
overflow: hidden;
border-radius: 10px;
background-color: white;
border: 1px solid black;
border-collapse: collapse;
border-spacing: 0;
width: 100%
}
tr {
border-bottom: 1px solid black;
}
This works perfectly in Chrome, but is broken in Safari (there is no outer border). If I remove the overflow: hidden it renders the outer border, but the table doesn't have rounded edges.
I've found a few solutions, but they don't seem to work on tables (or, as is likely, I'm not implementing them properly).
Question: Is it possible to make a table that has the following and works in Chrome, Safari and IE(8+)?
border around the entire table
rounded edges (with border) for the table
borders at the bottom of each table row
table is full width
If is is possible, could you please update my fiddle / code to explain how it works? (I'm still getting started with CSS, and I get pretty confused about where to put the rules.)
Thanks!
Your Updated jsFiddle Table Your Table
General table Bordered Table
HTML
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
CSS
table {
max-width: 100%;
width: 100%;
background-color: transparent;
margin-bottom: 20px;
border-spacing: 0;
border:1px solid #ddd;
border-radius:15px;
overflow:hidden;
}
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
.table thead>tr>th, .table tbody>tr>th, .table tfoot>tr>th, .table thead>tr>td, .table tbody>tr>td, .table tfoot>tr>td {
padding: 8px;
line-height: 1.428571429;
vertical-align: top;
border-top: 1px solid #ddd;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
Create one div outside of your table and apply the border radius. Also use last-child property to remove the border for the last items.
CSS:
#mytable{
border-radius: 10px;
background-color: white;
border: 1px solid black;
}
.mytable {
border-collapse: collapse;
border-spacing: 0;
}
.mytable tr td {
border-bottom: 1px solid black;
}
.mytable tr:last-child td {
border-bottom: 0px solid black;
}
HTML
<div id="mytable">
<table class="mytable" width="100%">
<tbody>
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</tbody>
</table>
</div>
DEMO
Try following code for rounded border and it should work in all browsers
table {
overflow: hidden;
border-radius: 10px;
background-color: white;
border: 1px solid black;
border-collapse: collapse;
border-spacing: 0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
}