web2py: Increase font size of table names in smartgrid

Question

How and where do I increase the font size of table names in Smartgrid? (screenshot for reference, circled red)

Edit 1 The attachment is a screenshot of the view produced by this controller code:

def list_services():
    grid = SQLFORM.smartgrid(db.services
        , fields = [db.services.service_name,db.services.service_type]
    )
return locals()

view:

{{extend 'layout.html'}}
<style>
    tr:nth-child(even) {background: #CCC}
    tr:nth-child(odd) {background: #FFF}
</style>
{{=grid}}

Answer 1

One trick is to use the browser developer tools to inspect the surrounding HTML structure and class names and then create a CSS rule to achieve the desired formatting. In this case, you will find the table name embedded in the following HTML:

<div class="web2py_breadcrumbs">
  <ul class="">
    <li class="active w2p_grid_breadcrumb_elem">
      <a href="/path/to/grid">Table Name</a>
    </li>
  </ul>
</div>

So, you can create a CSS rule targeting the .web2py_breadcrumbs or .w2p_grid_breadcrumb_elem classes:

.web2py_breadcrumbs {
  font-size: 16px;
}