I have been attempting to apply a double border to my table using the "border" property for one, and :before and :after for the second. However, I am facing an issue as it is not working properly.
I am relatively new to CSS and HTML and have tried my best to find a solution on my own but have been unsuccessful so far. Any assistance would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<style>
#banner table:before {
content: '';
display: block;
border-top: solid 1px;
border-color: #888;
border-color: rgba(255, 255, 255, 0.25);
margin: 10px 0 1.25em 0;
}
#banner table:after {
content: '';
display: block;
border-bottom: solid 1px;
border-color: #888;
border-color: rgba(255, 255, 255, 0.25);
margin: 1.25em 0 10px 0;
}
</style>
</head>
<body>
<div id="banner">
<div id=myTable> <table>
<tbody>
<tr>
<td class="hjsb"><label for="what">What are you looking for</label></td>
<td class="hjsb" colspan="2"><label for="where">Location</label></td>
</tr>
<tr>
<td class=""><span class="inwrap"><input class="input_text" maxlength="512" size="31" name="q" autocomplete="off" id="what"></span><div style="width:250px"><!-- --></div></td>
<td class=""><span class="inwrap"><input class="input_text" maxlength="64" size="27" name="l" autocomplete="off" id="where" value="Location"></td>
<td class="" style="width:1px"><input type="submit" class="input_submit" value="Search Jobs"></td> </tr> <tr>
<td class="" colspan="3"><label for="what">Advanced Job Search</label></td>
</tr> </tbody>
</table>
</div>
</div>
</body>
</html>