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.
Related
I can't change rows' background-color; I'd like to have one row red.
Here is my code:
table.cennik-table {
font-size: 20px;
border: 3px solid #555555;
width: 80%;
height: auto;
text-align: center;
border-collapse: collapse;
margin: 0 auto;
}
table.cennik-table th {
font-size: 22px;
background-color: #888888;
}
table.cennik-table td {
padding: 0.7rem;
}
table.cennik-table tr.rowB {
background-color: red;
}
<div>
<table class="cennik-table">
<tr>
<th>Ilość wejść</th>
<th>Zajęcia grupowe</th>
<th>Treningi personalne</th>
</tr>
<tr class="rowB">
<td>1x tydzień</td>
<td>20zł</td>
<td rowspan="4">50zł</td>
</tr>
<tr class="rowA">
<td>2x tydzień</td>
<td>60zł</td>
</tr>
<tr class="rowB">
<td>3x tydzień</td>
<td>110zł</td>
</tr>
<tr class="rowA">
<td>OPEN</td>
<td>160zł</td>
</tr>
</table>
</div>
I'm a beginner so I could have made some simple mistakes.
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'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 placed the image but it breaks when we resize the window.
I want it in the center of the first column which is description below the email service.
I want it to remain in the center all the time.
I have given the td position relative and made the image absolute position. Its relative to the td................................
* {
font-family: sans-serif;
}
table{
width: 100%;
border: 1px solid #edf2fc;
border-collapse: collapse;
margin-top: 30px;
}
table th {
padding: 11px 6px 11px 6px;
word-break: break-all;
background: #413fa4;
color: #fff;
text-align: center;
}
tr td {
border: 1px solid #cbdaf1;
}
table tbody td {
text-align: center;
padding: 33px 0 33px 0;
word-break: break-all;
font-size: 18px;
}
tfoot tr td {
padding-top: 4px;
padding-bottom: 4px;
}
tfoot tr td:first-child{
padding-right: 22px;
}
.gray {
background-color: lightgray
}
<table width="100%">
<thead style="background-color: lightgray;">
<tr>
<th>Description</th>
<th>Cost</th>
</tr>
</thead>
<tbody>
<tr>
<td style="position: relative">Email Service
<img style="position: absolute; left: 300px; top: 70px;" src="https://image.shutterstock.com/image-vector/paid-thank-you-grunge-rubber-260nw-564254104.jpg"width=130px;>
</td>
<td align="center">1400.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td align="right">Subtotal</td>
<td align="center">1635.00</td>
</tr>
<tr>
<td align="right">Tax</td>
<td align="center">294.3</td>
</tr>
<tr>
<td align="right">Discount</td>
<td align="center">294.3</td>
</tr>
<tr>
<td align="right">Total</td>
<td align="center" class="gray">$ 1929.3</td>
</tr>
</tfoot>
</table>
Wrap the text and the image inside a div with a flex box property, and then you can center it as you like
* {
font-family: sans-serif;
}
table{
width: 100%;
border: 1px solid #edf2fc;
border-collapse: collapse;
margin-top: 30px;
}
table th {
padding: 11px 6px 11px 6px;
word-break: break-all;
background: #413fa4;
color: #fff;
text-align: center;
}
tr td {
border: 1px solid #cbdaf1;
}
table tbody td {
text-align: center;
padding: 33px 0 33px 0;
word-break: break-all;
font-size: 18px;
}
tfoot tr td {
padding-top: 4px;
padding-bottom: 4px;
}
tfoot tr td:first-child{
padding-right: 22px;
}
.gray {
background-color: lightgray
}
.flex-b {
display:flex;
align-items:center;
justify-content:center;
}
<table width="100%">
<thead style="background-color: lightgray;">
<tr>
<th>Description</th>
<th>Cost</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="flex-b">
<span>Email Service</span>
<img src="https://image.shutterstock.com/image-vector/paid-thank-you-grunge-rubber-260nw-564254104.jpg"width=130px;>
</div>
</td>
<td align="center">1400.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td align="right">Subtotal</td>
<td align="center">1635.00</td>
</tr>
<tr>
<td align="right">Tax</td>
<td align="center">294.3</td>
</tr>
<tr>
<td align="right">Discount</td>
<td align="center">294.3</td>
</tr>
<tr>
<td align="right">Total</td>
<td align="center" class="gray">$ 1929.3</td>
</tr>
</tfoot>
</table>
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>