Making table headers opaque

[rishu oberoi]

Attached is the image of my the google tables I am using. 

How can I make the table headers opaque? 

I tried the opacity attribute but does not work. 

Thanks!

Rishu

[rishu oberoi]

Any idea about this? As you can see in the image, the vertical scrollbar has been used to scroll down which is when the header text and the cell text got on top of each other. 

This is something I want to avoid. 

[Daniel LaLiberte]

Rishu,

We can't tell much from an image.  It would be far better if you could point us at a web page that demonstrates the problem you are seeing so we could check out what is happening.  

But my guess is that you have local css that is interfering with assumptions made by the Table chart.    If you are using the supported mechanisms to customize the style, we would like to find out what you are doing that causes a problem. 

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/b7f58fa5-42db-46c6-acfe-6988dcdb9b43%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Rishu Oberoi]

Here is the generated html tags, followed by css:

<div class="panel panel-warning" style="width: 520px; margin: auto;">

<div class="panel-heading" style="background-color: rgb(1, 116, 223);">

<div class="panel-body">

<div id="poi_wfc_core_stats_table" style="width: 500px; height: 220px;">

<div class="google-visualization-table" style="position: relative; max-width: 100%; max-height: 100%; width: 99.9%;">

<div style="position: relative; overflow: auto; max-width: 100%; max-height: 100%; width: 100%; height: 100%;">

<table class="google-visualization-table-table" cellspacing="0" style="width: 100%;">

<thead>

<tr class="datagrid datagrid-header">

<th class="datagrid-header-cell unsorted">

Fallout Code

<span class="google-visualization-table-sortind"/>

</th>

<th class="datagrid-header-cell unsorted">

<th class="datagrid-header-cell unsorted">

<th class="datagrid-header-cell unsorted">

</tr>

</thead>

<tbody>

</table>

</div>

</div>

</div>

</div>

</div>

</td>

CSS:

datagrid-header{

background-color: black;

border-bottom: 1px solid white;

opacity: 1;

}

.datagrid-header-cell{

color: white;

font-size: 12px;

font-weight: bold;

text-align: center;

}

.rotate {

     -moz-transform: rotate(-90.0deg);  /* FF3.5+ */

       -o-transform: rotate(-90.0deg);  /* Opera 10.5 */

  -webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */

             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */

         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */

}

.datagrid{

font-size: 10px;

color: white;

min-width:35px;

max-width: 150px;

word-break: break-all;

word-wrap: break-word;

}

.datagrid-row{

background-color: #3f3f3f;

}

.datagrid-odd{

background-color: #333333;

}

.datagrid-hover{

background-color: orange;

}

.datagrid-selected{

    background-color: #0174DF;

}

.detailTextArea{

border:none;

font-size:12px;

font-family:'Courier New';

color:white;

background-color:#333333;

}

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/Ka328H9GrsU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJMTVPst9kUEP-gQgjKpM%3D4xQYGLyjkbyLWHGciTE86w8Q%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

--

Regards
Rishupreet 

[Rishu Oberoi]

Also, 

 var table_options = {

  'cssClassNames': tableCSSClassNames,

  'allowHtml': true,

  'showRowNumber': false,

  'width':'99.9%',

  'alternatingRowStyle':true,

  'style': 'font-size:16px;'

};

 var tableCSSClassNames= {

  'headerRow': 'datagrid datagrid-header',

  'headerCell' : 'datagrid-header-cell',

  'tableCell' : 'datagrid',

  'tableRow' : 'datagrid-row',

  'oddTableRow': 'datagrid datagrid-row datagrid-odd',

  'hoverTableRow' : 'datagrid-hover',

  'selectedTableRow' : 'datagrid-selected'

  };

--

Regards
Rishupreet