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>
Related
I have two different tables on separate pages, and I need to specify a certain style to each one. This is my code (It works with separate stylesheets, but I need it to work on one):
Here is a snippet of my tables and the CSS:
body {
font-family: verdana;
}
/* Table 1 css */
.table1,
th,
td {
color: #030099;
border: 1px solid black;
border-width: 0px 1px 1px 1px;
font-size: 110%;
}
/* Table 2 css */
.pcsetup,
th,
td {
color: #030099;
border: 1px solid black;
border-width: 0px 1px 1px 1px;
font-size: 110%;
}
.tc1 {
background-color: white;
border: 2px solid black;
padding: 5px;
}
<h4>table 1</h4>
<table cellpadding="10" cellspacing="0" class="table1">
<caption class="tc1"><strong>My PC Setup</strong></caption>
<tr>
<th>Component</th>
</tr>
<tr>
<td><strong>CPU:</strong></td>
</tr>
<tr>
<td><strong>RAM:</strong></td>
</tr>
</table>
<h4>table 2</h4>
<table cellpadding="10" cellspacing="0" class="pcsetup">
<caption class="tc1"><b>PC Setup</b></caption>
<tr>
<th>Component</th>
</tr>
<tr>
<th><strong>CPU</strong></th>
</tr>
<tr>
<th><strong>RAM</strong></th>
</tr>
</table>
How can I differentiate between the two?
I have HTML table with rowspan and I want to td with different boarder-left color
HTML Code;
<table class="table">
<tr>
<td class ="fail-td" rowspan="2">Detail</td>
<td class ="fail-td">Data 1</td>
<td class="event">Event</td>
</tr>
<tr> <td class ="success-td">Data 2</td></tr>
</table>
Snippet:
.fail-td {
border-left: 4px solid #d9534f !important;
}
.success-td {
border-left: 4px solid #5cb85c !important;
}
Expected output is rowspan second row td with green color left border
But result is td with red color left border
set fail-td class name of second td of data 1 value
.fail-td {
border-left: 4px solid #d9534f !important;
}
.success-td {
border-left: 4px solid #5cb85c !important;
}
<table class="table">
<tr>
<td class="fail-td" rowspan="2">Detail</td>
<td class="fail-td">Data 1</td>
<td class="event">Event</td>
</tr>
<tr>
<td class="success-td">Data 2</td>
</tr>
</table>
table tr td:nth-child(1) {
border-left: 4px solid green;
}
table tr td:nth-child(2) {
border-left: 4px solid red;
}
table tr td:nth-child(3) {
border-left: 4px solid yellow;
}
table tr td:nth-child(4) {
border-left: 4px solid blue;
}
<!-- language: lang-html -->
<table class="table">
<tr>
<td rowspan="2">Detail</td>
<td>Data 1</td>
<td class="event">Event</td>
</tr>
<tr>
<td>Data 2</td>
</tr>
</table>
<!-- end snippet -->
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 would like to add divisions and padding between rows, but I've noticed that row borders are displayed with border-collapse: collapse, but this removes the padding for the <tr> element. https://jsfiddle.net/c8ht9aso/
<table style="border: 1px solid red; border-collapse: collapse; padding: 20px">
<tr>
<td>Header</td>
</tr>
<tr style="border-top:1px solid blue; vertical-align: top; padding: 20px">
<td>Cell</td>
</tr>
<tr style="border-top:1px solid green; vertical-align: top; padding: 20px">
<td>Another Cell</td>
</tr>
</table>
So I remove border-collapse: collapse and I can see the padding, but not the horizontal lines between rows: https://jsfiddle.net/0mecu52u/
<table style="border: 1px solid red; padding: 20px">
<tr>
<td>Header</td>
</tr>
<tr style="border-top:1px solid blue; vertical-align: top; padding: 20px">
<td>Cell</td>
</tr>
<tr style="border-top:1px solid green; vertical-align: top; padding: 20px">
<td>Another Cell</td>
</tr>
</table>
So how can I add a border and padding to a <tr>?
Thanks.
If you want to set both the border and padding in a table layout, it's better to set it on the td rather than the tr, that will make sure it to work across the browsers correctly.
table {
border: 1px solid red;
border-collapse: collapse;
}
td {
vertical-align: top;
padding: 20px;
}
tr:nth-child(1) td {
border-bottom: 1px solid blue;
}
tr:nth-child(2) td {
border-bottom: 1px solid green;
}
<table>
<tr>
<td>Header</td>
</tr>
<tr>
<td>Cell</td>
</tr>
<tr>
<td>Another Cell</td>
</tr>
</table>
The following code, in all browsers - apart from Google Chrome Latest on the PC - displays a border on the tbody table cells, as specified in the CSS.
Chrome PC, displays the thead border, but not the TD borders. Why? Is it a bug in Chrome, or in my HTML/CSS?
Heres a jsFiddle that replicates it:
<table width="505" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>Testing</td>
<td>123</td>
</tr>
<tr>
<td>Testing</td>
<td>456</td>
</tr>
</tbody>
<thead>
<tr>
<th>foo</th>
<th>bar</th>
</tr>
</thead>
table {
width:736px;
border-collapse: collapse;
thead {
border-top: 2px solid #aaaaaa;
tr {
th {
border: 0;
padding: 12px 5px;
}
}
}
tbody {
border-top:0;
tr {
td {
padding: 10px 5px;
border-top: 1px solid #aaaaaa;
border-bottom: 1px solid #aaaaaa;
}
}
Try with putting tbody after thead.
HTML
<table width="505" cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th>foo</th>
<th>bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>Testing</td>
<td>123</td>
</tr>
<tr>
<td>Testing</td>
<td>456</td>
</tr>
</tbody>
</table>
JSFiddle
From MDN:
thead - A table element. The thead must appear after any caption or colgroup element, even implicitly defined, but before any tbody, tfoot and tr element.
Remove border-collapse: collapse and use border-top for TD and border-bottom for TABLE.
Live demo
Try this.
table {
width:736px;
border-collapse: collapse;
}
thead {
border-top: 2px solid #aaaaaa;
}
th {
border: 0;
padding: 12px 5px;
}
tbody {
border-top:0;
}
td {
padding: 10px 5px;
border-top: 1px solid #aaaaaa;
border-bottom: 1px solid #aaaaaa;
}
I had a table using -webkit-backface-visibility:hidden;, which was hiding border color, so to fix I used -webkit-backface-visibility:visible;.