There aren't any attributes like CellPadding or CellSpacing that will accomplish this for me and when I try to add css to the grid tr's to change the top and bottom margins, they are ignored. How do I add a little bit of spacing between each generated row from the gridview?
Margin doesn't work on table elements, use padding, or like in below sample, set a top and/or bottom border on your tr
table {
border-collapse: collapse;
}
td {
background: gray;
}
tr {
border: 0px solid white;
border-width: 10px 0;
}
<table>
<tr>
<td>
Hello there
</td>
</tr>
<tr>
<td>
Hello there
</td>
</tr>
<tr>
<td>
Hello there
</td>
</tr>
</table>
You can also achieve this using
border-collapse: separate;
border-spacing: 0 10px;
Snippet
table.grey-theme {
border-collapse: separate;
border-spacing: 0 10px;
margin: 50px;
}
table.grey-theme td {
border: solid #777 1px;
padding: 5px;
}
<table class="grey-theme">
<tr>
<td>Dogs</td>
<td>10</td>
</tr>
<tr>
<td>Cats</td>
<td>20</td>
</tr>
<tr>
<td>Parrots</td>
<td>30</td>
</tr>
</table>
Use it in asp:GridView like
<asp:GridView ID="PetGrid" runat="server" CssClass="grey-theme">
Related
When using border-top with border-collapse, the last row of table becomes smaller in height by border-width / 2 pixels. For example, with 2px border, the last row is 1px smaller; with 10px border, it is 5px smaller and so on...
Why does this happen and how can I fix it?
/* Just for styling. Writes each cell's height in it. */
document.querySelectorAll('td')
.forEach((cell) => {
cell.innerHTML = cell.offsetHeight + "px";
});
table {
border-collapse: collapse;
}
.t1 tr {
border-top: solid 2px black;
}
.t2 tr {
border-top: solid 100px black;
}
/* Just for styling */
td {
padding: 12px 40px;
color: white;
}
<h2>2px border</h2>
<table class="t1">
<tr style="background: cornflowerblue">
<td></td>
</tr>
<tr style="background: brown">
<td></td>
</tr>
<tr style="background: olive">
<td></td>
</tr>
</table>
<h2>100px border</h2>
<table class="t2">
<tr style="background: cornflowerblue">
<td></td>
</tr>
<tr style="background: brown">
<td></td>
</tr>
<tr style="background: olive">
<td></td>
</tr>
</table>
Update
The problem shows itself when you want to sort columns.
In a normal, static table, that 1px isn't a huge deal; nobody will notice it. But when you want to change the order of rows (by sorting), there is a "jump".
I have different tables in my page which should have different border, cellpadding etc. I can create many classes like,
.pad5 td {padding:5px}
and then using,
<table class="pad5">
But if I use 'table' is css, the style is applied to all tables. How can I achieve the result?
You can try to add an ID to each table and in css make reference with this ID like:
CSS & HTML:
#table1 tr td {
padding: 5px;
border: 4px solid #888;
}
#table2 tr td {
padding: 5px;
border: 4px solid red;
}
<table id="table1">
<tr>
<td>first content</td>
<td>second content</td>
</tr>
</table>
<table id="table2">
<tr>
<td>first content</td>
<td>second content</td>
</tr>
</table>
declare classes for each type of styling you want to create, and assign to the <table> in the html via the class attribute
css
.table1 {
...
}
.table2 {
...
}
html
<table class="table1">
...
</table>
<table class="table2">
...
</table>
You can give your tables class names also
Example HTML:
<table class="mytable">
<tr>
<td>My cell</td>
</tr>
</table>
<table class="anothertable">
<tr>
<td>My cell</td>
</tr>
</table>
Example CSS:
.mytable {
border: 1px solid black;
}
.anothertable {
border: 1px solid red;
}
The first table will have a 1px solid black border and the second table will have a 1px solid red border.
I found that if I don't use table at all in CSS it works.
e.g.- .cell {border-spacing:10px}
give each of them seperate ids. classes are for css which will be applied to a bunch of different objects, ids are for css which will be applied to specific objects
<table id="first_table"></table>
Why half of the left border on the first cell doesn't lie in a margin area of table?
It happens only for the cell in FIRST row:
In other rows, the half of the border sits in margin area as it should:
The dark border on the images is table container and table has margin-left set on 0px. I use collapse border model.
body{
margin-left:50px;
border:2px solid grey;
}
table{
border-collapse:collapse;
margin-left:0px;
}
.cellborder{
border-left:20px solid orange;
}
td{
background-color:gainsboro;
}
<table>
<tr>
<td class="cellborder">data1</td>
</tr>
<tr>
<td class="">data2</td>
</tr>
<tr>
<td>data3</td>
</tr>
</table>
It may be because <table> takes the first row as a role model for organizing the widths and stuff for the next ones. I was able to fix it by giving an empty <tr> in the first:
body {
margin-left: 50px;
border: 2px solid grey;
}
table {
border-collapse: collapse;
margin-left: 0px;
}
.cellborder {
border-left: 20px solid orange;
}
td {
background-color: gainsboro;
}
<table>
<tr></tr>
<tr>
<td class="cellborder">data1</td>
</tr>
<tr>
<td class="">data2</td>
</tr>
<tr>
<td>data3</td>
</tr>
</table>
Preview:
I am using ie 8.
I have the following CSS where I want to show the border for the outer table, but not the table nested inside one of the cells;
table#ScheduledLeaveCalendar
{
table-layout:fixed;
}
/* Calendar that shows annual leave */
#ScheduledLeaveCalendar
{
border-collapse:collapse;
}
#ScheduledLeaveCalendar td, #ScheduledLeaveCalendar th
{
font-size:0.8em;
border:1px solid #2906A6; /* dark blue */
}
#ScheduledLeaveCalendar th
{
width:30px;
font-size:0.9em;
text-align:center;
padding:5px 3px 4px 3px;
padding-top:5px;
padding-bottom:4px;
background-color:#6640EE; /* blue */
color:#ffffff;
}
#ScheduledLeaveCalendar td
{
padding: 0px;
margin: 0px;
}
#ScheduledLeaveCalendar table
{
border-collapse: collapse;
border: 0px;
margin: 0px;
padding: 0px;
}
This CSS gives me
The Markup is;
<table id="ScheduledLeaveCalendar">
<tr>
<th colspan="2"></th>
<th colspan="6">Oct 2011</th>
<th colspan="1"></th>
</tr>
<tr>
<th>F</th><th></th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th></th><th>M</th>
</tr>
<tr>
<th>14</th><th></th><th>17</th><th>18</th><th>19</th><th>20</th><th>21</th><th></th><th>24</th>
</tr>
<tr>
<td class="StandardCellHeight DefaultColour"></td>
<td class="StandardCellHeight DefaultColour"></td>
<td><table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%"><tr><td />
<td class="StandardCellHeight AnnualLeaveColour" />
</tr></table></td>
<td><table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%"><tr><td class="StandardCellHeight AnnualLeaveColour" />
<td />
</tr></table></td>
<td class="StandardCellHeight DefaultColour"></td>
<td class="StandardCellHeight DefaultColour"></td>
<td class="StandardCellHeight DefaultColour"></td>
<td class="StandardCellHeight DefaultColour"></td>
<td class="StandardCellHeight DefaultColour"></td>
</tr>
</table>
See http://jsfiddle.net/Dqm68/1/
You can use
#ScheduledLeaveCalendar td td {
border: 0;
}
which means the td elements that are nested in other td elements should have no border..
Demo at http://jsfiddle.net/Dqm68/5/
Simply add another line to remove the border from the nested table td.
#ScheduledLeaveCalendar table td {border:none}
http://jsfiddle.net/blowsie/Dqm68/3/
As you can see in this fiddle, http://jsfiddle.net/S8Bne/64/, I am trying to draw a box shadow around the table (just the outside out it). The approach that I've taken is to create a div with slightly larger height than the thead area and give it a box shadow. However, I can't quite get it positioned properly. How can I do so?
Any solutions are welcome.
This is happening because your thead is not inside the div.
I added some height to the div to show...
Problem: http://jsfiddle.net/jasongennaro/S8Bne/54/
Add this
-webkit-box-shadow:#8A0000 2px 2px 10px;
box-shadow:#8A0000 2px 2px 10px;
to
.geniusPicks table tr#picksHeading th
And it works.
Working Example: http://jsfiddle.net/jasongennaro/S8Bne/55/
So no need for the div
If you want to add shadow to thead without using div, try the following code
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
table thead{
display:block;
position:relative;
box-shadow: 0px 1px 3px 0px #cccccc;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
table tr{
display:table;
table-layout:fixed;
width:100%;
}
<table>
<thead>
<tr>
<th>Company</th>
<th>Owner</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfred Trading</td>
<td>Alfred Thomas</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Australia</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helena Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus</td>
<td>John Cook</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</tbody>
</table>