Is it possible to have the side borders of HTML tables like this:
A vertical line that is not connected to the top and bottom of the table.
You can try this :
body{
background:grey;
}
table, th, td {
border-top: 1px solid #fff;
border-bottom : 1px solid #fff;
border-collapse: collapse;
text-align:center;
padding:10px;
}
table
{
position: absolute ;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border:2px solid #fff;
}
td
{
position:relative ;
}
td::after
{
content:'';
position:absolute ;
height:70%;
width:100%;
left:0;
top:7px;
border-left:3px solid #fff;
}
td:nth-child(1)::after
{
display:none;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table style="width:20%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
.table {
background-color: #272727;
width: 100%;
text-align: left;
border-collapse: collapse;
}
.table__body-row {
height: 41px;
border-bottom: 1px solid #000000;
}
.table__body-row.filled {
background: #191919;
}
.table__body-cell {
font-size: 14px;
color: #FFFFFF;
border: none;
}
.table__header {
background: #000000;
}
.table__header-row {
height: 40px;
}
.table__header-cell {
font-size: 12px;
font-weight: 400;
color: #FFFFFF;
text-align: left;
padding: 0 16px 0 16px;
}
.table__cell-body {
border-right: 1px solid #000000;
padding: 0 10px 0 10px;
min-height: 17px;
}
.table__body-cell:last-of-type .table__cell-body {
border-right: none;
}
<table class="table">
<thead class="table__header">
<tr class="table__header-row">
<th class="table__header-cell">
Header 1
</th>
<th class="table__header-cell">
Header 2
</th>
</tr>
</thead>
<tbody id="tableBody">
<tr class="table__body-row">
<td class="table__body-cell">
<div class="table__cell-body"></div>
</td>
<td class="table__body-cell">
<div class="table__cell-body"></div>
</td>
</tr>
</tbody>
</table>
This can be done using a nested div with a border. Please see snippet.
Related
I'm trying to learn some HTML & CSS skills and I facing an issue that I couldn't find any proper solution online.
I'm trying to add some border-spacing to both sides to my designed table. please see the attached images for better understanding
Current table:
https://imgur.com/6eKSfVC
Desired table:
https://imgur.com/Vvafhlg
My code:
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Deshe Email Monthly Update</title>
<style>
table {
text-align: center;
font-size: 10pt;
height: 22px;
border-radius: 10px;
box-shadow: 0 3px 6px 0 rgba(44, 40, 40, 0.11);
bgcolor="#ffffff";
font-family: calibri;
color: #707070;
width: 50%;
border-collapse: collapse;
}
th, td{
padding-top: 10px;
padding-bottom: 10px;
}
tr {
padding-top: 10px;
padding-bottom: 10px;
border: solid #1AAE9F;
border-width: 1px 0;
}
tr:first-child {
border-top: none;
}
tr:last-child {
border-bottom: none;
}
</style>
</head>
<body>
<table>
<tr>
<th>Symbol</th>
<th>Position</th>
<th>Return</th>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
</table>
<br><br><br>
</body>
Would you guys help me a proper solution?
Thanks!
Hope this solves your problem
Add your table in a div then apply padding and box-shadow to the box (div).
table {
text-align: center;
font-size: 10pt;
height: 22px;
width:100%;
font-family: calibri;
color: #707070;
border-collapse: collapse;
}
th, td{
padding-top: 10px;
padding-bottom: 10px;
}
tr {
padding-top: 10px;
padding-bottom: 10px;
border: solid #1AAE9F;
border-width: 1px 0;
}
tr:first-child {
border-top: none;
}
tr:last-child {
border-bottom: none;
}
.table-box {
padding:20px;
border-radius: 10px;
box-shadow: 0 3px 6px 0 rgba(44, 40, 40, 0.11);
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Deshe Email Monthly Update</title>
</head>
<body>
<div class="table-box">
<table>
<tr>
<th>Symbol</th>
<th>Position</th>
<th>Return</th>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
</table>
</div>
</body>
</html>
Here is your solution, try with this way it will helps you.
.main-card {
padding: 10px 30px;
box-shadow: 0 3px 6px 0 rgba(44, 40, 40, 0.11);
width: 50%;
border-radius: 10px;
}
table {
width: 100%;
text-align: center;
font-size: 10pt;
height: 22px;
background-color: #ffffff;
font-family: calibri;
color: #707070;
border-collapse: collapse;
}
th,
td {
padding-top: 10px;
padding-bottom: 10px;
}
tr {
padding-top: 10px;
padding-bottom: 10px;
border: solid #1AAE9F;
border-width: 1px 0;
}
tr:first-child {
border-top: none;
}
tr:last-child {
border-bottom: none;
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Deshe Email Monthly Update</title>
</head>
<body>
<div class="main-card">
<table>
<tr>
<th>Symbol</th>
<th>Position</th>
<th>Return</th>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
</table>
</div>
</body>
.table-wrapper {
display: flex;
width: 50vw;
max-width: 300px;
}
.table-theme {
padding: 0.5em 2em;
border-radius: 10px;
box-shadow: 0 3px 6px 0 rgba(44, 40, 40, 0.11);
font-size: 12px;
}
.table-theme caption {
font-size: 1.5em;
font-weight: bold;
margin: 0.5em;
}
.table-theme > table {
text-align: center;
font-size: 10pt;
height: 22px;
background-color: "#ffffff";
font-family: Calibri;
color: #707070;
border-collapse: collapse;
width: 100%;
}
.table-theme tbody tr {
padding: 0 75em;
border: solid #1AAE9F;
border-width: 1px 0;
}
.table-theme tbody tr:last-child {
border-bottom: none;
}
.table-theme thead th {
padding: 0.25em 0;
}
.table-theme tbody td {
padding: 0.75em 0;
}
/* example */
.table-theme td[data-th="Symbol"] {
font-size: 1.1em;
}
.table-theme th[title="Return"],
.table-theme td[data-th="Return"] {
color: green;
font-weight: bold;
}
<div class="table-theme table-wrapper">
<table>
<caption>Februari biggest gainers</caption>
<thead>
<tr>
<th title="Symbol">Symbol</th>
<th title="Position">Position</th>
<th title="Return">Return</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Symbol">AAPL</td>
<td data-th="Postion">Short</td>
<td data-th="Return">40.1%</td>
</tr>
<tr>
<td data-th="Symbol">AAPL</td>
<td data-th="Postion">Short</td>
<td data-th="Return">40.1%</td>
</tr>
<tr>
<td data-th="Symbol">AAPL</td>
<td data-th="Postion">Short</td>
<td data-th="Return">40.1%</td>
</tr>
<tr>
<td data-th="Symbol">AAPL</td>
<td data-th="Postion">Short</td>
<td data-th="Return">40.1%</td>
</tr>
</tbody>
</table>
</div>
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>
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.
Hello for some reason I have a button that is breaking the bottom border that I have already set in place for my table. I eventually want to do this for all of my rows, but I would like to know how to prevent that from happening. Each row in my table should have a button, but I'd like to keep my borders intact.
table{
color: #26004d;
width: 70%;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
font-size: 30px;
}
th, td{
padding: 30px 50px 30px 50px;
border-bottom: 1px solid #862d59;
}
th{
color: black;
}
tr:hover{
background-color: lightgreen;
}
.button{
background-color: #26004d;
color: white;
font-size: 20px;
border:none;
padding: 10px 18px;
text-align: center;
text-decoration: none;
display: table-cell;
}
<div id="inner">
<table>
<thead>
<tr>
<th>Pet</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cat</td>
<td>$10</td>
<td><button class="button">Buy Now</button></td>
</tr>
<tr>
<td>Lion</td>
<td>$40</td>
</tr>
<tr>
<td>Flamingo</td>
<td>$50</td>
</tr>
<tr>
<td>Panda</td>
<td>$1000</td>
</tr>
</tbody>
</table>
</div>
So, you must put button into td, because it's in table, but you're applying the border-bottom property to td so you have border under button, if you want to remove it you can add a class no-border and apply it to td in which you have your button so look at code, and you'll have only two columns have border, or another solution is to add <td></td> or <th></th> where appropriate into every <tr>that has no button.
table{
color: #26004d;
width: 70%;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
font-size: 30px;
}
th, td{
padding: 30px 50px 30px 50px;
border-bottom: 1px solid #862d59;
}
.no-border{
border:none;
}
th{
color: black;
}
tr:hover{
background-color: lightgreen;
}
.button{
background-color: #26004d;
color: white;
font-size: 20px;
border:none;
padding: 10px 18px;
text-align: center;
text-decoration: none;
display: table-cell;
}
<div id="inner">
<table>
<thead>
<tr>
<th>Pet</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cat</td>
<td>$10</td>
<td class="no-border"><button class="button">Buy Now</button></td>
</tr>
<tr>
<td>Lion</td>
<td>$40</td>
</tr>
<tr>
<td>Flamingo</td>
<td>$50</td>
</tr>
<tr>
<td>Panda</td>
<td>$1000</td>
</tr>
</tbody>
</table>
</div>
Problem: Uneven number of column inside each row.
Solution: Either enter blank <td></td> or use colspan.
table{
color: #26004d;
width: 70%;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
font-size: 30px;
}
th, td{
padding: 30px 50px 30px 50px;
border-bottom: 1px solid #862d59;
}
th{
color: black;
}
tr:hover{
background-color: lightgreen;
}
.button{
background-color: #26004d;
color: white;
font-size: 20px;
border:none;
padding: 10px 18px;
text-align: center;
text-decoration: none;
display: table-cell;
}
<div id="inner">
<table>
<thead>
<tr>
<th>Pet</th>
<th>Price</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Cat</td>
<td>$10</td>
<td><button class="button">Buy Now</button></td>
</tr>
<tr>
<td>Lion</td>
<td colspan="2">$40</td>
</tr>
<tr>
<td>Flamingo</td>
<td>$50</td>
</tr>
<tr>
<td>Panda</td>
<td>$1000</td>
</tr>
</tbody>
</table>
</div>
I'm new to CSS and SCSS. My issue seems very simple to fix but I'm not sure where to start.
I have three pages and they each have a table that look similar to this:
On the other pages I want the boxes (on the left) to go away, but I want to use the same CSS style sheet. Here is what the one of the other page's table look like:
I want the space on the right to go away and the word second to align all the way to the left.
Here is my scss:
section {
#include grid-row();
}
section p {
#include grid-column(12);
font-family: $font-stack;
font-size: 23px;
padding: 0;
margin: 0;
}
.button {
font-family: $font-stack;
color: #fff;
background-color: $secondary-color;
height: 27px;
text-align: center;
border-radius: 7px;
margin: 6px 0 5px 0;
padding: 5px 7px 5px 7px;
}
.button:hover {
background-color: $primary-color;
}
table {
#include grid-column(12);
padding: 0;
border-left: none;
border-right: none;
text-align:right;
border-collapse:separate;
border-spacing: 0 2px;
}
table {
tr {
background: #fff;
}
tr:hover {
background: #EBF7FC;
}
tr td {
padding:6px 8px;
}
tr td:first-child {
border-left: 3px solid #fff;
}
tr td:last-child {
border-right:3px solid #fff;
}
tr:hover td:first-child {
border-left: 3px solid $secondary-color;
}
tr:hover td:last-child {
border-right:3px solid $secondary-color;
}
}
.status {
color:#fff;
width: 33px;
padding: 5px 0;
text-align: center;
}
.statusRunning {
background-color: #5AD427;
#extend .status;
}
.statusQueued {
background-color: #A4E786;
#extend .status;
}
.statusIncomplete {
background-color: #FFCC00;
#extend .status;
}
.statusBlank {
width: 1px;
}
table tr td:nth-child(2) {
text-align:left;
}
.tightcell a {
margin-right:25px;
color: $secondary-color;
}
Here is my HTML for the page that is not working:
<section>
<p>Test Number 6 </p>
<table>
<tbody>
<tr>
<td class="statusBlank"></td>
<td>second</td>
<td>0000-00-00 00:00:00</td>
<td class="tightcell">Download
</tr>
<tr>
<td class="statusBlank"></td>
<td>second</td>
<td>0000-00-00 00:00:00</td>
<td class="tightcell">Download
</tr>
<tr>
<td class="statusBlank"></td>
<td>second</td>
<td>0000-00-00 00:00:00</td>
<td class="tightcell">Download
</tr>
<tr>
<td class="statusBlank"></td>
<td>second</td>
<td>0000-00-00 00:00:00</td>
<td class="tightcell">Download
</tr>
</tbody>
</table>
<p>Final Project </p>
<table>
<tbody>
<tr>
<td class="statusBlank"></td>
<td>second</td>
<td>0000-00-00 00:00:00</td>
<td class="tightcell">Download
</tr>
<tr>
<td class="statusBlank"></td>
<td>second</td>
<td>0000-00-00 00:00:00</td>
<td class="tightcell">Download
</tr>
</tbody>
</table>
</section>
The problem comes from this:
tr td {
padding:6px 8px;
}
No matter how small you try to make your cell, it will always take up at least 16px of space. Your best option is to just not have the empty cells in your markup at all if they're not serving an actual purpose.
Alternately, you could kill the padding:
.statusBlank {
padding: 0;
}