Need some help with a visualforce table with css

Hi,

For a client I need to create a simple table with the most important reports of the organisation.
The idea is to create a tabbed visualforce page, so the user can choose between: Accountmanagement, Salesmanagement and Targets

See code:

<apex:page >
    <apex:tabPanel >
        <apex:tab label="Accountmanagement reports">
            <apex:include pageName="NAME OF VF PAGE for accountmanagement"/>
        </apex:tab>
        <apex:tab label="Salesmanagement reports">
            <apex:include pageName="NAME OF VF PAGE for salesmanagement"/>
        </apex:tab>
        <apex:tab label="Salesmanagement targets">
            <apex:include pageName="NAME OF VF PAGE for targets"/>
        </apex:tab>
    </apex:tabPanel>
</apex:page>

For the table I've created a html page with css style. It's probably not the correct way to include css style, but the page is working.
But when I place this page into the section <apex:include pageName="NAME OF VF PAGE for accountmanagement"/> the complete page including the tab page is taking over the css style and it's not looking how it supposes to...

This is the code of one of the vf pages:

<apex:page standardstylesheets="false" showheader="false">
<html lang="en">
<head>
<title>Simple Table</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
/* For zebra striping */
$("table tr:nth-child(odd)").addClass("odd-row");
/* For cell text alignment */
$("table td:first-child, table th:first-child").addClass("first");
/* For removing the last border */
$("table td:last-child, table th:last-child").addClass("last");
});
</script>
<style type="text/css">
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
margin:0;
padding:0;
font:12px/15px "Helvetica Neue",Arial, Helvetica, sans-serif;
color: #555;
background:#f5f5f5 url(bg.jpg);
}
a {color:#666;}
#content {width:65%; max-width:690px; margin:6% auto 0;}
/*
Pretty Table Styling
CSS Tricks also has a nice writeup: http://css-tricks.com/feature-table-design/
*/
table {
overflow:hidden;
border:1px solid #d3d3d3;
background:#fefefe;
width:70%;
margin:5% auto 0;
-moz-border-radius:5px; /* FF1+ */
-webkit-border-radius:5px; /* Saf3-4 */
border-radius:5px;
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
th, td {padding:18px 28px 18px; text-align:center; }
th {padding-top:22px; text-shadow: 1px 1px 1px #fff; background:#e8eaeb;}
td {border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;}
tr.odd-row td {background:#f6f6f6;}
td.first, th.first {text-align:left}
td.last {border-right:none;}
/*
Background gradients are completely unnecessary but a neat effect.
*/
td {
background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);
background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));
}
tr.odd-row td {
background: -moz-linear-gradient(100% 25% 90deg, #f6f6f6, #f1f1f1);
background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f1f1f1), to(#f6f6f6));
}
th {
background: -moz-linear-gradient(100% 20% 90deg, #e8eaeb, #ededed);
background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#ededed), to(#e8eaeb));
}
/*
I know this is annoying, but we need additional styling so webkit will recognize rounded corners on background elements.
Nice write up of this issue: http://www.onenaught.com/posts/266/css-inner-elements-breaking-border-radius
And, since we've applied the background colors to td/th element because of IE, Gecko browsers also need it.
*/
tr:first-child th.first {
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px; /* Saf3-4 */
}
tr:first-child th.last {
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px; /* Saf3-4 */
}
tr:last-child td.first {
-moz-border-radius-bottomleft:5px;
-webkit-border-bottom-left-radius:5px; /* Saf3-4 */
}
tr:last-child td.last {
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-right-radius:5px; /* Saf3-4 */
}
</style>
</head>
<body>
<div style="margin-left: 0px; width: 1166px;" id="content">
<table cellspacing="0">
<tbody>
    <tr>
      <th style="width: 103px;">Description</th>
      <th style="width: 9px;">Total</th>
      <th style="width: 60px;">Unit 1</th>
      <th style="width: 60px;">Unit 2</th>
      <th style="width: 60px;">Unit 3</th>
      <th style="width: 60px;">Unit 4</th>
      <th style="width: 60px;">Unit 5</th>
      <th style="width: 60px;">Unit 6</th>
      <th style="width: 60px;">Unit 7</th>
      <th style="width: 60px;">Unit 8</th>
    </tr>
    <tr>
      <td style="font-weight: bold; width: 103px;">Opps
end of contract</td>
      <td style="width: 9px;"><a
href="https://eu3.salesforce.com/000"
target="_blank">Sales</a></td>
      <td style="width: 60px;"><a
href="https://eu3.salesforce.com/000"
target="_blank">Sales</a><br></br>
-
      <span style="font-size: small; font-family: verdana,geneva;"></span><a
href="https://eu3.salesforce.com/000"
target="_blank">Account</a></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
    </tr>
    <tr>
      <td style="font-weight: bold; width: 103px;">Expected
tenders</td>
      <td style="width: 9px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
    </tr>
    <tr>
      <td style="font-weight: bold; width: 103px;">Open
opps</td>
      <td style="width: 9px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
    </tr>
    <tr>
      <td style="font-weight: bold; width: 103px;">Opps
lost</td>
      <td style="width: 9px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
    </tr>
    <tr>
      <td style="font-weight: bold; width: 103px;">Opps
won</td>
      <td style="width: 9px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
      <td style="width: 60px;"></td>
    </tr>
    <tr>
      <td style="width: 103px;"><span
style="font-weight: bold;">Dashboard</span></td>
      <td style="width: 9px;"></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
</tbody>
</table>
</div>
</body>
</html>

</apex:page>

I probably need to add this line: <apex:stylesheet value="{URLFOR($Resourse.Style_table, 'Style_table.css')}"/> somehow....
Style_table is the css zipfile i've added to static resources.

Can anyone please help me, I'm a very beginner in vf.

thanks!

February 7, 2014
·
Answer
·
Like
0
·
Follow
1

ReidC
I think you probably hit the nail on the head -- simplify your CSS first (do you really need to declare a margin 0 for the label element?), and then unify it so you have a single css included at the top of the page. FWIW, just looking at your sample page, you have a lot of HTML elements for TD etc., that are sometimes more easily rendered using VF apex:dataTable components. Hope that helps.

February 7, 2014
·
Like
0
·
Dislike
0

Juul
Thanks for your reply. It's because I'm just starting to use VF and still using a html tool to create the pages...
I think I'm in a dead end with the css style. Perhaps I need to create tables without css style (but it looks much nicer :).

February 7, 2014
·
Like
0
·
Dislike
0

ReidC
FWIW I'm a big fan of creating the simplest possible example when I'm learning a new tech. Helps me focus on one thing.

February 7, 2014
·
Like
1
·
Dislike
0

Juul
One more question

When thinking in simple solutions..... is it possible to add something in this code that it doesn't take over the css style of the included vf pages?

<apex:page >
    <apex:tabPanel >
        <apex:tab label="Accountmanagement reports">
            <apex:include pageName="NAME OF VF PAGE for accountmanagement"/>
        </apex:tab>
        <apex:tab label="Salesmanagement reports">
            <apex:include pageName="NAME OF VF PAGE for salesmanagement"/>
        </apex:tab>
        <apex:tab label="Salesmanagement targets">
            <apex:include pageName="NAME OF VF PAGE for targets"/>
        </apex:tab>
    </apex:tabPanel>
</apex:page>

February 7, 2014
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

Need some help with a visualforce table with css

You need to sign in to do that.