Google Table Charts - how to remove gradient from header row and set opacity for background in rows?

[Mateusz Dzierzecki]

I want to style my Google Table Chart, but I cannot set opacity/transparency to rows in Table.

I use 'cssClassNames': cssClassNames but opacity works only for text in row, not for background in row.

Morover I don't know how to remove gradient from header row.

How can I change it?

CSS:

  .row-style {
background-color: rgba(255,255,255,0.5);
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #BFD6E8;
border-bottom-width: 1px;
border-bottom-style: solid;
margin-bottom: .5%;
opacity: 0.3;

  .header-row-style {
background-color: rgba(22,77,104,.7) !important;
border-radius-top-left:10px;
border-radius-top-right:10px;
}

JS:

<script type="text/javascript">
      function drawTable(results, question_title) {

        var cssClassNames = {
        'headerRow': 'header-row-style',
        'tableRow': 'row-style',
        'oddTableRow': 'odd-row-style',

        };

        var options = {'showRowNumber': true, 'allowHtml': true, 'cssClassNames': cssClassNames,
            showRowNumber: false, allowHtml: true, alternatingRowStyle:true, width: '95%', height: '70%',
            backgroundColor: "transparent"};

        var data = new google.visualization.DataTable(results, question_title);
        data.addColumn('string', question_title);
        data.addRows(results);


        var table = new google.visualization.Table(document.getElementById('chart'));

        table.draw(data, options);

      }
    </script>