I am trying to select all columns of the first table in a form.
.myform table:first td { color: red }
Code Sample: https://jsfiddle.net/fqsLaxzL/1/
I edited your fiddle : https://jsfiddle.net/fqsLaxzL/2/
table {
border: solid 1px black;
}
.myform table:FIRST-CHILD td { color: red }
<form class="myform">
<table>
<tr>
<td>this</td>
<td>this</td>
<td>
<table>
<tr>
<td>this one too</td>
<td>this one too</td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<tr>
<td>...</td>
</tr>
</table>
<table>
<tr>
<td>...</td>
</tr>
</table>
</form>
Related
Is there a way to make the second table borders look the same as the first table?
table {
border: 1px solid black;
}
.top {
border-top: 1px solid black;
}
.bottom {
border-bottom: 1px solid black;
}
.right {
border-right: 1px solid black;
}
.left {
border-left: 1px solid black;
}
#fin td,
#fin tr {
padding: 0;
}
#fin tr{
border: 1px solid black;
}
<table border="1">
<tr>
<td>
<table>
<tr>
<td>HTML</td>
<td>★★★★★</td>
</tr>
<tr>
<td>CSS</td>
<td>★★</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Javascript</td>
<td>★</td>
</tr>
<tr>
<td>Node</td>
<td>★</td>
</tr>
</table>
</td>
</table>
<hr>
My Hobbies
Contact Me
<br><br><br>
<table id='fin'>
<tr class='top'><!--
--><td class='top left'>HTML</td><!--
--><td class = 'top right'>★★★★★</td><!--
--><td class='top left'>Javascript</td><!--
--><td class='top right'>★</td><!--
--></tr><!--
--><tr class='bottom'><!--
--><td class='bottom left'>CSS</td><!--
--><td class = 'bottom right'>★★</td><!--
--><td class='bottom left'>Node</td><!--
--><td class='bottom right'>★</td><!--
--></tr>
</table>
<hr>
My Hobbies
Contact Me
I would play with pseudo element
table {
border: 1px solid black;
}
td[class] {
position: relative;
padding: 4px;
}
td[class]::before,
td[class]::after{
content:"";
position: absolute;
inset: var(--t,0) var(--r,0) var(--b,0) var(--l,0);
pointer-events: none;
border: solid black;
border-width: var(--w,0);
}
td[class]::after {
inset: var(--t,2px) var(--r,2px) var(--b,2px) var(--l,2px);
}
.top-left {--w: 1px 0 0 1px;--b:-4px;--r:-4px;}
.top-right {--w: 1px 1px 0 0;--b:-4px;--l:-4px;}
.bottom-left {--w: 0 0 1px 1px;--t:-4px;--r:-4px;}
.bottom-right {--w: 0 1px 1px 0;--t:-4px;--l:-4px;}
<table border="1">
<tr>
<td>
<table>
<tr>
<td>HTML</td>
<td>★★★★★</td>
</tr>
<tr>
<td>CSS</td>
<td>★★</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Javascript</td>
<td>★</td>
</tr>
<tr>
<td>Node</td>
<td>★</td>
</tr>
</table>
</td>
</table>
<hr>
My Hobbies
Contact Me
<br><br><br>
<table id='fin'>
<tr>
<td class='top-left'>HTML</td>
<td class='top-right'>★★★★★</td>
<td class='top-left'>Javascript</td>
<td class='top-right'>★</td>
</tr>
<tr>
<td class='bottom-left'>CSS</td>
<td class='bottom-right'>★★</td>
<td class='bottom-left'>Node</td>
<td class='bottom-right'>★</td>
</tr>
</table>
<hr>
My Hobbies
Contact Me
I made some changes to your code, and now they look the same. However, please be aware that I removed the "fin" id from the second table. So I suggest you choose a new ID for that one and start from there.
(I did not touch any of the CSS, essentially I just copied the first table over so they both look the same)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table border="1">
<tr>
<td>
<table >
<tr>
<td>HTML</td>
<td>★★★★★</td>
</tr>
<tr>
<td>CSS</td>
<td>★★</td>
</tr>
</table>
</td>
<td>
<table >
<tr>
<td>Javascript</td>
<td>★</td>
</tr>
<tr>
<td>Node</td>
<td>★</td>
</tr>
</table>
</td>
</table>
<hr>
My Hobbies
Contact Me
<br><br><br>
<table border="1">
<tr>
<td>
<table>
<tr>
<td>HTML</td>
<td>★★★★★</td>
</tr>
<tr>
<td>CSS</td>
<td>★★</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Javascript</td>
<td>★</td>
</tr>
<tr>
<td>Node</td>
<td>★</td>
</tr>
</table>
</td>
</table>
<hr>
My Hobbies
Contact Me
</body>
</html>
If you match the structure of your second table to your first it should work. I have added a css class so as to not repeat the border style.
<style>
#borderForTable{
border:1px solid black
}
#borderForTD{
border:2px double black
}
</style>
<table id="borderForTable">
<tr>
<td id="borderForTD">
<table>
<tr>
<td>HTML</td>
<td>★★★★★</td>
</tr>
<tr>
<td>CSS</td>
<td>★★</td>
</tr>
</table>
</td>
<td id="borderForTD">
<table>
<tr>
<td>Javascript</td>
<td>★</td>
</tr>
<tr>
<td>Node</td>
<td>★</td>
</tr>
</table>
</td>
</tr>
</table>
<hr>
My Hobbies
Contact Me
<br><br><br>
<table id="borderForTable">
<tr>
<td id="borderForTD">
<table>
<tr>
<td>HTML</td>
<td>★★★★★</td>
</tr>
<tr>
<td>CSS</td>
<td>★★</td>
</tr>
</table>
</td>
<td id="borderForTD">
<table>
<tr>
<td>Javascript</td>
<td>★</td>
</tr>
<tr>
<td>Node</td>
<td>★</td>
</tr>
</table>
</td>
</tr>
</table>
<hr>
My Hobbies
Contact Me
Considering the following code displaying two different buttons structured by a table (<tbody class="btn btn-left"> is a button and <tbody class="btn btn-right"> is another button:
<table>
<tbody class="btn btn-left">
<tr>
<td class="btn-tl"></td>
<td class="btn-tc"></td>
<td class="btn-tr"></td>
</tr>
<tr>
<td class="btn-ml"></td>
<td class="btn-mc"></td>
<td class="btn-mr"></td>
</tr>
<tr>
<td class="btn-bl"></td>
<td class="btn-bc"></td>
<td class="btn-br"></td>
</tr>
</tbody>
</table>
<table>
<tbody class="btn btn-right">
<tr>
<td class="btn-tl"></td>
<td class="btn-tc"></td>
<td class="btn-tr"></td>
</tr>
<tr>
<td class="btn-ml"></td>
<td class="btn-mc"></td>
<td class="btn-mr"></td>
</tr>
<tr>
<td class="btn-bl"></td>
<td class="btn-bc"></td>
<td class="btn-br"></td>
</tr>
</tbody>
</table>
The css is working but doesn't target the td, which I need to
.btn-left {
background-color: red;
border-color: red;
}
.btn-right {
background-color: blue;
border-color: blue;
}
How would you set up the css so that one button displays a color and the other button displays another color ?
Thank you for your help.
at first - you must use the table tag.
Then put following classes in your Stylesheet:
.btn-left { color: blue; }
.btn-right { color: red; }
a liddle fiddle
I have this table inside another table, i want to remove the border from the cells of child table(around A and B).
Below is the source code for this.
<style>
.withBorders tr td{
border: 1px solid black !important ;
}
.withBorders table.withoutBorders tr td {
border:0px
}
</style>
<table class="withBorders">
<tr>
<td>
<table class="withoutBorders">
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
</tbody>
</table>
</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
</tr>
</table>
The problem is this isn't working, i have tried many changes with child table's css selector but i am unable to override parent table css property.
Could someone please advice on this?
Note: I can not make any changes to the parent table css selector.
.withBorders tr td{
border: 1px solid black;
}
.withBorders tr td table tr td {
border:none;
}
<table class="withBorders">
<tr>
<td>
<table class="withoutBorders">
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
</tbody>
</table>
</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
</tr>
</table>
repeat what you typed, don't change your typing like this
.withBorders table.withoutBorders tr td {
border:0px
}
avaoid !important in your css. it's not good.
You can easily use the code like this:
.withBorders tr td{
border: 1px solid black;
}
.withBorders table.withoutBorders tr td {
border:0px
}
<table class="withBorders">
<tr>
<td>
<table class="withoutBorders">
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
</tbody>
</table>
</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
</tr>
</table>
"!important" means that if it is some choice between 2 styles, it will be choosen the style with higher priority. (the style which contains "!important")
Hello I have these following tables for which I want same vertical line. please check my code here link I have two vertical tables, I want same vertical line of alignment for both the tables so that The line between two tables appears same though the tables are different.
Here is what I want
Here is what I am getting if I add text to th .
please tell me how can I make it better.
table,
th,
td {
border: 1px solid black;
}
<table style="width:100%" cellpadding="10px" cellspacing="1px" padding="20px">
<tr>
<th>Month</th>
<td>Savings</td>
</tr>
<tr>
<th>January</th>
<td>$100</td>
</tr>
<tr>
<th>February</th>
<td>$80</td>
</tr>
</table>
<table style="width:100%">
<tr>
<th>Monthasnsandf</th>
<td>Savings</td>
</tr>
<tr>
<th>Januarydfsadfas</th>
<td>$100</td>
</tr>
<tr>
<th>Februarydfsadfsafa</th>
<td>$80</td>
</tr>
</table>
You could simply specify the width for the th and td elements, say 50%.
table, th, td {
border: 1px solid black;
}
table th, table td {
width: 50%;
}
table th {
text-align: left;
}
<table style="width:100%" cellpadding="10px" cellspacing="1px" padding="20px">
<tr>
<th>Month</th>
<td>Savings</td>
</tr>
<tr>
<th>January</th>
<td >$100</td>
</tr>
<tr>
<th>February</th>
<td >$80</td>
</tr>
</table>
<table style="width:100%" cellpadding="10px" cellspacing="1px" padding="20px">
<tr>
<th>Monthasnsandf</th>
<td>Savings</td>
</tr>
<tr>
<th>Januarydfsadfas</th>
<td >$100</td>
</tr>
<tr>
<th>Februarydfsadfsafa</th>
<td >$80</td>
</tr>
</table>
what I did is put the two tables in another table which has 2 rows to perfectly match vertical alignment
table, th, td {
border: 1px solid black;
}
table th, table td {
width: 50%;
}
<table>
<tr>
<td>
<table style="width:100%">
<tr>
<th>Month</th>
<td>Savings</td>
</tr>
<tr>
<th>January</th>
<td >$100</td>
</tr>
<tr>
<th>February</th>
<td >$80</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style="width:100%">
<tr>
<th>Monthasnsandf</th>
<td>Savings</td>
</tr>
<tr>
<th>Januarydfsadfas</th>
<td >$100</td>
</tr>
<tr>
<th>Februarydfsadfsafa</th>
<td >$80</td>
</tr>
</table>
</td>
</tr>
</table>
I assume this is what you expect!
I'd tried to make a line as an image below which runs through the table but it didn't work.
I would like to
make a line like the image.
set a bullet for each <td> in the 2nd table
HTML:
<table>
<tr>
<table class="a">
<tr>
<td style="width: 300px">Shuttle Bus Schedule | Make an appointment</td>
<td style="width: 220px">My Request</td>
</tr>
</table>
</tr>
<tr>
<table>
<tr>
<td style="width: 300px">Need Approval by Manager</td>
<td style="width: 220px">Need Approval by Coordinator</td>
</tr>
<tr>
<td>Approved by Manager</td>
<td>Approved by Coordinator</td>
</tr>
<tr>
<td>Rejected by Manager</td>
<td>Rejected by Coordinator</td>
</tr>
</table>
</tr>
</table>
CSS:
.a {
border-bottom: 1px solid #c4c4c4;
}
Structure your table properly with table headings (<th>) instead of nested tables:
<table>
<tr>
<th style="width: 300px">Shuttle Bus Schedule | Make an appointment</th>
<th style="width: 220px">My Request</th>
</tr>
<tr>
<td>Need Approval by Manager</td>
<td>Need Approval by Coordinator</td>
</tr>
<tr>
<td>Approved by Manager</td>
<td>Approved by Coordinator</td>
</tr>
<tr>
<td>Rejected by Manager</td>
<td>Rejected by Coordinator</td>
</tr>
</table>
CSS:
th {border-bottom:1px solid #c4c4c4};
td:before {content:"\2022";}
You can see this here on jsfiddle.
The table structure is not really in good format. However to keep the same table structure you can achieve the results. See the DEMO.
Here is the CSS need to used.
.a {
border-top: 1px solid transparent;
}
table{border: 1px solid transparent;
border-collapse:collapse;}
table td{ padding:5px; margin:5px;}
table+table td:last-child{border-left:
1px solid #c4c4c4;}
table+table td:last-child:before{content:"\2022"}
table+table{border-top: 1px solid #c4c4c4; }
table.a td:last-child:before{content:" "}