Table Styling

leadoptimize · October 2015

I have some tables at http://dev.thinkreliability.com/root-cause-analysis/education-for-root-cause-analysis/company-case-study-webinar/

Please reference the first table under the heading "What is Covered in the Webinar?" It has the following problems:

The top row turns while when hovered, instead of blue like all other rows
I have a border set in the html, but the border is not showing up on the page
I have cell padding set, but it is not showing on the page.

The code for it is as follows. Can you please tell me what I need to do to get the table to show correctly.

<tbody>

<tr>

<td><strong><span style="text-decoration: underline;">Incident Review (15 min)</span>:</strong>

Discuss the details of the incident including the causes, evidence, action items and takeaways.</td>

</tr>

<tr>

<td><strong><span style="text-decoration: underline;">Investigation Process (15 min)</span>:</strong>

Discuss how the investigation was conducted using the Cause Mapping approach. Who was involved, amount of time, how the Cause Map evolved, other tools that were incorporated. We will also discuss frustrations, prevention focus, lessons learned and much more.</td>

</tr>

<tr>

<td><strong><span style="text-decoration: underline;">Question and Answer (15 min)</span>:</strong>

Webinar attendees can submit questions about the incident itself or the investigation which will be answered on the webinar.</td>

</tr>

</tbody>

</table>

Albert · October 2015

Hi,

please look at http://forum.muffingroup.com/betheme/discussion/453/how-to-make-a-plain-table where we explained how to reset default styles for tables.

Thanks!

leadoptimize · October 2015

I tried the css from that forum post:

table tr:first-child td { background: none; }
table tr:hover td { color: #6E6262; }
table tr td { border: none; text-align: left; }
table tr:nth-child(2n) td { background: none !important; }

But it still didn't make it look and function like the demo tables at http://themes.muffingroup.com/betheme/shortcodes/content-blocks#table

Is the css code on that forum post you referred me to supposed to do that? If so, am I supposed to change something in that CSS to customize it to my site, because that css alone didn't do anything.

Albert · October 2015

Sorry but we are confused. Previously we thought that you want to create simple table (with no hover effects). But now you refer to tables from our demo http://themes.muffingroup.com/betheme/shortcodes/content-blocks#table - so what exactly you want to do? Create same tables as on our demo or remove hover effects from built-in table?

leadoptimize · October 2015

I'm sorry for any confusion. In short, I want a table to show just like the table in your demo. But my normal html table is not showing that way.

Albert · October 2015

So if you want to create tables like we did on our demo site, take a look at http://forum.muffingroup.com/betheme/discussion/2801/how-to-create-simple-table-html-table where this has been described.

leadoptimize · November 2015

Sorry for delayed reply here, but even when I used the table html from your link, the same problem persists. The top <tr> row's text turns white, but the background does not turn blue. This results in the top row's text being invisible. All the other rows behave normally on hover: text turns white and background turns blue.

You see this on the tables on http://dev.thinkreliability.com/root-cause-analysis/education-for-root-cause-analysis/company-case-study-webinar/

What am I doing wrong?

Thanks,

Rob

Albert · November 2015

Please use below css and check. This css should do the trick:

table tr:hover {
    background: #5d86bc none repeat scroll 0 0 !important;
}

leadoptimize · November 2015

Thanks. That fixed it. However, it seems to also be related to a similar problem on The Events Calendar. If you look at the month view of the calendar at http://dev.thinkreliability.com/events/2015-12/ you will see that when you hover over an item, the background goes white, like in your table, but that makes the font to light to see well. How can I change the color of the fonts when a date is hovered inside of The Events Calendar. I ask you because this seems to be related.

Albert · November 2015

To change this color in events table, please use below css:

#tribe-events-content .tribe-events-calendar td:hover h3 a { color: #444 !important; }

leadoptimize · December 2015

Thanks so much! That worked perfectly (sorry for late reply. been swapmed)

Albert · December 2015

You are welcome

Table Styling

Comments