Please help, I can't figure out how to get rid of this border underline. It's nowhere to be found in Chrome's Inspect. I've tried everything I could find in the forums but no luck so far.
I'm unable to reproduce it using a fiddle, but here's the live site
HTML
<table class="table table-1" border="0" cellpadding="0" cellspacing="0">
<tr>
<th class="table-header cell-left">Actives</th>
<th class="table-header cell-right">Percentage (%)</th>
</tr>
<tr>
<td class="table-data cell-left">Caster Oil</td>
<td class="table-data cell-right">25</td>
</tr>
<tr>
<td class="table-data cell-left">Peppermint Oil</td>
<td class="table-data cell-right">0.5</td>
</tr>
<tr>
<td class="table-data cell-left">Cinnamon Oil</td>
<td class="table-data cell-right">0.25</td>
</tr>
</table>
CSS
.table {
color: $Blue;
border: none;
border-collapse: collapse;
border-spacing: 0;
background-color: white;
}
th {
font-family: 'PPsans', Fallback, sans-serif;
font-size: 15px;
text-transform: uppercase;
}
td {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
text-transform: capitalize;
padding: 5px 0;
}
.cell-right {text-align:right;}
.cell-left {text-align: left;}
You have tr:first-child th:after, tr:first-child td:after with border-bottom: 1px solid #1c1d1d; which creates that border.
You can override this using:
tr:first-child th:after, tr:first-child td:after {
border: none;
}
Make sure this goes after the previous code (or edit the original css file).
tr:first-child th:after, tr:first-child td:after{
border-bottom: none !important;
}
if you have custom css file then use !important
Related
My current table data is look like image1 how can make it to become the image2 the data look like card? I tried the border-radius CSS, but it still looks same nothing changes. I think the current data look very messy so I think change to card row data will become better...
table {
border: 1px solid #ccc;
width: 100%;
margin:0;
padding:0;
border-collapse: collapse;
border-spacing: 0;
}
table tr {
border: 2px solid #eee;
border-radius: 25px;
padding: 20px;
}
table th, table td {
padding: 10px;
text-align: center;
}
table th {
text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
}
<table v-if="items.length >0">
<thead>
<th>{{$t('date')}}</th>
<th>{{$t('description')}}</th>
<th>{{$t('previousBalance')}}</th>
<th>{{$t('debit')}}</th>
<th>{{$t('credit')}}</th>
<th>{{$t('balance')}}</th>
</thead>
<tbody v-for="(item) in items" :key="item">
<tr>
<td :data-label="$t('date')">{{item.txDate}}</td>
<td :data-label="$t('description')"> {{item.txDesc}}</td>
<td :data-label="$t('previousBalance')">{{item.txBalBefore}}</td>
<td :data-label="$t('debit')" v-if="item.txAmount <=0">{{ item.txAmount }}</td>
<td :data-label="$t('debit')" v-else>0.00</td>
<td :data-label="$t('credit')" v-if="item.txAmount > 0">{{item.txAmount}}</td>
<td :data-label="$t('credit')" v-else>0.00</td>
<td :data-label="$t('balance')">{{item.txBalAfter}}</td>
</tr>
</tbody>
</table>
I can't try your snippets. but please take a look if this is what you are expecting.
body{
box-sizing: border-box
border: 1px solid #ddd;
}
table {
font-family: Arial, Helvetica, sans-serif;
border-collapse:separate;
border-spacing:0 15px;
width: 100%;
border: none
}
table td, #customers th {
padding: 20px;
}
table tr {background-color: #eaeefa;}
table th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #d9dff3;
}
td:first-child,
th:first-child {
border-radius: 10px 0 0 10px;
}
td:last-child,
th:last-child {
border-radius: 0 10px 10px 0;
}
<table id="customers">
<tr>
<th>Name</th>
<th>Age</th>
<th>Role</th>
</tr>
<tr>
<td>Temitope</td>
<td>12</td>
<td>Accountant</td>
</tr>
<tr>
<td>Alfred</td>
<td>23</td>
<td>Designer</td>
</tr>
<tr>
<td>Bello</td>
<td>14</td>
<td>Painter</td>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>Architect</td>
</tr>
<tr>
<td>James</td>
<td>10</td>
<td>Manager</td>
</tr>
</table>
Let me know if you have any questions
I have the table shown below; what I want is to insert an image next to the table in my pdf view. I am using domPDF.
I try to use display inline-block but domPDF doesn't support display inline.
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 20px;
}
table th,
table td {
padding: 20px;
background: #EEEEEE;
text-align: center;
border-bottom: 1px solid #FFFFFF;
}
table th {
white-space: nowrap;
font-weight: normal;
}
table td {
text-align: right;
}
table td h3 {
color: #ab5401;
font-size: 1.2em;
font-weight: normal;
margin: 0 0 0.2em 0;
}
table .no {
color: #FFFFFF;
font-size: 1.6em;
background: #ad9c82;
}
table .desc {
text-align: left;
}
table .total .total-div {
text-decoration: line-through;
}
table .total {
background: #ad9c82;
color: #FFFFFF;
}
table td.total {
font-size: 1.2em;
}
table tbody tr:last-child td {
border: none;
}
table tfoot td {
padding: 10px 20px;
background: #FFFFFF;
border-bottom: none;
font-size: 1.2em;
white-space: nowrap;
border-top: 1px solid #AAAAAA;
}
table tfoot tr:first-child td {
border-top: none;
}
table tfoot tr:last-child td {
color: #ab5401;
font-size: 1.4em;
border-top: 1px solid #ab5401;
}
table tfoot tr td:first-child {
border: none;
}
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th class="no">#</th>
<th class="desc">DESCRIPTION</th>
<th class="total">TOTAL</th>
</tr>
</thead>
<tbody>
<tr>
<td class="no">01</td>
<td class="desc">
<h3>Website Design</h3>Creating a recognizable design solution based on the company's existing visual identity</td>
<td class="total">$1,200.00</td>
</tr>
<tr>
<td class="no">02</td>
<td class="desc">
<h3>Website Development</h3>Developing a Content Management System-based Website</td>
<td class="total">$3,200.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td colspan="2">SUBTOTAL</td>
<td>$5,200.00</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2">TAX 25%</td>
<td>$1,300.00</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2">GRAND TOTAL</td>
<td>$6,500.00</td>
</tr>
</tfoot>
</table>
While the image for placeholder is the following:
<img src="https://picsum.photos/200" alt="Image example">
I tried to add it but it is always placed under the table, not next to it as I want.
Try Adding good old floats.
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 20px;
}
table th,
table td {
padding: 20px;
background: #EEEEEE;
text-align: center;
border-bottom: 1px solid #FFFFFF;
}
table th {
white-space: nowrap;
font-weight: normal;
}
table td {
text-align: right;
}
table td h3 {
color: #ab5401;
font-size: 1.2em;
font-weight: normal;
margin: 0 0 0.2em 0;
}
table .no {
color: #FFFFFF;
font-size: 1.6em;
background: #ad9c82;
}
table .desc {
text-align: left;
}
table .total .total-div {
text-decoration: line-through;
}
table .total {
background: #ad9c82;
color: #FFFFFF;
}
table td.total {
font-size: 1.2em;
}
table tbody tr:last-child td {
border: none;
}
table tfoot td {
padding: 10px 20px;
background: #FFFFFF;
border-bottom: none;
font-size: 1.2em;
white-space: nowrap;
border-top: 1px solid #AAAAAA;
}
table tfoot tr:first-child td {
border-top: none;
}
table tfoot tr:last-child td {
color: #ab5401;
font-size: 1.4em;
border-top: 1px solid #ab5401;
}
table tfoot tr td:first-child {
border: none;
}
<div style="width: 65%;float:left;">
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th class="no">#</th>
<th class="desc">DESCRIPTION</th>
<th class="total">TOTAL</th>
</tr>
</thead>
<tbody>
<tr>
<td class="no">01</td>
<td class="desc">
<h3>Website Design</h3>Creating a recognizable design solution based on the company's existing visual identity</td>
<td class="total">$1,200.00</td>
</tr>
<tr>
<td class="no">02</td>
<td class="desc">
<h3>Website Development</h3>Developing a Content Management System-based Website</td>
<td class="total">$3,200.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td colspan="2">SUBTOTAL</td>
<td>$5,200.00</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2">TAX 25%</td>
<td>$1,300.00</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2">GRAND TOTAL</td>
<td>$6,500.00</td>
</tr>
</tfoot>
</table>
</div>
<div style="width: 30%;float:left;">
<img src="https://picsum.photos/200" alt="Image example" style="width: 100%;">
</div>
I'm new to CSS and HTML and I'm trying to vertically center some text in a table header. At the moment the text is aligned with the top of the table cell. I was unsuccessful with vertical-align: middle;, and the only solution seems to be to add padding-top to match the space underneath the text. However this is not the best solution because I would like to have the text fit snugly within the table cell. Any ideas are appreciated.
body {
font-size: 18px;
font-family: 'Open Sans', sans-serif;
text-align: center;
color: black;
background-size: 100%;
padding:0;
}
.mytable {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
width: 80%;
}
.mytable thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
/*padding: 30px;*/
text-align: center;
vertical-align: middle;
}
.mytable tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 30px;
}
<div id="myWebPage" style="display:block">
<br><br><br><br>
<h3>Page title here</h3><br><br><br>
<table class="mytable" align="center">
<thead>
<tr>
<th><u>Resource</u><br><br><br></th>
<th><u>Contact</u><br><br><br></th>
</tr>
</thead>
<tbody>
<tr>
<th align="left">Resource 1<br><br></th>
<th align="left" width=35%;>999-999-9999<br> <br></th>
</tr>
<tr>
<th align="left">Resource 2<br><br></th>
<th align="left">888-888-8888<br><br></th>
</tr>
<tr>
<th align="left">Resource 3<br><br></th>
<th align="left" width=35%;>777-777-7777<br> <br></th>
</tr>
</tbody>
</table>
</div>
You have done it right in your CSS, just remove your <br> tags. E.g.
<th><u>Resource</u></th>
The vertical alignment won't work whilst you're manually inserting lines under your headings.
Full example
body {
font-size: 18px;
font-family: 'Open Sans', sans-serif;
text-align: center;
color: black;
background-size: 100%;
padding:0;
}
.mytable {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
width: 80%;
}
.mytable thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
/*padding: 30px;*/
text-align: center;
vertical-align: middle;
}
.mytable tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 30px;
}
<div id="myWebPage" style="display:block">
<br><br><br><br>
<h3>Page title here</h3><br><br><br>
<table class="mytable" align="center">
<thead>
<tr>
<th><u>Resource</u></th>
<th><u>Contact</u></th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Resource 1<br><br></td>
<td align="left" width=35%;>999-999-9999<br> <br></td>
</tr>
<tr>
<td align="left">Resource 2<br><br></td>
<td align="left">888-888-8888<br><br></td>
</tr>
<tr>
<td align="left">Resource 3<br><br></td>
<td align="left" width=35%;>777-777-7777<br> <br></td>
</tr>
</tbody>
</table>
</div>
Try like this , why are you put <br> and <td> to <th>
Table <td> The elements are the data containers of the table.
HTML Tag is
A line break is marked up as follows:
This text contains<br>a line break.
body {
font-size: 18px;
font-family: 'Open Sans', sans-serif;
text-align: center;
color: black;
background-size: 100%;
padding:0;
}
.mytable {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
width: 80%;
}
.mytable thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
/*padding: 30px;*/
text-align: center;
vertical-align: middle;
}
.mytable tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 30px;
}
<h3>Page title here</h3>
<table class="mytable" align="center">
<thead>
<tr>
<th><u>Resource</u></th>
<th><u>Contact</u></th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Resource 1</td>
<td align="left" width=35%;>999-999-9999</td>
</tr>
<tr>
<td align="left">Resource 2</td>
<td align="left">888-888-8888</td>
</tr>
<tr>
<td align="left">Resource 3</td>
<td align="left" width=35%;>777-777-7777</td>
</tr>
</tbody>
</table>
learn more about html table https://www.w3schools.com/html/html_tables.asp
Define a height value for the th elements
Define an explicit (absolute) height for your table header cells (th) using length unit values (e.g: 65px), then declare the vertical-align rule on these elements.
Code Snippet Demonstration:
body {
font-size: 18px;
font-family: 'Open Sans', sans-serif;
text-align: center;
color: black;
background-size: 100%;
padding: 0;
}
.mytable {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
width: 80%;
}
.mytable thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
/*padding: 30px;*/
text-align: center;
vertical-align: middle;
/* additional */
height: 65px;
}
.mytable tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 30px;
}
<div id="myWebPage" style="display:block">
<br><br><br><br>
<h3>Page title here</h3><br><br><br>
<table class="mytable" align="center">
<thead>
<tr>
<th><u>Resource</u></th>
<th><u>Contact</u></th>
</tr>
</thead>
<tbody>
<tr>
<th align="left">Resource 1<br><br></th>
<th align="left" width=35%;>999-999-9999<br> <br></th>
</tr>
<tr>
<th align="left">Resource 2<br><br></th>
<th align="left">888-888-8888<br><br></th>
</tr>
<tr>
<th align="left">Resource 3<br><br></th>
<th align="left" width=35%;>777-777-7777<br> <br></th>
</tr>
</tbody>
</table>
</div>
Don't use <br> tags for layout - that's a no-go! It will mess up whatever you try concerning vertical alignment and top/bottom padding and margins, like in the code in your question.
Erase them all and use top and bottom padding instead.
If still needed, use vertical-align, but in most cases you won't need it. And use the td tag for cells in the tbody, not th.
body {
font-size: 18px;
font-family: 'Open Sans', sans-serif;
text-align: center;
color: black;
background-size: 100%;
padding:0;
}
#myWebPage > h3 {
padding: 40px 0;
}
.mytable {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
width: 80%;
}
.mytable thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 30px 0;
/*padding: 30px;*/
text-align: center;
vertical-align: middle;
}
.mytable tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 30px;
}
<div id="myWebPage">
<h3>Page title here</h3>
<table class="mytable" align="center">
<thead>
<tr>
<th><u>Resource</u></th>
<th><u>Contact</u></th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Resource 1</td>
<td align="left" width=35%;>999-999-9999</td>
</tr>
<tr>
<td align="left">Resource 2</td>
<td align="left">888-888-8888</td>
</tr>
<tr>
<td align="left">Resource 3</td>
<td align="left" width=35%;>777-777-7777</td>
</tr>
</tbody>
</table>
</div>
I'm trying to figure out how to emulate this image using HTML and CSS. It will be something that will be displayed below the avatar on a message board.
This is what I have so far: https://jsfiddle.net/J7VBV/220/
table.avatarStats {
border-spacing: 0;
border-collapse: collapse;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
<table class="avatarStats" width="200" border="0">
<tr>
<td bgcolor="purple">RECENT WR<br /><strong>61%</strong></td>
<td bgcolor="teal">OVERALL<br /><strong>55%</strong></td>
</tr>
<tr>
<td bgcolor="purple">RECENT WN8<br /><strong>2469</strong></td>
<td bgcolor="teal">OVERALL<br /><strong>1737</strong></td>
</tr>
</table>
The main problem I'm having is decreasing the size of the text above the numbers. Nothing I've tried is making the text smaller.
Also, is there a better way of bolding the numbers?
Use this
table.avatarStats {
border-spacing: 0;
border-collapse: collapse;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
td small{
font-size:7pt;
font-weight:bold;
}
td strong{
font-size:18pt;
font-weight:bold;
}
<table class="avatarStats" width="200" border="0">
<tr>
<td bgcolor="purple"><small>RECENT WR</small><br /><strong>61%</strong></td>
<td bgcolor="teal"><small>OVERALL</small><br /><strong>55%</strong></td>
</tr>
<tr>
<td bgcolor="purple"><small>RECENT WN8</small><br /><strong>2469</strong></td>
<td bgcolor="teal"><dev font-size: 10pt;><small>OVERALL</small><br /><strong>1737</strong></td>
</tr>
</table>
You can use CSS to make the font smaller.
font-size: 10pt;
Just replace 10pt with whatever size you want to use.
I would use a CSS class like:
.small {
font-size: 10pt;
}
and add
class="small"
to the text you want to be small
You can do like this.
table.avatarStats {
border-spacing: 0;
border-collapse: collapse;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.cap{
font-size:8px;
font-weight:normal;
}
td{
font-weight:bold;
font-size:22px
}
<table class="avatarStats" width="200" border="0">
<tr>
<td bgcolor="purple"><span class="cap">RECENT WR</span><br /><strong>61%</strong></td>
<td bgcolor="teal"><span class="cap">OVERALL</span><br /><strong>55%</strong></td>
</tr>
<tr>
<td bgcolor="purple"><span class="cap">RECENT WN8</span><br /><strong>2469</strong></td>
<td bgcolor="teal"><span class="cap">OVERALL</span><br /><strong>1737</strong></td>
</tr>
</table>
Adjust the font-size accordingly as needed
try this https://jsfiddle.net/fd9x06jq/
table.avatarStats tr td strong{
font-size:9pt;
font-weight:bold;
color:black
}
Although I'd advise some changes to your markup, add this to you CSS:
table tr td:last-child{
font-size: 8pt;
}
EDIT:
My first code was off. Now it's correct. Here's a fiddle
Updated your code here: https://jsfiddle.net/70gtky65/1/
<table class="avatarStats">
<tr>
<td>RECENT WR<br/><span>61%</span></td>
<td>OVERALL<br/><span>55%</span></td>
</tr>
<tr>
<td>RECENT WN8<br/><span>2469</span></td>
<td>OVERALL<br/><span>1737</span></td>
</tr>
</table>
<style type="text/css">
table.avatarStats {
border-spacing: 0px;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
width: 108px;
}
table.avatarStats td {
font-size: 7px;
width: 50px;
padding: 2px;
}
table.avatarStats td span {
font-size: 16px;
}
table tr td:first-child {
background-color: #7842B3;
}
table tr td:last-child {
background-color: #459ABD;
}
</style>
You should try to avoid inline CSS and here is why
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.