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/
Related
In section, I have declared that all tables should have 1px black border. However, later on a need comes up wherein I can use only bottom border for one specific table.
I created a separate class (table.botborder) and put border:0px in it to remove inheritance but its not working. In browser, I see outside border around the table. Can someone please help here how to I remove this outside border?
<!DOCTYPE html>
<head>
<style>
table,th,td{
border:1px solid black;
border-collapse:collapse;
}
table.botborder table,th,td{
border:0px;
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<table class="botborder">
<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>
you're not using the CSS selectors correctly due to which the desired styles are not applying
<style>
table,th,td{
border:1px solid black;
border-collapse:collapse;
}
.botborder, .botborder tr, .botborder tr th, .botborder tr td{
border: 0;
}
.botborder tr td{
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<table class="botborder">
<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>
Please check your CSS selectors. This should fix the issue for now:
<style>
table, th, td{
border: 1px solid black;
border-collapse: collapse;
}
.botborder, th, td{
border: none;
border-bottom: 1px solid #ddd;
}
</style>
Let's say I've a list of data in table.
Is there any way to achieve the below format using CSS?
I tried the below CSS but not the correct one:
table tr td:nth-child(2){ border-top: solid 1px #ccc; }
Here's my example
https://codepen.io/w3nta1/pen/QrzVgb
You could give a try to extend the border via an absolute pseudo element:
table {
border: none;
border-spacing:0;
width:200px;
overflow:hidden;/* hide pseudo overflowing */
}
table tr td + td {
border-top: solid 1px #ccc;
position:relative;/* make it the coordonates reference for the absolute positionned pseudo */
}
table tr td + td:before {
content:'';
position:absolute;
width:100%;
right:100%;
top:-1px;/* climb up the size of parent's border */
border-top: inherit;/* draw same border */
}
<table>
<tbody>
<tr>
<td>01</td>
<td rowspan="3">ABC</td>
</tr>
<tr>
<td>02</td>
</tr>
<tr>
<td>03</td>
</tr>
<tr>
<td>04</td>
<td>DEF</td>
</tr>
<tr>
<td>05</td>
<td>GHI</td>
</tr>
<tr>
<td>06</td>
<td rowspan="2">JKL</td>
</tr>
<tr>
<td>07</td>
</tr>
<tr>
<td>08</td>
<td>MNO</td>
</tr>
<tr>
<td>09</td>
<td>PQR</td>
</tr>
<tr>
<td>10</td>
<td rowspan="2">STU</td>
</tr>
<tr>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td>VWX</td>
</tr>
<tr>
<td>13</td>
<td>YZ</td>
</tr>
</tbody>
</table>
https://codepen.io/gc-nomade/pen/wjRYqg
you can use only this css for look like you want table
table tr td + td {
border-top: solid 1px #ccc;
position:relative;
}
table tr td + td:before {
content:'';
position:absolute;
width:100%;
right:100%;
top:-1px;
border-top: solid 1px #ccc;
}
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">
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:
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>