I am trying to create a html table and encounter an issue here.
I was hoping to specify one particular row to have no padding with CSS.
html
<table cellpadding="10" cellspacing="5">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>March</td>
<td>$810</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>March</td>
<td>$810</td>
</tr>
</table>
css
table, th, td {
border:solid 1px red;
}
table {
border-collapse: inherit;
border-spacing: 5px;
}
http://jsfiddle.net/3rL9dryp/1/
In jsFiddle, all rows in table has padding to upper rows. I want to keep the padding for each row but need to remove top padding to upper row for a single row (for example, third row). Is this doable?
Thanks a lot!
Here's an example of the code working. I added padding-top:100px to emphasize the difference.
http://jsfiddle.net/m704mxz6/1/
Change it to padding-top:0px; to achieve your goal.
You can use the CSS3 pseudo-selector :nth-child:
table tr:nth-child(3) td {
padding-top: 0;
}
Related
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
So it is pretty straight forward. I need a way to group cells together. Like a <div> or a <span> but none of them worked. <tbody> seemed like a good solution but it only works for table rows. Help!
If you're looking for a way to merge 2 o more cells in a row into one single cell, along with other "regular" cells (as you would do in a google|excel spreadsheet) in a way similar to this:
then you can use the colspan attribute for td elements, indicating how many cells are you merging:
<tr>
<td colspan=2> Merged Cell occupying 2 columns </td>
</tr>
<tr>
<td> Regular cell </td>
<td> Another cell in same row </td>
</tr>
Additionally, you can use the td[colspan] selector in css (combined with any parent selector of your choice) to refer to these merged cells.
Here's a working example:
/* Style for cells with any colspan attribute */
td[colspan] {
text-align: center;
}
/* No extra space between cells */
table {
border-collapse: collapse;
}
th, td {
border: 1px solid gray;
margin: 0;
padding: 3px 10px;
text-align: right;
}
<table>
<tr>
<th>Day</th>
<th>Invoice</th>
<th>Total</th>
</tr>
<tr>
<!-- this cell will occupy 3 columns -->
<td colspan=3>January</td>
</tr>
<tr>
<td>2</td>
<td>0348</td>
<td>248.35</td>
</tr>
<tr>
<td>7</td>
<td>0349</td>
<td>126.14</td>
</tr>
<tr>
<td>18</td>
<td>0350</td>
<td>821.99</td>
</tr>
<tr>
<td colspan=3>February</td>
</tr>
<tr>
<td>27</td>
<td>0351</td>
<td>643.50</td>
</tr>
</table>
You can add the html col tag to group the columns td.
.col-group-1 {
background-color: yellow;
}
.col-group-2 {
background-color: silver;
}
<table>
<colgroup>
<col class="col-group-1">
<col span="2" class="col-group-2">
</colgroup>
<tr>
<th>Name</th>
<th>City</th>
<th>Phone</th>
</tr>
<tr>
<td>Mary</td>
<td>New york</td>
<td>987654321</td>
</tr>
<tr>
<td>Magdalena</td>
<td>Los Angeles</td>
<td>123456789</td>
</tr>
</table>
</body>
</html>
Please check out the html col tag
and how to use them with css styling
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!