It's ok ...:
but:
Why it? I'm developing a web site, and it's a trouble, a really trouble.
The code:
<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
<!-- Table goes in the document BODY -->
<table class="gridtable">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>
Why it?
It looks like you are more zoomed in on the 1st table than in the 2nd. You can try zooming in on the second, and the bordering should reappear.
Related
I have two different tables on separate pages, and I need to specify a certain style to each one. This is my code (It works with separate stylesheets, but I need it to work on one):
Here is a snippet of my tables and the CSS:
body {
font-family: verdana;
}
/* Table 1 css */
.table1,
th,
td {
color: #030099;
border: 1px solid black;
border-width: 0px 1px 1px 1px;
font-size: 110%;
}
/* Table 2 css */
.pcsetup,
th,
td {
color: #030099;
border: 1px solid black;
border-width: 0px 1px 1px 1px;
font-size: 110%;
}
.tc1 {
background-color: white;
border: 2px solid black;
padding: 5px;
}
<h4>table 1</h4>
<table cellpadding="10" cellspacing="0" class="table1">
<caption class="tc1"><strong>My PC Setup</strong></caption>
<tr>
<th>Component</th>
</tr>
<tr>
<td><strong>CPU:</strong></td>
</tr>
<tr>
<td><strong>RAM:</strong></td>
</tr>
</table>
<h4>table 2</h4>
<table cellpadding="10" cellspacing="0" class="pcsetup">
<caption class="tc1"><b>PC Setup</b></caption>
<tr>
<th>Component</th>
</tr>
<tr>
<th><strong>CPU</strong></th>
</tr>
<tr>
<th><strong>RAM</strong></th>
</tr>
</table>
How can I differentiate between the two?
This is a crappy issue and I am truly sorry to ask this. But I have been programming PHP for hours and now trying to display it on a simple html layout. I need more coffee and my eyes are tired, woke up too early...
Anyway the issue is, that for some reason my css styles that should affect the text stylings has no effect what so ever on the layout. Which is a bit odd that the border settings and paddings do work, but font-weight or the background-color does not.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Visitor logs</title>
<style>
html {
}
body {
}
.first_row {
font-weight: bold;
background-color: red;
}
td {
padding: 4px 8px 4px 4px;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr class="first_row">
<td>IP-address</td>
<td>Last visited</td>
<td>Rough location</td>
</tr>
</table>
</body>
</html>
Add this code:
table {
border-collapse: collapse;
}
table {
border-collapse: collapse;
}
.first_row {
font-weight: bold;
background-color: red;
}
td {
padding: 4px 8px 4px 4px;
border-bottom: 1px solid black;
}
<table>
<tr class="first_row">
<td>IP-address</td>
<td>Last visited</td>
<td>Rough location</td>
</tr>
<tr class="second_row">
<td>IP-address2</td>
<td>Last visited2</td>
<td>Rough location2</td>
</tr>
</table>
See This Also:
table {
border-collapse: collapse;
}
.first_row {
font-weight: bold;
background-color: red;
}
tr:not(.first_row) td:not(:first-child) {
border-left: 1px solid #000;
}
td {
padding: 4px 8px 4px 4px;
border-bottom: 1px solid black;
}
<table>
<tr class="first_row">
<td>IP-address</td>
<td>Last visited</td>
<td>Rough location</td>
</tr>
<tr class="second_row">
<td>IP-address2</td>
<td>Last visited2</td>
<td>Rough location2</td>
</tr>
</table>
You can used thead with th for heading of table
table {
border-collapse: collapse;
}
table th {
font-weight: bold;
background: red;
padding:4px;
border-bottom: 1px solid black;
}
td {
padding: 4px 8px 4px 4px;
border-bottom: 1px solid black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Visitor logs</title>
</head>
<body>
<table>
<thead>
<tr>
<th>IP-address</th>
<th>Last visited</th>
<th>Rough location</th>
</tr>
</thead>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</table>
</body>
</html>
Add cellspacing="0" cellpadding="0" in table tag or add table{border-collapse: collapse;} in your css.
.first_row {
font-weight: bold;
background-color: red;
}
td {
padding: 4px 8px 4px 4px;
border-bottom: 1px solid black;
}
<table cellspacing="0" cellpadding="0">
<tr class="first_row">
<td>IP-address</td>
<td>Last visited</td>
<td>Rough location</td>
</tr>
</table>
I want to override the background of a table cell with a CSS definition, using class:
<table class="adminTable">
<thead>
<tr>
<th>Title</th>
<th align="center" width="50">%</th>
<th align="center">Actions</th>
</tr>
</thead>
<tbody>
<tr class="">
<td>Test</td>
<td align="center" class="IN_PROGRESS">27%</td>
<td align="center" width="175">
<a class="rounded-button" href="/admin/workflows/1/summary">Show</a>
<a class="rounded-button" href="/workflows/delete?id=1" class="button">Delete</a>
</td>
</tr>
</tbody>
</table>
The 'IN_PROGRESS' value varies with the different rows, and provides a colour indicating the status.
This is in my CSS style sheet:
.adminTable {
width: 100%;
border-width: 1px;
border-spacing: 2px;
border-style: outset;
border-color: gray;
border-collapse: separate;
background-color: WhiteSmoke ;
}
.adminTable th {
border-width: 1px;
padding: 5px;
border-style: dotted;
border-color: gray;
background-color: white;
-moz-border-radius: 10px;
}
.adminTable td {
border-width: 1px;
padding: 5px;
border-style: dotted;
border-color: gray;
background-color: white;
-moz-border-radius: 10px;
}
.IN_PROGRESS{
color:#FFFFFF;
background: DarkOrange;
}
Most of the time I just want the white background (and use this style all over my application), but here, and another few places I need to colour it. Is there an easy way to do this without having to duplicate the styles?
The problem is that .adminTable td is more specific (score {0}{1}{1}) than .IN_PROGRESS (score {0}{1}{0}).
Try td.IN_PROGRESS (score {0}{1}{1} but because it appears later in the CSS file it will win out) instead.
You should give complete css hierarchy for .IN_PROGRESS.
It will go as follows
.adminTable td.IN_PROGRESS {
color:#FFFFFF;
background: DarkOrange;
}
I am a bit new to CSS and am stuck with this small problem. I want the background color of a table row to change when I hover over that row. I have written the code below but somehow only the hovering part does not seem to work. I have tried viewing in Google Chrome v24 and Firefox v18. Could anyone say where am I going wrong.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
table.contacts
{
width: 580px;
background-color: #fafafa;
border: 1px #000000 solid;
border-collapse: collapse;
border-spacing: 0px;
}
.contacts th
{
background-color: #99CCCC;
font-family: Verdana;
text-align: left;
border-bottom:1px #000000 solid;
font-weight: bold;
font-size: 12px;
padding:4px;
margin:4px;
color: #404040;
}
.contacts td
{
border-bottom: 1px #6699CC dotted;
text-align: left;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: .7em;
color: #404040;
background-color: #fafafa;
padding:4px;
margin:4px;
}
table tr:hover
{
background-color:blue;
}
</style>
</head>
<body>
<table class="contacts" cellspacing="2">
<tr>
<th>Subscription Scheme</th>
<th>Amount</th>
</tr>
<tr>
<td>Monthly Subscription(Family)</td>
<td>Rs 200</td>
</tr>
<tr>
<td>Monthly Subscription(Individuals)</td>
<td>Rs 100</td>
</tr>
<tr>
<td>Monthly Subscription(Company)</td>
<td>Rs 500</td>
</tr>
<tr>
<td>Yearly Subscription(Family)</td>
<td>Rs 2000</td>
</tr>
<tr>
<td>Yearly Subscription(Company)</td>
<td>Rs 5000</td>
</tr>
<tr>
<td>Festival Subscription</td>
<td>Rs 1000</td>
</tr>
</table>
</body>
</html>
It is working, you're just not seeing it work because the td element's background-color is hiding the background-color of the tr element. Instead use:
tr:hover td {
background-color: blue;
}
The mouseover function is not working with Google Chrome. Working fine with Firefox and IE. While mouseover the border bottom is not disappearing. But if removing border-collapse: collapse it's working fine. Why is this? Any solution.
css:
html, body{
margin: 0;
padding: 0;
}
.table {
border-collapse: collapse;
}
.border {
border-style: solid;
border-width: 1px;
border-color: #000000;
background-color: #deecf9;
border-left: 0px;
border-right: 0px;
}
.border1 {
border-style: solid;
border-width: 1px;
border-color: #000000;
background-color: #deecf9;
border-left: 0px;
border-right: 0px;
}
.border2 {
border-style: solid;
border-width: 1px;
border-color: #000000;
background-color: #FFFFFF;
border-left: 0px;
border-right: 0px;
border-bottom: 0px;
padding: 1px;
}
Table:
<table width="1024" border="0" align="center" bgcolor="#FFFFFF" class="table">
<tr>
<td height="9" colspan="4" class="border"></td>
</tr>
<tr>
<td class="border1" onmouseover="this.className='border2'" onmouseout="this.className='border1'"> </td>
<td class="border1" onmouseover="this.className='border2'" onmouseout="this.className='border1'"> </td>
<td class="border1" onmouseover="this.className='border2'" onmouseout="this.className='border1'"> </td>
<td class="border1" onmouseover="this.className='border2'" onmouseout="this.className='border1'"> </td>
</tr>
</table>
Do it like this: put an transparent border on your normal state elements.
When the :hover is applied the size of the border changes the size the element takes up.
eg:
.border1
{
border:1px solid #000000;
border-left:1px solid transparent;
border-right:1px solid transparent;
background-color: #FFFFFF;
}
.border1:hover
{
border:1px solid transparent;
border-top:1px solid #000000;
padding:1px;
background-color: #deecf9;
}
Your HTML should be something like:
<table width="1024" align="center" bgcolor="#FFFFFF" class="table">
<tr>
<td height="9" colspan="4" class="border"></td>
</tr>
<tr>
<td class="border1"> </td>
<td class="border1"> </td>
<td class="border1"> </td>
<td class="border1"> </td>
</tr>
</table>
No need to work with the mouseovers as an attribute, just use css.
Edit: i've noticed that you're using the css border-collapse property. This sets whether the table borders are collapsed into a single border or detached as in standard HTML. Try removing this line or set it to "separate", maybe this will work.