I´m making a webshop with woocommerce.
At every product I want to add a table with information of the product, like color, delivery time and some more.
But when I add this table. All content after this product disappears.
The code for my table:
td {
border: 1px solid black;
}
table {
border: 6px solid #C6A970;
margin-bottom: 10px;
}
td {
padding: 8px;
}
<table>
<tr>
<td>Color:</td><td>White</td>
</tr>
<tr>
<td>Size:</td><td>100-110 x 60-70</td>
</tr>
<tr>
<td>Delivery time:</td><td>2-3 working days</td>
</tr>
</table>
What am I doing wrong in this code that my content disappears?
td {
border: 1px solid black;
}
table {
border: 6px solid #C6A970;
margin-bottom: 10px;
clear:both;
}
td {
padding: 8px;
}
<table>
<tr>
<td>Color:</td><td>White</td>
</tr>
<tr>
<td>Size:</td><td>100-110 x 60-70</td>
</tr>
<tr>
<td>Delivery time:</td><td>2-3 working days</td>
</tr>
</table>
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 am trying to highlight a group of table cells (vertically and horizontally) and I am not sure what the best way is. Ideally I'd also like to add a drop shadow on the outlined group.
This is what I came up with, but it's quite hacky. https://jsfiddle.net/jhxLb6s5/39/
Is there a better way to accomplish this?
table,
td {
border: 1px solid #000;
padding: 4px;
}
td {
position: relative;
}
td.outline {
font-size: 2.5rem;
}
td.outline:after {
content: '';
position: absolute;
top: -5px;
left: -5px;
bottom: -5px;
right: -5px;
border-color: red;
border-style: solid;
}
td.outline.left:after {
border-width: 6px 0 6px 6px;
}
td.outline.middle-horizontal:after {
border-width: 6px 0 6px 0;
}
td.outline.right:after {
border-width: 6px 6px 6px 0;
}
Outline a group of table cells
We can use the rules of table border conflicts to our advantage and place borders in the right places with a bit of tricky CSS selector use where we can to reduce the need for extra classes.
To go down the column, across rows, we need to specify the top and bottom cells.
TLDR: Full example at the end.
The table
Highlight in a row
Each cell in the outlined group gets an .outline class:
<table>
<tr>
<td>adipiscing</td>
<td class="outline">elit</td>
<td class="outline">Quisque</td>
<td class="outline">nulla</td>
<td class="outline">massa</td>
<td>vestibulum</td>
</tr>
</table>
Highlight down a column
Each cell in an outlined column group gets and .outline-y class. The top cell to be highlight is additionally given .top and the bottom celll .bottom:
<table>
<tr>
<td>adipiscing</td>
<td class="outline-y top">elit</td>
</tr>
<tr>
<td>adipiscing</td>
<td class="outline-y">elit</td>
</tr>
<tr>
<td>adipiscing</td>
<td class="outline-y bottom">elit</td>
</tr>
</table>
The CSS
Each outlined cell receives a top bottom and left border:
td.outline {
border-top: solid 5px red;
border-bottom: solid 5px red;
border-left: solid 5px red;
}
Any outlined cell that is to the right of another outlined cell has its left border removed:
(Read more: adjacent sibling combinator +)
td.outline + td.outline {
border-left: none
}
The first cell after the last outlined cell has a left border given to it:
(Read more: :not() pseudo-class)
td.outline + td:not(.outline) {
border-left: solid 5px red;
}
If an outlined cell is the last in the row, it gets a right border:
td.outline:last-child {
border-right: solid 5px red;
}
Highlighting down a column across rows
A second class .outline-y gives left and right borders:
td.outline-y {
border-left: solid 5px red;
border-right: solid 5px red;
}
Then, the top and bottom have to be identified with classes to give top and bottom borders as needed:
td.outline-y.top {
border-top: solid 5px red;
}
td.outline-y.bottom {
border-bottom: solid 5px red;
}
Complete Example
table {
border-collapse: collapse
}
td {
border: 1px solid #000;
padding: 4px;
}
td.outline {
border-top: solid 5px red;
border-bottom: solid 5px red;
border-left: solid 5px red;
}
td.outline+td.outline {
border-left: none
}
td.outline+td:not(.outline) {
border-left: solid 5px red;
}
td.outline:last-child {
border-right: solid 5px red;
}
td.outline-y.top {
border-top: solid 5px red;
}
td.outline-y.bottom {
border-bottom: solid 5px red;
}
td.outline-y {
border-left: solid 5px red;
border-right: solid 5px red;
}
<h1>Any combination</h1>
<h2>Example 1</h2>
<table>
<tr>
<td>lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
<td>amet</td>
<td>consectetur</td>
</tr>
<tr>
<td>adipiscing</td>
<td class="outline">elit</td>
<td class="outline">Quisque</td>
<td class="outline">nulla</td>
<td class="outline">massa</td>
<td>vestibulum</td>
</tr>
<tr>
<td>adipiscing</td>
<td>elit</td>
<td>Quisque</td>
<td>nulla</td>
<td>massa</td>
<td>vestibulum</td>
</tr>
</table>
<h2>Example 2</h2>
<table>
<tr>
<td>lorem</td>
<td>ipsum</td>
<td class="outline">dolor</td>
<td>sit</td>
<td>amet</td>
<td>consectetur</td>
</tr>
<tr>
<td>adipiscing</td>
<td>elit</td>
<td>Quisque</td>
<td>nulla</td>
<td>massa</td>
<td>vestibulum</td>
</tr>
<tr>
<td class="outline">adipiscing</td>
<td>elit</td>
<td>Quisque</td>
<td>nulla</td>
<td>massa</td>
<td class="outline">vestibulum</td>
</tr>
</table>
<h2>Example 3</h2>
<table>
<tr>
<td>lorem</td>
<td>ipsum</td>
<td class="outline">dolor</td>
<td>sit</td>
<td>amet</td>
<td>consectetur</td>
</tr>
<tr>
<td class="outline">adipiscing</td>
<td class="outline">elit</td>
<td class="outline">Quisque</td>
<td class="outline">nulla</td>
<td class="outline">massa</td>
<td class="outline">vestibulum</td>
</tr>
<tr>
<td class="outline">adipiscing</td>
<td class="outline">elit</td>
<td>Quisque</td>
<td class="outline">nulla</td>
<td>massa</td>
<td class="outline">vestibulum</td>
</tr>
</table>
<h2>Example 3 - In a column across rows</h2>
<table>
<tr>
<td>lorem</td>
<td class="outline-y top">ipsum</td>
<td>dolor</td>
<td>sit</td>
<td>amet</td>
<td>consectetur</td>
</tr>
<tr>
<td>adipiscing</td>
<td class="outline-y">elit</td>
<td class="outline">Quisque</td>
<td class="outline">nulla</td>
<td class="outline">massa</td>
<td class="outline">vestibulum</td>
</tr>
<tr>
<td>adipiscing</td>
<td class="outline-y bottom">elit</td>
<td>Quisque</td>
<td>nulla</td>
<td>massa</td>
<td>vestibulum</td>
</tr>
</table>
I want two horizontal between both records and some extra bottom padding to add a symbol
Edit/update :
I am hard-coding what I want as below
table {
border: 1px solid black;
padding: 0em 2em;
}
tr {
border: 1px solid black;
padding: 0em 2em;
}
tr:nth-child(3) {
margin: 0px;
padding: 0px;
}
tr:nth-child(7) {
background-color: red
}
td:nth-child(21) {
border-bottom: 1px solid blue;
}
<table>
<tr>
<th colspan="2">Old_records</th>
<td>32</td>
</tr>
<tr>
<th>Records_fetched</th>
<td colspan="2">100</td>
</tr>
<tr>
<td colspan="3"> -----------------------------</td>
</tr>
<tr>
<th>Sum </th>
<td colspan="2">132</td>
</tr>
<tr>
<th>New_records</th>
<td></td>
<td>80</td>
</tr>
<tr>
<td colspan="3"> -----------------------------</td>
</tr>
<tr>
<th>Differnce </th>
<td colspan="2">52</td>
</tr>
</table>
Still I need symbols to be added and I an better way to add border instead of this row <tr><td colspan="3"> -----------------------------</td></tr>
Can someone suggest me how to do that it properly?
Add border in tr and apply border-collapse:collapse for table.
table {
border: 1px solid black;
padding:0em 2em;
border-collapse: collapse;
}
tr {
border-bottom: 1px solid black;
}
td {
padding: 2em;
}
<table>
<tr>
<th>Old_records</th>
<td> 32 </td>
</tr>
<tr>
<th>Records_fetched</th>
<td>100</td>
</tr>
<tr>
<th>NEw_records</th>
<td>80</td>
</tr>
</table>
Try the below code
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
</style>
<table>
<tr>
<th>Old_records</th>
<td> 32 </td>
</tr>
<tr>
<th>Records_fetched</th>
<td>100</td>
</tr>
<tr>
<th>NEw_records</th>
<td>80</td>
</tr>
</table>
To insert an empty row, you can write:
<tr>
<td colspan="2"> </td>
</tr>
For extra padding, where you need - just add a class="extra-padding-bottom" attribute
And add appropriate CSS code:
.extra-bottom-padding {
padding-bottom: 100px;
}
For example <td class="extra-padding-bottom">
table {
border: 1px solid black;
padding: 0em 2em;
}
tr {
border: 1px solid black;
padding: 0em 2em;
}
tr:nth-child(3) {
margin: 0px;
padding: 0px;
}
tr:nth-child(even) > th,
tr:nth-child(even) > td {
padding-bottom: 0.75em;
border-bottom: 1px dashed #222;
}
tr:nth-child(odd) > th,
tr:nth-child(odd) > td {
padding-top: 0.75em;
}
<table>
<tr>
<th colspan="2">Old_records</th>
<td>32</td>
</tr>
<tr>
<th>Records_fetched</th>
<td colspan="2">100</td>
</tr>
<tr>
<th>Sum </th>
<td colspan="2">132</td>
</tr>
<tr>
<th>New_records</th>
<td></td>
<td>80</td>
</tr>
<tr>
<th>Differnce </th>
<td colspan="2">52</td>
</tr>
</table>
The solution worked for me is defining css properties at column level and defining colspan as the number of columns in the table
HTML -
<tr class="border_bottom">
<td colspan="6"></td>
</tr>
CSS -
tr.border_bottom td {
border-bottom: 1px solid #cccccc;
color: #707070;
}
table {
border-collapse: collapse;
}
<tr>
<td><hr> </td>
<td><hr> </td>
</tr>
I tried this, it worked
I want the outer borders of my table be dashed, while the inner borders be solid. So I made these css codes for my normal-table, but whole table border is solid.
.zulu-post .zulu-content .normal-table{
color: #444444;
border: 1px dashed #444444;
}
.zulu-post .zulu-content .normal-table td, .normal-table tr{
padding: 10px;
border: 1px solid #444444;
}
<table border="1" cellpadding="1" cellspacing="1" class="normal-table" style="width:500px;">
<tbody>
<tr>
<td>Table Name</td>
</tr>
<tr>
<td>Make sure that Stylesheet Classes is normal-table</td>
</tr>
<tr>
<td>Text Here...</td>
</tr>
</tbody>
</table>
This is one way of doing what you want:
Basically you add border left and top to all <td> tags and than remove the border from the sides of the table, and you use dashed border on <table>.
.normal-table {
color: #444444;
border: 1px dashed #444444;
}
.normal-table td {
padding: 10px;
border-left: 1px solid #444444;
border-top: 1px solid #444444;
}
.normal-table td:first-child {
border-left: none;
}
.normal-table tr:first-child td {
border-top: none;
}
<table cellpadding="1" cellspacing="0" class="normal-table" style="width:500px;">
<tbody>
<tr>
<td>Table Name</td>
</tr>
<tr>
<td>Make sure that Stylesheet Classes is normal-table</td>
</tr>
<tr>
<td>Text Here...</td>
</tr>
</tbody>
</table>
1st make use of border-collpase:collapse, this collapse the table border to single border then do styling part for table, tbody, tr and such.
.normal-table {
border: 2px solid red;
border-collapse: collapse;
}
tr {
border: 2px dashed red;
}
<table border="1" cellpadding="1" cellspacing="1" class="normal-table" style="width:500px;">
<tbody>
<tr>
<td>Table Name</td>
</tr>
<tr>
<td>Make sure that Stylesheet Classes is normal-table</td>
</tr>
<tr>
<td>Text Here...</td>
</tr>
</tbody>
</table>
You can use divs as an alternative:
.container {
width: 100%;
border: medium dashed darkgray;
display: table;
}
.cell {
width: 30%;
border: thin solid red;
height: 50px;
display: table-cell;
}
<div class='container'>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
</div>
I have a email template design I am making. In the bottom of the page: [My Example Page][1] there is 2 buttons. THe button have a green border and a red border. I would like to set a 3px border on the green border, but I cannot make it work. I can only make it work for the border inside the green one.
Can anyone see why that happens?
table.button.secondary table td {
background: #e8e8e8;
color: #fefefe;
border-radius: 10px;
border: 1px solid green;
}
table.button.secondary table a {
color: #0d465d;
border: 0px solid #e8e8e8;
border-radius: 10px;
border: 1px solid red;
}
table.button.secondary:hover table td {
background: #e8e8e8;
color: #0d465d;
border: 1px solid #0d465d;
}
table.button.secondary:hover table a {
border: 0px solid #e8e8e8;
}
table.button.secondary:hover table td a {
color: #0d465d;
}
table.button.secondary:active table td a {
color: #0d465d;
}
table.button.secondary table td a:visited {
color: #fefefe;
}
<!-- Email Button Start -->
<table align="center" class="wrapper header float-center background-color__footer__blue">
<tbody>
<tr>
<td class="wrapper-inner">
<center>
<table align="center" class="container" style="background-color:transparent">
<tbody>
<tr>
<td>
<table class="row collapse">
<tbody>
<tr>
<th>
<center>
<table class="button secondary small-expanded">
<tr>
<td>
<table>
<tr>
<td style="text-align:center;" width="230">maim#mail.com
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</th>
<th class="expander"></th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
<!-- Email Button End -->
You can change the table cell to be inline-block, but that may have unintended consequences.
table.button.secondary table td { display: inline-block; }
I would just make the a that has the red border currently a block element so that it takes up the entire table cell, then the border will look the same as if it was applied to the table cell instead. That's a better UX, too, since that's a clickable link and the border wraps the link - you should be able to click anywhere within the border to activate the link.
table.button.secondary table a {
color: #0d465d;
border: 0px solid #e8e8e8;
border-radius: 10px;
border: 1px solid red;
/* add these 2 lines */
display: block;
text-align: center;
}