I have a following code:
<html>
<head>
<style>
table {
border: solid red 2px;
}
tr {
border: solid red 2px;
}
td {
border: inherit;
}
</style>
</head>
<body>
<table>
<tr>
<td> 1 </td> <td> 2 </td>
</tr>
<tr>
<td> 1 </td> <td> 2 </td>
</tr>
</table>
</body>
</html>
It works correctly. A property border of "tr" inherit by child "td".
But this code work differently, in spite of fact, that logical of work is the same:
<html>
<head>
<style>
table {
border: solid red 2px;
}
tr {
border: inherit;
}
td {
border: inherit;
}
</style>
</head>
<body>
<table>
<tr>
<td> 1 </td> <td> 2 </td>
</tr>
<tr>
<td> 1 </td> <td> 2 </td>
</tr>
</table>
</body>
</html>
There is property border of "tr" don't inherit by child "td". Why?
In the final html that is rendered, tr is not child of table but tbody.
Hierarchy is: table -> tbody -> tr
Default border of tbody is not inherit but `medium , therefore, tr doesn't inherit.
Try this:
tbody, tr {
border: inherit;
}
Related
I have been improving code that transforms XML to HTML. There is a recursive method that generates a table.
I want each level to have different color. So I set a style for three levels and I repeat them if the recursion is deeper (level % 3).
But it seems that parent table style gets priority as the fourth level has the same color as its parent. Can I work around this trouble?
http://jsbin.com/lexumogafe
<html>
<head><style>
table { border-collapse: collapse; }
table, th, td { border: 1px solid black; }
th, td { padding: 10px; }
table.level_1 td { border-color: green; }
table.level_2 td { border-color: blue; }
table.level_3 td { border-color: red; }
</style></head>
<body>
<table class='rule level_1'>
<tr class="all">
<td>XX</td>
<td>
<table class='rule level_2'>
<tr class="all">
<td>YY</td>
<td>
<table class='rule level_3'>
<tr class="all">
<td>ZZ</td>
<td>
<table class='rule level_1'>
<tr class="all">
<td>ZZ</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You can make the styles specific to the actual tds using the direct child selector:
table.level_1 > tbody > tr > td { border-color: green; }
table.level_2 > tbody > tr > td { border-color: blue; }
table.level_3 > tbody > tr > td { border-color: red; }
Updated bin
use css parent child relation like
table > table > td
{
border-collapse: collapse;
}
this way css property will apply only to its child element not siblings.
I'm trying to use HTML to construct a table with three rows (1-3) and three columns (A-C) forming nine "virtual cells" (A1, B1, C1, A2, B2, C2, A3, B3, C3) and apply row spanning so that:
cell A1 span all three rows (covering A2 and A3)
cell C1 span two rows (covering C2)
cell B2 span two rows (covering B3)
This is what I want to see:
This is the HTML I thought would give me that:
<html>
<head>
<style>
table { border-collapse: collapse; }
td { border: 1px solid black; padding: 1em; vertical-align: top; }
</style>
</head>
<body>
<table>
<tr><td rowspan="3">A1</td><td>B1</td><td rowspan="2">C1</td></tr>
<tr><td rowspan="2">B2</td></tr>
<tr><td>C3</td></tr>
</table>
</body>
</html>
But that gives me:
What is the correct way to get what I want? Or is it not possible?
This is for use in technical documentation. It is not a layout issue, the content is semantically a table.
In order to prevent the rows collapsing without the need for additional markup, you can attach a phantom cell to each row with tr::after set to display: table-cell with your cell padding on top and bottom and a unicode blank space:
tr::after {
content: '\00a0';
display: table-cell;
padding: 1em 0;
}
Gives you the correct result:
It's worth noting that the phantom cell will create a slight gap to the right like this:
Full snippet
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 1em;
vertical-align: top;
}
tr:after {
content: '\00a0';
display: table-cell;
padding: 1em 0;
}
<table>
<tr>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td rowspan="2">B2</td>
</tr>
<tr>
<td>C3</td>
</tr>
</table>
Here's a solution without having to know the table height up front, using hidden table cells, like in Align table using rowspan and colspan (as I said, it's basically a duplicate, just another layout):
<html>
<head>
<style>
table { border-collapse: collapse; }
td { border: 1px solid black; padding: 1em; vertical-align: top; }
td.hidden { visibility: hidden; padding: 1em 0; border: 0 none; }
</style>
</head>
<body>
<table>
<tr><td rowspan="3">A1</td><td>B1</td><td rowspan="2">C1</td><td class="hidden"></td></tr>
<tr><td rowspan="2">B2</td><td class="hidden"></td></tr>
<tr><td>C3</td><td class="hidden"></td></tr>
</table>
</body>
</html>
Why not just setting a height to the tr cause it is a table the height will adjust anyways if there is more content inside the row.
something like so:
table {
border-collapse: collapse;
}
tr {
height: 30px;
}
td {
border: 1px solid black;
padding: 1em;
vertical-align: top;
}
<table>
<tr>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td rowspan="2">B2</td>
</tr>
<tr>
<td>C3</td>
</tr>
</table>
Otherwise,
<!DOCTYPE html>
<html>
<head>
<style>
table { border-collapse: collapse; }
td{border: 1px solid black; padding: 1em; vertical-align: top; }
</style>
</head>
<body>
<table>
<tr>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td rowspan="2">B2</td>
</tr>
<tr>
<td rowspan="2">C3</td>
</tr>
</table>
</body>
</html>
You could hack it like this:
<html>
<head>
<style>
table { border-collapse: collapse; }
td { border: 1px solid black; padding: 1em; vertical-align: top; }
</style>
</head>
<body>
<table>
<tr>
<td style="width:0px;padding:0;border:0"></td>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td style="width:0px;padding:0;border:0;height:50px"></td>
<td rowspan="2">B2</td>
</tr>
<tr>
<td style="width:0px;padding:0;border:0"></td>
<td>C3</td>
</tr>
</table>
</body>
</html>
... but I would recommend to use another structure instead of tables, since it doesn't have a lot in common with table, besides the columns.
It's depend the height of your table.
http://codepen.io/anon/pen/jBOgpx
<table>
<tr>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td rowspan="2" style="height:65px">B2</td>
</tr>
<tr>
<td>C3</td>
</tr>
</table>
I want to have some TDs in a table without border. Here is what I've tried:
CSS
.calendar-noBorder {
border: none;
background-color: red;
}
.calendar-table {
border-collapse: collapse;
}
.calendar-table td {
border: 1px solid black;
}
HTML
<table class="calendar-table">
<tr>
<td class="calendar-noBorder"> </td>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
<tr>
<td class="calendar-noBorder"> </td>
<td> a </td>
<td> b </td>
<td> c </td>
</tr>
<tr>
<td> aaaaaa</td>
<td> b </td>
<td> c </td>
<td> d </td>
</tr>
</table>
JsFiddle
I want the TDs with noBorderTD class to have no border and the others to have borders. I'd like to avoid to specify a class using "class=" on every bordered TDs.
What's the best way to do it clean ?
Your order of applying styles was wrong. The correct order is:
.calendar-table td {
border: 1px solid black;
}
td.calendar-noBorder {
border: none;
background-color: red;
}
.calendar-table {
border-collapse: collapse;
}
Explanation: First specify the borders for all the td, then remove the specific td borders which are not needed.
See the fiddle: "https://jsfiddle.net/bwudg7fn/1/"
instead of:
border:none;
Use -
border:0;
on the TD classes
Try
.calendar-noBorder {
border: none!important;
background-color: red;
}
https://jsfiddle.net/bwudg7fn/2/
could someone tell me how to resolve problem of ancestor table class affecting successor table elements.
I have a table in table:
<table id="table1" class='parent'>
<tr>
<td>
<table style="width: 100%">
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
and I have css settings:
.parent {
background: yellow;
width: 200px;
height: 100px;
}
#table1 tr:first-child td:first-child {
width: 100%;
height: 30px;
border: dashed red 1px;
}
this will result that table2 tr:first-child td:first-child will also get
width: 100%;
height: 30px;
border: dashed red 1px;
How can I avoid this and make css settings only for parent table, not affecting successor table elements
Use ">" for not to apply styles for nested tables
#table1>tr:first-child>td:first-child
or
#table1>tbody>tr:first-child>td:first-child
css:
.item_fact{
border-bottom:#CCCCCC 1px solid;
}
html:
<table>
<tr class="item_fact">
<td> hello </td>
<td> world </td>
</tr>
</table>
IE7 does not display the border-bottom, but Firefox and Chrome does!
How can I hack this css?
the correct css syntax would be:
border-bottom: size style color;
So, in your case:
border-bottom: 1px solid #CCCCCC;
edit: actually, it seems TR doesn't act like it 'contains' the TD elements in IE7. One trick you can do is have the table collapse borders, then apply all TDs under .item_fact to have the border-bottom themselves.
Like this:
<html>
<head>
<style type="text/css">
table {
border-collapse: collapse;
}
.item_fact td {
border-bottom:1px solid #CCCCCC;
}
</style>
</head>
<body>
<table>
<tr class="item_fact">
<td> hello </td>
<td> world </td>
</tr>
</table>
</body>
</html>
Borders on rows are not supported in IE/css. You need to border the cells.
.item_fact td {
border-bottom:1px solid #ccc;
}