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.
Related
I have the following HTML table and I need a different styling in the last column:
https://jsfiddle.net/dqa9y1g3/
table {
border-collapse: collapse;
border-right: 0px;
border: 1px solid;
}
td {
border: 1px solid;
}
thead {
border: 2px;
}
th.th {
border: solid;
}
th.th3 {
border-top: 1px dashed;
font-weight: normal;
}
<table>
<thead>
<tr>
<th class="th">h1</th>
<th class="th">h2</th>
<th class="th3">h3</th>
</tr>
</thead>
<tr>
<td>r1c1</td>
<td>r1c2</td>
<td>r1c3</td>
</tr>
<tr>
<td>r2c1</td>
<td>r2c2</td>
<td>r2c3</td>
</tr>
</table>
What is the right way to do it?
This is what I want to get:
If you specifically need to target the last column, you can use this.
You also need to remove the table border, because it will be drawn over the individual th or td border.
table {
border-collapse: collapse;
}
td {
border: 1px solid;
}
thead {
border: 2px;
}
th.th {
border: solid;
}
tr th:last-child,
tr td:last-child {
border: 1px dashed #000;
border-right: 0;
}
<table>
<thead>
<tr>
<th class="th">h1</th>
<th class="th">h2</th>
<th class="th">h3</th>
</tr>
</thead>
<tr>
<td>r1c1</td>
<td>r1c2</td>
<td>r1c3</td>
</tr>
<tr>
<td>r2c1</td>
<td>r2c2</td>
<td>r2c3</td>
</tr>
</table>
You can use the :last-child pseudo class selector. This works because those tds of the last table column are the last child elements of their trs.
I also had to remove the border of the table.
https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child
table {
border-collapse: collapse;
border-right: 0px;
/* border: 1px solid; */
}
td {
border: 1px solid;
}
thead {
border: 2px;
}
th.th {
border: solid;
}
th.th3 {
font-weight: normal;
}
td:last-child, th:last-child {
border: 1px dashed;
border-right: none;
}
<table>
<thead>
<tr>
<th class="th">h1</th>
<th class="th">h2</th>
<th class="th3">h3</th>
</tr>
</thead>
<tr>
<td>r1c1</td>
<td>r1c2</td>
<td>r1c3</td>
</tr>
<tr>
<td>r2c1</td>
<td>r2c2</td>
<td>r2c3</td>
</tr>
</table>
One alternative approach to using a <table> is to deploy CSS Grid.
Working Example:
.my-table {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
width: 300px;
height: 180px;
font-size: 24px;
gap: 1px;
}
.my-table-cell {
text-align: center;
line-height: 60px;
outline: 1px solid rgb(0, 0, 0);
}
/* FIRST TWO CELLS */
.my-table-cell:nth-of-type(-n + 2) {
font-weight: 900;
border: 1px solid rgb(0, 0, 0);
}
/* THIRD CELL */
.my-table-cell:nth-of-type(3) {
border-top: 1px dashed rgb(0, 0, 0);
}
/* CELLS ON THE RIGHT */
.my-table-cell:nth-of-type(3n) {
border-bottom: 1px dashed rgb(0, 0, 0);
outline: none;
}
<div class="my-table">
<div class="my-table-cell">h1</div>
<div class="my-table-cell">h2</div>
<div class="my-table-cell">h3</div>
<div class="my-table-cell">r1c1</div>
<div class="my-table-cell">r1c2</div>
<div class="my-table-cell">r1c3</div>
<div class="my-table-cell">r2c1</div>
<div class="my-table-cell">r2c2</div>
<div class="my-table-cell">r2c3</div>
</div>
Further Reading:
https://cssgridgarden.com/
https://css-tricks.com/snippets/css/complete-guide-grid/
I'm stuck with a simple table design as i'm from backend I need a table like this
What I have right now
table {
border-collapse: collapse;
width: 100%;
}
tr {
border: none;
}
.first{
width: 40%;
font-family: Quasimoda;
font-size: 0.75em;
color: #1D1D1E;
}
.middle{
width: 60%;
font-family: Quasimoda;
font-size: 0.75em;
color: #1D1D1E;
}
.last{
width: 40%;
font-family: Quasimoda;
font-size: 0.75em;
color: #1D1D1E;
}
td {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
padding: 10px;
}
<table>
<tr>
<td class="University">January</td>
<td class="middle ">the progress bar will be placed here </td>
<td class="last">870</td>
</tr>
<tr>
<td class="first">January</td>
<td class="middle ">the progress bar will be placed here </td>
<td class="last">560</td>
</tr>
</table>
Please help. I have tried with multiple html table attributes all gone in vain.
Set the thead tr element bottom border, and the right border of the .first element:
table {
border-collapse: collapse;
width: 100%;
}
th {
text-align: left;
border-bottom: 1px solid #ddd;
}
td {
padding: 10px;
font-family: Quasimoda;
font-size: 0.75em;
color: #1D1D1E;
}
.first {
border-right: 1px solid #ddd;
}
.middle {
width: 100%;
}
<table>
<thead>
<tr>
<th colspan="3">Unique values:</th>
</tr>
</thead>
<tbody>
<tr>
<td class="first">January</td>
<td class="middle ">the progress bar will be placed here </td>
<td class="last">870</td>
</tr>
<tr>
<td class="first">January</td>
<td class="middle ">the progress bar will be placed here </td>
<td class="last">560</td>
</tr>
</tbody>
</table>
Actually, your picture is not that clear.
I was not clear where you want border actually.
But I try to do this, Run the code snippet and have a look, and let me know if this works for you or not.
.colspan2border
{
border-collapse: collapse;
border-bottom: 1px solid red;
}
.rightBorder
{
border-collapse: collapse;
border-right: 1px solid red;
}
.pr-left1
{
padding-left: 1rem;
}
table
{
border-collapse: collapse;
}
tr
{
border: none;
}
<table>
<tr colspan="2" class='colspan2border'><td>Unique values:</td></tr>
<tr>
<td class="rightBorder pr-left1">University</td>
<td>870</td>
</tr>
<tr>
<td class="rightBorder pr-left1">Custom</td>
<td>560</td>
</tr>
</table>
How can I add a little square at the bottom right of a table cell?
It just like a selected cell in excel.
I have tried to add a div in the cell, however, it makes the content does not be placed in the centre of the cell. So, I don't know how to do so.
HTML:
.borderCell
{
border:1px inset #e0e0e0;
}
.borderCell:after
{
border:2px inset transparent;
}
.dateCell
{
padding: 0px;
font-size:17px;
width:25px;
}
<table>
<tr>
<td class="borderCell alignCenter" contenteditable="true">
b
<div style="width:5px;height:5px;background-color:blue;float:right"></div>
</td>
</tr>
</table>
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 10px;
}
td.parentsqure {
position: relative;
}
.squre {
height: 5px;
width: 5px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
<table>
<tr>
<td>test 1</td>
<td class="parentsqure">
test 2
<div class="squre"></div>
</td>
<td>test 3</td>
</tr>
</table>
No need to consider an extra element, use a simple background:
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 10px;
}
td.parentsqure {
background: linear-gradient(red,red) bottom right/5px 5px no-repeat;
}
<table>
<tr>
<td>test 1</td>
<td class="parentsqure">
test 2
</td>
<td>test 3</td>
</tr>
</table>
My goal is to add a bottom white line border under the heading in css as such shown in this picture table image. However the border is not appearing. I was watching and coding along a youtube tutorial on html and css. My results were fine until I reached the part where he added the bottom white line border tutorial video at 1hr34min45sec. When I placed the bottom border, it didn't appear.
Any help would be appreciated
.tile {
width: 170px;
border-radius: 2%;
height: 140px;
padding: 20px;
margin: 5px;
float:left;
}
.tile-double {
width: 390px;
height: 140px;
margin: 5px;
padding: 20;
float: left;
}
.orange {
background-color: #e61860;
}
#user-table {
border-collapse: collapse;
margin: 10px auto;
font-weight: normal;
width: 100%;
}
#user-table th{
border-collapse: collapse;
border-bottom: 1xp solid #F6F6F6;
padding 2px;
text-align: center;s
}
#user-table td{
padding: 2px;
text-align: center;
}
<div class="tile orange tile-double">
<table id="user-table">
<thead>
<tr>
<th>User</th>
<th>Product</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>FruitDealer</td>
<td>Razor Banshee</td>
<td>100%</td>
</tr>
<tr>
<td>DongRaeGu</td>
<td>Razor Banshee</td>
<td>100%</td>
</tr>
<tr>
<td>July</td>
<td>Razor Banshee</td>
<td>100%</td>
</tr>
</tbody>
</table>
</div>
In my case, the user-agent style was overriding my css class with border-collapse property. So I had to override it using
table {
border-collapse: collapse;
}
Try to run your code through those validators, specifically:
border-bottom: 1xp solid #F6F6F6; /* shows xp instead of px (pixels) */
https://validator.w3.org/ -- for HTML
https://jigsaw.w3.org/css-validator/ -- for CSS
Try targeting the tr of the thead so the border fills the full width of your table.
thead tr { border-bottom: 1px solid #FFF; }
Okay I checked out your css there are minor errors in it check out
#user-table th{
border-collapse: collapse;
border-bottom: 1xp solid #F6F6F6; --- should be 1px not 1xp this one here was your main problem this is why the border didn't show up
padding 2px; ----- incorrect should be paddin: 2px;
text-align: center;s --- the s shouldn't be there
}
.tile {
width: 170px;
border-radius: 2%;
height: 140px;
padding: 20px;
margin: 5px;
float:left;
}
.tile-double {
width: 390px;
height: 140px;
margin: 5px;
padding: 20;
float: left;
}
.orange {
background-color: #e61860;
}
#user-table {
border-collapse: collapse;
margin: 10px auto;
font-weight: normal;
width: 100%;
}
#user-table th{
border-collapse: collapse;
border-bottom: 1xp solid #F6F6F6;
padding 2px;
text-align: center;s
}
#user-table td{
padding: 2px;
text-align: center;
}
<div class="tile orange tile-double">
<table id="user-table">
<thead>
<tr>
<th>User</th>
<th>Product</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>FruitDealer</td>
<td>Razor Banshee</td>
<td>100%</td>
</tr>
<tr>
<td>DongRaeGu</td>
<td>Razor Banshee</td>
<td>100%</td>
</tr>
<tr>
<td>July</td>
<td>Razor Banshee</td>
<td>100%</td>
</tr>
</tbody>
</table>
</div>
.tile {
width: 170px;
border-radius: 2%;
height: 140px;
padding: 20px;
margin: 5px;
float:left;
}
.tile-double {
width: 390px;
height: 140px;
margin: 5px;
padding: 20;
float: left;
}
.orange {
background-color: #e61860;
}
#user-table {
border-collapse: collapse;
margin: 10px auto;
font-weight: normal;
width: 100%;
}
#user-table th{
border-collapse: collapse;
border-bottom: 1xp solid #F6F6F6;
padding 2px;
text-align: center;s
}
#user-table td{
padding: 2px;
text-align: center;
}
<div class="tile orange tile-double">
<table id="user-table">
<thead>
<tr>
<th>User</th>
<th>Product</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>FruitDealer</td>
<td>Razor Banshee</td>
<td>100%</td>
</tr>
<tr>
<td>DongRaeGu</td>
<td>Razor Banshee</td>
<td>100%</td>
</tr>
<tr>
<td>July</td>
<td>Razor Banshee</td>
<td>100%</td>
</tr>
</tbody>
</table>
</div>
I am rewriting existing servlet to make it look better. The tables are very complex and I thought it would look nicer if there is no border between two cells. I failed to define such CSS rule. Then I tried to change cell border color. I have failed again. There are probably some CSS rule priority issues that I cannot handle.
This is what I get on current Chrome and what I want to achieve:
Minimum reproducible code is there: http://jsbin.com/rokabaliti
<html>
<head><style>
table { border-collapse: collapse;}
table, th, td { border: 1px solid black;}
th, td {
padding: 5px;
text-align: left; vertical-align: top;
}
tr.all { background-color: palegreen; }
tr.other { background-color: beige; }
td.chain { border: 1px solid red; }
td.target { border-left: none; }
</style></head>
<body>
<table class='rule'>
<tr class="all"><td>XX</td></tr>
<tr class="other">
<td>YY</td>
<td class='target'>ZZ</td></tr>
<tr class="other">
<td>AA</td>
<td class='chain'>BB</td>
</tr>
</table>
</body>
</html>
Setting border on td makes border all around on td and border-collapse: collapse; just overlap two borders it doesn't remove border, so you need to remove border of both columns.
.other td:first-child{
border-right:0;
}
.other td:last-child{
border-left:0;
}
Layout 1
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 5px;
text-align: left;
vertical-align: top;
}
tr.all {
background-color: palegreen;
}
tr.other {
background-color: beige;
}
.other td:first-child{
border-right:0;
}
.other td:last-child{
border:1px solid red;
}
<table class='rule'>
<tr class="all">
<td>XX</td>
</tr>
<tr class="other">
<td>YY</td>
<td class='target'>ZZ</td>
</tr>
<tr class="other">
<td>AA</td>
<td class='chain'>BB</td>
</tr>
</table>
Layout 2
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 5px;
text-align: left;
vertical-align: top;
}
tr.all {
background-color: palegreen;
}
tr.other {
background-color: beige;
}
.other td:first-child{
border-right:0;
}
.other td:last-child{
border-left:0;
}
<table class='rule'>
<tr class="all">
<td>XX</td>
</tr>
<tr class="other">
<td>YY</td>
<td class='target'>ZZ</td>
</tr>
<tr class="other">
<td>AA</td>
<td class='chain'>BB</td>
</tr>
</table>
The border-collapse CSS property determines whether a table's borders
are separated or collapsed. In the separated model, adjacent cells
each have their own distinct borders. In the collapsed model, adjacent
table cells share borders.
MDN
Yo can try,
table { border-collapse: collapse;}
table, th, td { border-left: 1px solid black; border-bottom: 1px solid black;}
th, td {
padding: 5px;
text-align: left; vertical-align: top;
}
tr.all { background-color: palegreen; }
tr.all td { border: 1px solid black; }
tr.other { background-color: beige; }
td.chain { border: 1px solid red; }
td.target { border: 1px solid red; }
Variant #1: https://jsfiddle.net/a7p2dp3o/
<style>
table { border-collapse: collapse;}
table, th, td { border: 1px solid black;}
th, td {
padding: 5px;
text-align: left; vertical-align: top;
}
tr.all { background-color: palegreen; }
tr.other { background-color: beige; }
td.chain { border-left: 0px; }
td.target { border-left: 0px; }
</style>
<table class="rule">
<tbody><tr class="all"><td>XX</td></tr>
<tr class="other">
<td style="border-right: 0px;">YY</td>
<td class="target">ZZ</td></tr>
<tr class="other">
<td style="border-right: 0px;">AA</td>
<td class="chain">BB</td>
</tr>
</tbody>
</table>
Variant #2: https://jsfiddle.net/3u2cno6f/1/
<style>
table { border-collapse: collapse;}
table, th, td { border: 1px solid black;}
th, td {
padding: 5px;
text-align: left; vertical-align: top;
}
tr.all { background-color: palegreen; }
tr.other { background-color: beige; }
td.chain { border-color: red; }
td.target { border-color: red; }
</style>
<table class="rule">
<tbody><tr class="all"><td>XX</td></tr>
<tr class="other">
<td style="border-right: 0px;">YY</td>
<td class="target">ZZ</td></tr>
<tr class="other">
<td style="border-right: 0px;">AA</td>
<td class="chain">BB</td>
</tr>
</tbody>
</table>
Expected result 1
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 5px;
text-align: left;
vertical-align: top;
}
tr.all {
background-color: palegreen;
}
tr.other {
background-color: beige;
}
td.chain {
border: 1px solid red;
}
td.target {
}
.other>td:first-child{
border-right: 1px solid red;
}
.other>td:last-child{
border: 1px solid red;
}
<table class='rule'>
<tr class="all">
<td>XX</td>
</tr>
<tr class="other">
<td>YY</td>
<td class='target'>ZZ</td>
</tr>
<tr class="other">
<td>AA</td>
<td class='chain'>BB</td>
</tr>
</table>
Expected result 2
<table class='rule'>
<tr class="all">
<td>XX</td>
</tr>
<tr class="other">
<td>YY</td>
<td class='target'>ZZ</td>
</tr>
<tr class="other">
<td>AA</td>
<td class='chain'>BB</td>
</tr>
</table>
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 5px;
text-align: left;
vertical-align: top;
}
tr.all {
background-color: palegreen;
}
tr.other {
background-color: beige;
}
.other>td:not(.target) {
border: none;
}
.target{
border-left:none;
border-bottom:none;
}