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>
Related
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.
I have table and inside this table button and textbox.
Here the code:
#dvStockCard{
border-style: solid;
border-width: thin;
padding: 12px 5px 5px 5px;
}
.title {
font-size: small;
border-top: 2px solid #686868;
color:#383838;
padding: 8px calc(100% - 10ch) 0px 0px;
}
/*----table styles----*/
#dvStockCard table{
font-family: sans-serif;
font-weight: 600;
border-collapse: collapse;
width: 100%;
font-size: x-small;
}
#dvStockCard table tr{
border-bottom: 2px solid lightgray;
color: #707070;
}
#dvStockCard table td {
padding: 8px;
}
#dvStockCard table tr td:nth-child(2) {
text-align: right;
}
/*------values styles------*/
.val{
font-size: small;
color: black;
}
#lastPrice{
font-family: 'Palatino Linotype';
font-size: 160%;
color:black;
}
#change{
font-family: 'Palatino Linotype';
font-size: 160%;
color:green;
}
.halfWidth{
position: relative;;
width:50%;
}
/*-------helpers styles--------*/
.spaceTop-10{
margin-top:10px
}
.spaceBottom-10{
margin-bottom:10px
}
.fullWidth{
width:100%;
}
.fullHeight{
height:100%;
}
<div id="dvStockCard">
<div class="title spaceBottom-10">My data cart</div>
<table>
<tr>
<td id="lastPrice">no price</td>
<td id="change">1234324t</td>
</tr>
<tr>
<td>Range</td>
<td id="range" class="val">No Rnge</td>
</tr>
<tr>
<td>Open</td>
<td id="open" class="val">555</td>
</tr>
<tr>
<td>Volume</td>
<td id="volume" class="val">DM</td>
</tr>
<tr>
<td>Market Cap</td>
<td id="marketCap" class="val">Non</td>
</tr>
<tr>
<td></td>
<td id="timestamp">As of 12:00 AM</td>
</tr>
<tr>
<td style="width:50%;"><input type="text" class="fullWidth fullHeight"></td>
<td style="width:50%"><input type="button" value="Get" class="fullWidth fullHeight"></td>
</tr>
</table>
</div>
My question is how can I make a button and textbox inside the table cell in the table above to get the full height of the row(I tried height:100%)?
Couple of things:
You have already defined 8px of padding under #dvStockCard table td{...} that's why you had default padding for all. Considering you need that padding I have overridden the td padding for last row.
Use border-collapse: collapse; for the row and padding & margin to 0 for td. Now you can use your desired height for that row.
#dvStockCard {
border-style: solid;
border-width: thin;
padding: 12px 5px 5px 5px;
}
.title {
font-size: small;
border-top: 2px solid #686868;
color: #383838;
padding: 8px calc(100% - 10ch) 0px 0px;
}
/*----table styles----*/
#dvStockCard table {
font-family: sans-serif;
font-weight: 600;
border-collapse: collapse;
width: 100%;
font-size: x-small;
}
#dvStockCard table tr {
border-bottom: 2px solid lightgray;
color: #707070;
}
#dvStockCard table td {
padding: 8px;
}
#dvStockCard table tr td:nth-child(2) {
text-align: right;
}
/*------values styles------*/
.val {
font-size: small;
color: black;
}
#lastPrice {
font-family: 'Palatino Linotype';
font-size: 160%;
color: black;
}
#change {
font-family: 'Palatino Linotype';
font-size: 160%;
color: green;
}
.halfWidth {
position: relative;
;
width: 50%;
}
/*-------helpers styles--------*/
.spaceTop-10 {
margin-top: 10px
}
.spaceBottom-10 {
margin-bottom: 10px
}
.trClass {
border-collapse: collapse;
}
.trClass td {
height: 40px;
padding: 0 !important;
/* need this because you already used 8px to the td*/
margin: 0 !important;
/* need this because you already used 8px to the td*/
}
.fullWidth {
width: 100%;
}
.fullHeight {
height: 100%;
}
<div id="dvStockCard">
<div class="title spaceBottom-10">My data cart</div>
<table>
<tr>
<td id="lastPrice">no price</td>
<td id="change">1234324t</td>
</tr>
<tr>
<td>Range</td>
<td id="range" class="val">No Rnge</td>
</tr>
<tr>
<td>Open</td>
<td id="open" class="val">555</td>
</tr>
<tr>
<td>Volume</td>
<td id="volume" class="val">DM</td>
</tr>
<tr>
<td>Market Cap</td>
<td id="marketCap" class="val">Non</td>
</tr>
<tr>
<td></td>
<td id="timestamp">As of 12:00 AM</td>
</tr>
<tr class="trClass">
<td style="width:50%;"><input type="text" class="fullWidth fullHeight"></td>
<td style="width:50%"><input type="button" value="Get" class="fullWidth fullHeight"></td>
</tr>
</table>
</div>
You could try wrapping it up in a container and later set it to 100% height. If not, you could try setting the height in px, you go trying different measurements until you see which one fills your desire. I hope I could help you
This is a crappy issue and I am truly sorry to ask this. But I have been programming PHP for hours and now trying to display it on a simple html layout. I need more coffee and my eyes are tired, woke up too early...
Anyway the issue is, that for some reason my css styles that should affect the text stylings has no effect what so ever on the layout. Which is a bit odd that the border settings and paddings do work, but font-weight or the background-color does not.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Visitor logs</title>
<style>
html {
}
body {
}
.first_row {
font-weight: bold;
background-color: red;
}
td {
padding: 4px 8px 4px 4px;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr class="first_row">
<td>IP-address</td>
<td>Last visited</td>
<td>Rough location</td>
</tr>
</table>
</body>
</html>
Add this code:
table {
border-collapse: collapse;
}
table {
border-collapse: collapse;
}
.first_row {
font-weight: bold;
background-color: red;
}
td {
padding: 4px 8px 4px 4px;
border-bottom: 1px solid black;
}
<table>
<tr class="first_row">
<td>IP-address</td>
<td>Last visited</td>
<td>Rough location</td>
</tr>
<tr class="second_row">
<td>IP-address2</td>
<td>Last visited2</td>
<td>Rough location2</td>
</tr>
</table>
See This Also:
table {
border-collapse: collapse;
}
.first_row {
font-weight: bold;
background-color: red;
}
tr:not(.first_row) td:not(:first-child) {
border-left: 1px solid #000;
}
td {
padding: 4px 8px 4px 4px;
border-bottom: 1px solid black;
}
<table>
<tr class="first_row">
<td>IP-address</td>
<td>Last visited</td>
<td>Rough location</td>
</tr>
<tr class="second_row">
<td>IP-address2</td>
<td>Last visited2</td>
<td>Rough location2</td>
</tr>
</table>
You can used thead with th for heading of table
table {
border-collapse: collapse;
}
table th {
font-weight: bold;
background: red;
padding:4px;
border-bottom: 1px solid black;
}
td {
padding: 4px 8px 4px 4px;
border-bottom: 1px solid black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Visitor logs</title>
</head>
<body>
<table>
<thead>
<tr>
<th>IP-address</th>
<th>Last visited</th>
<th>Rough location</th>
</tr>
</thead>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</table>
</body>
</html>
Add cellspacing="0" cellpadding="0" in table tag or add table{border-collapse: collapse;} in your css.
.first_row {
font-weight: bold;
background-color: red;
}
td {
padding: 4px 8px 4px 4px;
border-bottom: 1px solid black;
}
<table cellspacing="0" cellpadding="0">
<tr class="first_row">
<td>IP-address</td>
<td>Last visited</td>
<td>Rough location</td>
</tr>
</table>
JSFiddle
I can't resolve the gap between a h2 tag and a table. Beside, if you look at my attached image, you will se that in the second table, the first row's width(header) is shorter than the rest, any help is greatly appreciated!
h2 and table css :
.tieudemien
{
line-height: 24px;
background-color: #80A5CE;
text-transform: uppercase;
color: #FFF;
font-weight: bold;
font-size: 12px;
width:498px;
margin-bottom: 0;
padding-bottom: 0;
margin-left:1px;
}
.tb {
width: 500px;
padding-top:0;
padding-bottom:0;
}
Padding issue:
table td {
padding: 0;
}
See it here: http://jsfiddle.net/uryeto61/4/
Here's result: http://jsfiddle.net/abruzzi/uryeto61/3/
You can just change the padding of class .tdkq and tddd below:
.tdkq, .tddd {
padding: 0;
}
demo - http://jsfiddle.net/victor_007/uryeto61/2/
add to table
cellpadding='0'
Try this -
table td{
padding: 0;
}
Set table td Padding 0
Try This:
body {} table,
th,
td,
tr {
border-collapse: collapse;
}
.tb {
width: 500px;
padding-top: 0;
padding-bottom: 0;
}
/*2 cell đầu tiên, xác định độ rộng*/
.tdkq {
width: 70%;
vertical-align: top;
}
.tddd {
width: 30%;
vertical-align: top;
}
/*bảng kết quả và đầu đuôi*/
.tbkq {
width: 100%;
word-wrap: break-word;
table-layout: fixed;
float: left;
margin-bottom: 0;
padding-bottom: 0;
border-right: 1px solid #CCC;
}
.tbdd {
width: 100%;
}
.tbdd td {
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
}
/*cột giải và kết quả của bảng kết quả*/
.trkq {
width: 100%;
}
.thkqgiai {
width: 20% !important;
text-align: center;
color: white;
background-color: #910000;
}
.thkqso {
width: 80% !important;
}
.tdkqgiai {
text-align: center;
background-color: #F9F9F9;
color: #910000;
}
.tdkqgiaidb {
text-align: center;
color: white;
background-color: #910000;
}
.tdkqso {
text-align: center;
word-wrap: break-word !important;
border-top: 1px solid #CCC;
}
.tdkqsodb {
text-align: center;
word-wrap: break-word !important;
color: red;
border-top: 1px solid #CCC;
}
/*cột đầu và đuôi của bảng đầu đuôi*/
.thdddau {
width: 30%;
color: white;
background-color: #910000;
}
.thddduoi {
width: 70%;
color: white;
background-color: #910000;
}
/*tiêu đề cho bảng kq*/
.tieudemien {
line-height: 24px;
background-color: #80A5CE;
text-transform: uppercase;
color: #FFF;
font-weight: bold;
font-size: 12px;
width: 500px;
margin-bottom: 0;
padding-bottom: 0;
margin-left: 1px;
}
.tieudecuoi {
background-color: #80A5CE;
text-transform: uppercase;
color: #FFF;
font-weight: bold;
font-size: 12px;
margin-bottom: 0;
padding-top: 4px;
padding-bottom: 0;
width: 300px !important;
}
.tdtieudecuoi {
text-align: right;
background-color: #80A5CE;
text-transform: uppercase;
color: #FFF;
font-weight: bold;
font-size: 12px;
}
table td {
padding: 0;
}
<h2 class="tieudemien"> Kết quả xổ số Miền Bắc ngày 02-11-2014</h2>
<table class="tb">
<tbody>
<tr>
<td class="tdkq">
<table class="tbkq">
<tbody>
<tr class="trkq">
<th class="thkqgiai">Giải</th>
<th class="thkqso">BTB</th>
</tr>
<tr>
<td class="tdkqgiai">Đặc biệt</td>
<td class="tdkqsodb">23411</td>
</tr>
<tr>
<td class="tdkqgiai">Giải nhất</td>
<td class="tdkqso">37428</td>
</tr>
<tr>
<td class="tdkqgiai">Giải nhì</td>
<td class="tdkqso">38460-75356</td>
</tr>
<tr>
<td class="tdkqgiai">Giải ba</td>
<td class="tdkqso">02055-66542-36814-52154-66881-20546</td>
</tr>
<tr>
<td class="tdkqgiai">Giải bốn</td>
<td class="tdkqso">6300-7736-6062-3408</td>
</tr>
<tr>
<td class="tdkqgiai">Giải năm</td>
<td class="tdkqso">0235-2078-1344-6340-4550-6337</td>
</tr>
<tr>
<td class="tdkqgiai">Giải sáu</td>
<td class="tdkqso">046-421-944</td>
</tr>
<tr>
<td class="tdkqgiai">Giải bảy</td>
<td class="tdkqso">88-98-24-21</td>
</tr>
<tr>
<td class="tdtieudecuoi"></td>
<td class="tdtieudecuoi">span</td>
</tr>
</tbody>
</table>
</td>
<td class="tddd">
<table class="tbdd">
<tbody>
<tr class="trkq">
<th class="thdddau">Đầu</th>
<th class="thddduoi">Đuôi</th>
</tr>
<tr>
<td class="tdkqgiai">0</td>
<td class="tdkqso">0,8</td>
</tr>
<tr>
<td class="tdkqgiai">1</td>
<td class="tdkqso">1,4</td>
</tr>
<tr>
<td class="tdkqgiai">2</td>
<td class="tdkqso">8,1,4,1</td>
</tr>
<tr>
<td class="tdkqgiai">3</td>
<td class="tdkqso">6,5,7</td>
</tr>
<tr>
<td class="tdkqgiai">4</td>
<td class="tdkqso">2,6,4,0,6,4</td>
</tr>
<tr>
<td class="tdkqgiai">5</td>
<td class="tdkqso">6,5,4,0</td>
</tr>
<tr>
<td class="tdkqgiai">6</td>
<td class="tdkqso">0,2</td>
</tr>
<tr>
<td class="tdkqgiai">7</td>
<td class="tdkqso">8</td>
</tr>
<tr>
<td class="tdkqgiai">8</td>
<td class="tdkqso">1,8</td>
</tr>
<tr>
<td class="tdkqgiai">9</td>
<td class="tdkqso">8</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I am working with a CSS table, and having an unexpected result - the table columns do not line up properly. This is what the table looks like
Here is the CSS
* {
/* old-style reset here :) */
border: 0px;
padding: 0px;
}
table {
border-collapse: separate;
border: 1px solid #9DABCE;
border-width: 0px 0px 1px 1px;
margin: 10px auto;
font-size: 20px;
width:90%;
}
td, th {
width: 41px;
height: 41px;
text-align: center;
font-size: 18px;
font-weight: bold;
vertical-align: middle;
background: url(../img/cells.png);
color: #444;
position: relative;
}
th {
font-weight: bold;
font-size: 14px;
}
td.today {
background-position: 81px 0px;
color: white;
}
And here is the table HTML
<table cellspacing="0">
<thead>
<th>Core Measure</th><th>National Average</th>
</thead>
<tbody>
<tr>
<td class="today">Discharge Instructions</td>
<td class="today">91%</td>
</tr>
<tr>
<td class="today">Measure LV Systolic Function</td>
<td class="today">98%</td>
</tr>
<tr>
<td class="today">ACE/ARB for LVSD</td>
<td class="today">95%</td>
</tr>
<tr>
<td class="today">Smoking Cessation</td>
<td class="today">99%</td>
</tr>
</tbody>
<tfoot>
<th>Core Measure</th><th>National Average</th>
</tfoot>
</table>
Assistance fixing this problem would be greatly appreciated. Thank you.
It is something to do with your sprite and the background-position values you set. I made a fiddle for you and it seems okay.