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>
<a href="hobbies.html">My Hobbies</a>
<a href="contact.html">Contact Me</a>
<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>
<a href="hobbies.html">My Hobbies</a>
<a href="contact.html">Contact Me</a>CodePudding user response：
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>
<a href="hobbies.html">My Hobbies</a>
<a href="contact.html">Contact Me</a>
<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>
<a href="hobbies.html">My Hobbies</a>
<a href="contact.html">Contact Me</a>CodePudding user response：
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>
<a href="hobbies.html">My Hobbies</a>
<a href="contact.html">Contact Me</a>
<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>
<a href="hobbies.html">My Hobbies</a>
<a href="contact.html">Contact Me</a>
</body>
</html>CodePudding user response：
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>
<a href="hobbies.html">My Hobbies</a>
<a href="contact.html">Contact Me</a>
<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>
<a href="hobbies.html">My Hobbies</a>
<a href="contact.html">Contact Me</a>