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>
Related
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 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 table of fixed width and height containing three rows and columns. Rows and columns are automatically equal size, but when I put innerHTML (or image) into table cell, cell with text inside expands at the cost of other columns. How to prevent table cells from expanding after inserting content inside? I've tried solutions from similar stack overflow questions, but nothing worked.
JS fiddle: https://jsfiddle.net/m20akmdx/14/
document.getElementById('8').innerHTML = 'R';
table {
width: 360px;
height: 360px;
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
text-align: center;
}
<table id="table">
<tr>
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
</tr>
<tr>
<td id="4"></td>
<td id="5"></td>
<td id="6"></td>
</tr>
<tr>
<td id="7"></td>
<td id="8"></td>
<td id="9"></td>
</tr>
</table>
Try using fixed table layout.
table {
table-layout: fixed;
...
}
And adding a no-break space into each cell.
td:after {
content: "\00A0";
}
document.getElementById('8').innerHTML = 'R';
table {
table-layout: fixed;
width: 360px;
height: 360px;
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
text-align: center;
}
td:after {
content: "\00A0";
}
<table id="table">
<tr>
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
</tr>
<tr>
<td id="4"></td>
<td id="5"></td>
<td id="6"></td>
</tr>
<tr>
<td id="7"></td>
<td id="8"></td>
<td id="9"></td>
</tr>
</table>
Set the width and height of the td elements rather than a width and height for the table and you will get the desired behaviour.
document.getElementById('8').innerHTML = 'Raaaa';
table{
border: 1px solid black;
border-collapse: collapse;
}
td{
width:120px;
height:120px;
border: 1px solid black;
text-align: center;
}
<table id="table">
<tr>
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
</tr>
<tr>
<td id="4"></td>
<td id="5"></td>
<td id="6"></td>
</tr>
<tr>
<td id="7"></td>
<td id="8"></td>
<td id="9"></td>
</tr>
</table>
set a max-width
td{
border: 1px solid black;
text-align: center;
max-width: 200px;
}
or
td{
border: 1px solid black;
text-align: center;
max-width: 30%;
}
You will need to specify the td width, and maybe the height as well:
https://jsfiddle.net/m20akmdx/23/
document.getElementById('8').innerHTML = 'my long text gets wrapped';
table {
width: 360px;
height: 360px;
border: 1px solid black;
border-collapse: collapse;
}
td {
width: calc(100% / 3);
height: calc(100% / 3);
border: 1px solid black;
text-align: center;
}
<table id="table">
<tr>
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
</tr>
<tr>
<td id="4"></td>
<td id="5"></td>
<td id="6"></td>
</tr>
<tr>
<td id="7"></td>
<td id="8"></td>
<td id="9"></td>
</tr>
</table>
What is the most elegant way to remove the up down border?
table {
border: 1px solid #CCC;
border-collapse: collapse;
text-align: center;
}
.noborder {
border: none;
width: 50px;
}
<br>
<table border='1' width='500'>
<tr>
<th>Product</th>
<th>Description</th>
<th>Price</th>
<th>Quantity</th>
<th class="noborder"> </th>
<th>Delete</th>
</tr>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
<td>DD</td>
<td class="noborder"> </td>
<td>FF</td>
</tr>
</table>
JSfiddle Demo
You need to apply border for the th and td elements and not for the entire table. Setting border for the table will not be affected by the noborder class applied on the child elements.
Updated JSfiddle
table {
border-collapse: collapse;
text-align: center;
}
.noborder {
border: none;
width: 50px;
}
th,
td {
border: 1px solid #CCC;
}
<br>
<table width='500'>
<tr>
<th>Product</th>
<th>Description</th>
<th>Price</th>
<th>Quantity</th>
<th class="noborder"> </th>
<th>Delete</th>
</tr>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
<td>DD</td>
<td class="noborder"> </td>
<td>FF</td>
</tr>
</table>
I'd say specify only the borders you need.
If you don't want the top and bottom... only set the left and right border.
table {
border-left: 1px solid #000;
border-left: 1px solid #000;
}
If you're trying to remove only the top and bottom of that blank column, you could try setting the border for each column separately, thus allowing the removal of the desired border.
td {
border: 1px solid #000;
}
#blank-td {
border: none /* or even 1px solid #fff */;
}
Just mess around with it
More info: http://www.w3schools.com/css/css_border.asp