I have a html table, my top-left cell is empty and I want to remove its border.
I tried with some css:
.border-less {
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
}
That I applied to my top left cell:
<td class="border-less"></td>
but it doesn't work.
Any idea how to achieve this?
Remove border from table and tr and apply border only for td.
table {
border-collapse: collapse;
}
td {
border: 1px solid grey;
}
td.border-less {
border: none;
}
<table>
<tr>
<td class="border-less"></td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
</table>
Try like this: Demo
table tr.border-less>td {
border-top: 0px solid #FFFFFF;
border-left: 0px solid #FFFFFF;
}
check out this
CSS
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.border-less {
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
}
http://jsfiddle.net/vasanthanvas/jfvhxy59/
Related
I'm trying to draw an almost S-shaped line between the the left and right columns below.
The line will be vertical in rows 2 and 3. The top of line will curve right, around the top-left of the number 2. The bottom of the line will curve left, around the bottom right of number 7.
<code>
<table class="col">
<tr><td>1</td><td class="tl">2</td></tr>
<tr><td>3</td><td class="l">4</td></tr>
<tr><td>5</td><td class="l">6</td></tr>
<tr><td class="br">7</td><td>8</td></tr>
</table>
</code>
I've tried using both box-shadows and borders but cannot create a solid line with no gaps.
How can I create a solid line with this shape?
Note, I can only use HTML and CSS as it's for an epub file.
CSS code using box-shadow. The shadows do not join up.
.tl {
border-top-left-radius: 10px;
box-shadow: -1px 0 0 1px black;
}
.l {
box-shadow: 0 0 0 1px black;
clip-path: inset(1px 0 0 -1px);
}
td.br {
border-bottom-right-radius: 10px;
box-shadow: 1px 1px 0 1px black;
}
table.col {
border-collapse: separate;
border-spacing: 1px;
border: 0;
}
CSS code using borders. The line is continuous most of the way. However there there is a slight horizontal jump of the line, between 3rd and 4th rows.
td.br {
border-bottom-right-radius: 10px;
border-bottom: solid 1px black;
border-right: solid 1px black;
}
td.tl {
border-top-left-radius: 10px;
border-top: solid 1px black;
border-left: solid 1px black;
}
.l {
border-left: solid 1px black
}
table.col {
border-collapse: separate;
border-spacing: 0;
border: 0;
}
HTML code
<table class="col">
<tr>
<td>1</td>
<td class="tl">2</td>
</tr>
<tr>
<td>3</td>
<td class="l">4</td>
</tr>
<tr>
<td>5</td>
<td class="l">6</td>
</tr>
<tr>
<td class="br">7</td>
<td>8</td>
</tr>
</table>
I'm trying to recreate the following diagram with HTML tables:
The following snippet works in Firefox:
table { border-collapse: collapse }
td { padding: 10px; border: 1px solid black; }
<table>
<tr>
<td>Foo</td>
<td rowspan="2" style="border-left: none">Bar</td>
</tr>
<tr>
<td style="border-right: none">Baz</td>
</tr>
</table>
but in Safari and Chrome it produces
What is the simplest (i.e. least amount of code) way to make it work in Safari and Chrome? I'd prefer not to change the structure of the table itself (but I'll get rid of the style attributes in the HTML in the final version).
If it matters, I'm using the latest version of each browser on macOS 10.15.7.
Looks like a bug. This does not make sense
FX: Crome
table {
border-collapse: collapse
}
td {
padding: 10px;
}
td.noleft {
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid white !important;
}
td.noright {
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid white;
}
td.other {
border-right: 1px solid red;
border-top: 1px solid red;
border-left: 1px solid red;
}
<table>
<tr>
<td class="other">Foo</td>
<td rowspan="2" class="noleft">Bar</td>
</tr>
<tr>
<td class="noright">Baz</td>
</tr>
</table>
let's consider box-shadow for this particular case:
table {
border-collapse: collapse
}
td {
padding: 10px;
}
<table>
<tr>
<td style="box-shadow: 0 0 0 1px black inset;">Foo</td>
<td rowspan="2" style="box-shadow: -1px 1px 0 black inset, 0 -1px 0 black inset;">Bar</td>
</tr>
<tr>
<td style="box-shadow: 1px -1px 0 black inset;">Baz</td>
</tr>
</table>
Also like this:
table {
border-collapse: collapse;
box-shadow: 0 0 0 1px #000;
}
td {
padding: 10px;
}
<table>
<tr>
<td style="box-shadow: -1px -1px 0 black inset;">Foo</td>
<td rowspan="2" >Bar</td>
</tr>
<tr>
<td >Baz</td>
</tr>
</table>
I have this code where I am trying to color all 4 sides of a TD cell with red, but if you run the code, only the bottom and the right border are getting color (in Mozilla Firefox). Is there a way to color all 4 borders?
#selections_table table {
border-collapse: collapse;
}
#selections_table td,
th {
border: 1px solid black;
padding: 3px 4px 3px 4px;
}
<div id="selections_table">
<table>
<tbody>
<tr>
<th>#</th>
<th>Model</th>
</tr>
<tr>
<td>1</td>
<td style="border-color:red">XXX-8</td>
</tr>
</tbody>
</table>
</div>
This question/answer does not help: CSS Border declare 4 sides, color, width, in one line
If there is a way to style it via a class, that will be better than using a an inline style command.
Change your inline style to style="border:1px double red;":
<div id="selections_table">
<table>
<tbody>
<tr>
<th>#</th>
<th>Model</th>
</tr>
<tr>
<td>1</td>
<td style="border:1px double red;">XXX-8</td>
</tr>
</tbody>
</table>
</div>
A little trick, create an ::after to the td you want to add the border.
#selections_table table {
border-collapse: collapse;
}
#selections_table td,
th {
border: 1px solid black;
padding: 3px 4px 3px 4px;
position:relative;
}
#selections_table td.border-red::after{
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
border: 1px solid red;
}
<div id="selections_table">
<table>
<tbody>
<tr>
<th>#</th>
<th>Model</th>
</tr>
<tr>
<td>1</td>
<td class="border-red">XXX-8</td>
</tr>
</tbody>
</table>
</div>
https://jsfiddle.net/ym82a0k7/
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid red;
}
</style>
</head>
<body>
<div id="selections_table">
<table>
<tbody>
<tr>
<th>#</th>
<th>Model</th>
</tr>
<tr>
<td>1</td>
<td>XXX-8</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
First, you don't need to declare td here:
#selections_table td,th {
border: 1px solid black;
padding: 3px 4px 3px 4px;
}
So,
#selections_table th {
border: 1px solid black;
border-bottom: 1px solid red;
padding: 3px 4px 3px 4px;
}
td {
border: 1px solid red;
}
This is another option (by increasing the pixel, it is not a good practice but another option)
#selections_table th {
border: 1px solid black;
padding: 3px 4px 3px 4px;
}
td {
border: 2px solid red;
}
or just like this:
#selections_table th {
border: 1px solid black;
padding: 3px 4px 3px 4px;
}
td {
border: 1px double red;
}
I have a table in which I have to separate a row using border as in image below.
As you can see, Border separator is having a space left-right side and not fully touched to table border.
I tried giving padding,margin but nothing worked.
tr {
border-bottom: 1px solid blue;
padding: 10px; // not working
margin: 10px; // not working
}
https://jsfiddle.net/alpeshprajapati/s934Lpbx/
What is the way to achieve this?
CSS
table {
border: 1px solid black;
border-collapse: collapse;
}
thead {
background: black;
color: white;
}
th {
width: 100px;
}
tr {
float: left;
border-bottom: 1px solid blue;
width: 90%;
margin: 0 10px;
}
td{
width: 32%;
float: left;
}
Try this:
table {
border: 1px solid black;
border-collapse: collapse;
}
thead {
background: black;
color: white;
}
th {
width: 100px;
}
tr {
// border-bottom: 1px solid blue;
}
td{
padding:5px 10px;
}
.border{
background:skyblue;
width:100%;
height:2px;
}
<table>
<thead>
<th>Th1</th>
<th>Th2</th>
<th>Th3</th>
</thead>
<tbody>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
</tr>
<tr>
<td colspan="3">
<div class="border"></div>
</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
</tr>
<tr>
<td colspan="3">
<div class="border"></div>
</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
</tr>
</tbody>
</table>
To increase the length of the border you have to increase the width of the div that is containing it.
So I've been trying to figure out how to code exactly the same table as it is shown in this picture:
But with no results. I've no idea how to divide it with different colours so the green overlaps others and keeps the words in each grid.
I'd be very thankful if someone helped me to gave me some ideas please.
Here is a WORKING JSFIDDLE for you.
table{
border-collapse: collapse;
font-size: 24px;
}
table tr td{
border-top: 5px solid #9F2C2F;
border-right: 5px solid #057C08;
}
table tr th:first-child{
border-top: 5px solid yellow;
border-right: 5px solid #057C08;
}
table tr td:last-child{
border-right: none;
}
Another working css could be:
http://jsfiddle.net/wpwu5mfs/1
td, tr, table{
border-collapse: collapse;
}
td{
border-top: solid 4px red;
}
td:first-child{
border-top: solid 4px yellow;
}
td:not(:first-child){
border-left: solid 4px green;
}
<style type="text/css">
table
{
border-collapse: collapse;
}
table tr td:last-child
{
border-right: 0px;
}
.first
{
border-top:3px solid yellow;
}
.second {
border-top:3px solid red;
border-left:3px solid green;
border-right:3px solid green;
}
</style>
<table>
<tr>
<td class='first'>Virsraksts 1</td>
<td class='second'>suna 1</td>
<td class='second'>suna 2</td>
</tr>
<tr>
<td class='first'>Virsraksts 2</td>
<td class='second'>suna 3</td>
<td class='second'>suna 4</td>
</tr>
<tr>
<td class='first'>Virsraksts 3</td>
<td class='second'>suna 5</td>
<td class='second'>suna 6</td>
</tr>
</table>