I have a html table with CSS. Currently all the cells have a white border around them, I am having trouble removing the column borders for each cell so the rows are divided by a white line. A similar table to what I'm trying to achive can be seen at http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/, look at example 3 (the top table in this example). So far my code looks like:
<html>
<head>
<style type="text/css">
table, td, th
{
font-family:calibri;
border:collapse:collapse;
}
th
{
background-color:#b9c9fe;
color:#006add;
}
td
{
background-color:#e8edff;
color:#666699;
}
</style>
<body>
<table cellpadding="5" >
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Looks like there's a slight error in the table style: it says border:collapse:collapse where it should be border-collapse: collapse;.
From there, you'll just need to add border-bottom: 1px solid #fff; to the table, th, td block, and you should be all set!
Related
I have a table and I want to style spacing for every row in the table. I want the gap after the first row to be small (for example 1px) and 20px after the second row. Margin and padding does not seem to work. I also tried cellspacing = 20 but it sets spacing for every cell and I want to style gaps after the rows. How can I achieve that?
This snippet is what I currently have and what I tried :)
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table cellspacing="20">
<tr style = "margin-bottom: 1px; padding-bottom: 1px">
<th style = "padding-bottom: 1px">Month</th>
<th style = "padding-bottom: 1px">Savings</th>
</tr>
<tr>
<td style = "margin-bottom: 20px">January</td>
<td style = "margin-bottom: 20px">$100</td>
</tr>
<tr style = "border-collapse: separate; border-spacing: 1px">
<td>February</td>
<td>$20</td>
</tr>
<tr>
<td>June</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
padding is not allowed on table row so you can apply padding to td or you can also add div inside td and give div tag margin bottom.
here, I have taken table inside td and gave margin to table
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="2" style="border:0px;">
<table style="margin-bottom:10px;border:0px;">
<tr>
<td>Month</td>
<td>Savings</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="border:0px;">
<table style="width:100%;margin-bottom:10px;border:0px;">
<tr>
<td >January</td>
<td>$100</td>
</tr>
</table>
</td>
</tr>
<tr style = "border-collapse: separate; border-spacing: 20px">
<td>February</td>
<td>$20</td>
</tr>
<tr>
<td>June</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
I want the gap after the first row to be small (for example 1px) and
20px after the second row.
You can achieve it by using padding on the td, and with pseudo selectors.
Something like this:
table tr td {padding-top: 20px;}
table tr:nth-of-type(2) td {padding-top: 1px;}
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$20</td>
</tr>
<tr>
<td>June</td>
<td>$50</td>
</tr>
</table>
I am trying to add an extra table cell to a table, that isn't attached to a column. It just sticks out of the table like a 'bump' I not entirely sure what kind of styling I would need to achieve this.
What I would like it to look like this:
My code:
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td style="border-style:none">extra</td>
</tr>
</table>
I would think I need to add an empty <th> and remove the border from it and then add it to the last cells in the table?
I think you want to do like below:
table{
border-collapse: collapse;
border-spacing: 0;
}
table tr td:last-child{
border: none;
}
table td, table th{
border: 1px #666 solid;
}
table tr:last-child td:last-child{
border: 1px #666 solid;
}
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<td></td>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td></td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>extra</td>
</tr>
</table>
With javascript, you can do it like (of course you would change nth-child(3) to your target column):
var row = document.createElement('td')
row.innerHTML = 'teste'
document.querySelector('table tr:nth-child(3)').append(row)
<table id="test">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td style="border-style:none">extra</td>
</tr>
</table>
Maybe I am being too picky. I want to put cell padding in some tables but not others, without editing every single td element. I would like to make it html5 compliant, which means not using the cellpadding property of the table. But I would like something equivalent to cellpadding - ie something I can apply to the properties of a whole table, on a table by table basis.
To make it even more complicated, I want collapsed borders, which I think rules out using the cell spacing property. Is there something tricky I can do there?
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
.cell-pad th,.cell-pad td{padding:10px}
</style>
</head>
<body>
<p>Table without cellpadding:</p>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with cellpadding:</p>
<table cellpadding="10">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with css:</p>
<table class="cell-pad">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</body>
</html>
You can solve these problems using CSS.
table.table-big td {
padding: 10px;
}
table.table-collapse {
border-collapse: collapse;
}
table td {
border: 1px solid #333;
}
<table class="table-big table-collapse">
<tr>
<td>foo</td>
<td>bar</td>
</tr>
</table>
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
padding on the cell level can be used to create spacing between data and border.
border-collapse on the table can be used to collapse or separate borders.
You can create classes with these styles so you keep direct control on which table gets which styling. In my example the second table did not get any styling.
How to push the second row's td to the right? I know I can simply add one more empty td but I want to produce cleaner markup. Is there any css attribute to avoid that?
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>$100</td>
</tr>
</table>
You can do that with a pseudo element, like this, CSS only, no change in the markup
What happens here is that when the pseudo renders it will render as an anonymous table cell, hence push the existing one to the right in the same way the <td></td> markup would.
table, th, td {
border: 1px solid black;
}
table tr:nth-child(3):before {
content: '';
}
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>$100</td>
</tr>
</table>
The best way would be to produce the extra <td></td> before the $100 cell. If you insist on not using the extra <td></td>, try <td colspan="2" style="text-align:right;">$100</td>
I want to hide the border for a specific rows of a table.How to do it?
Any Idea?
Sample code is Highly Appreciated.
Use the CSS property border on the <td>s following the <tr>s you do not want to have the border.
In my example I made a class noBorder that I gave to one <tr>. Then I use a simple selector tr.noBorder td to make the border go away for all the <td>s that are inside of <tr>s with the noBorder class by assigning border: 0.
Note that you do not need to provide the unit (i.e. px) if you set something to 0 as it does not matter anyway. Zero is just zero.
table, tr, td {
border: 3px solid red;
}
tr.noBorder td {
border: 0;
}
<table>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr class="noBorder">
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>A3</td>
<td>A3</td>
</tr>
</table>
Here's the output as an image:
I use this with good results:
border-style:hidden;
It also works for:
border-right-style:hidden; /*if you want to hide just a border on a cell*/
Example:
<style type="text/css">
table, th, td {
border: 2px solid green;
}
tr.hide_right > td, td.hide_right{
border-right-style:hidden;
}
tr.hide_all > td, td.hide_all{
border-style:hidden;
}
}
</style>
<table>
<tr>
<td class="hide_right">11</td>
<td>12</td>
<td class="hide_all">13</td>
</tr>
<tr class="hide_right">
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr class="hide_all">
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
Here is the result:
Add programatically noborder class to specific row to hide it
<style>
.noborder
{
border:none;
}
</style>
<table>
<tr>
<th>heading1</th>
<th>heading2</th>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
</tr>
/*no border for this row */
<tr class="noborder">
<td>content1</td>
<td>content2</td>
</tr>
</table>
You can simply add these lines of codes here to hide a row,
Either you can write border:0 or border-style:hidden; border: none or it will happen the same thing
<style type="text/css">
table, th, td {
border: 1px solid;
}
tr.hide_all > td, td.hide_all{
border: 0;
}
}
</style>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr class= hide_all>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
running these lines of codes can solve the problem easily