Classroom on the table?

Question

Is it impossible to style <table> and its <tr> <td> use css classes?

For instance:

 <table class="calendar_table"> <tr> <td> <h2>Datum</h2> </td> <td> <h2>Event</h2> </td> <td> <h2>Type</h2> </td> </tr> </table> 

Then using something like this CSS:

 .calendar_table { width:880px; } .calendar_table tr { margin:0; padding:4px; } 

Answer 1

Perhaps it should work correctly!

Here is an example

Have fun, you can do whatever you want! I do not recommend using <table> , although if it is not used to represent structured data intended for a table. If you need to draw a layout, use <div> and CSS!

Answer 2

As Alex wrote, I would define css for the table itself. But there are no nested brackets in the css definition, for example: table.custom_class {... td, th {...} }.

 <table class="custom_class"> <tr> <th>First name</th> <th>Last name</th> </tr> <tr> <td>Giovanni</td> <td>Rovelli</td> </tr> <tr> <td>Roland</td> <td>Mendel</td> </tr> </table> 

You can use the following CSS example:

 table.custom_class { border:solid 5px #006CFF; margin:0px; padding:0px; border-spacing:0px; border-collapse:collapse; line-height:22px; font-size:13px; font-family:Arial, Verdana, Tahoma, Helvetica, sans-serif; font-weight:400; text-decoration:none; color:#0018ff; white-space:pre-wrap; } table.custom_class th { padding: 20px; background-color:#98dcff; border:solid 2px #006CFF; } table.custom_class td { padding: 20px; border:solid 1px #006CFF; } table.custom_class tr { margin:0; padding:4px; } 

You can see it in action https://jsfiddle.net/16L9h2ft/

Answer 3

Your approach is absolutely true!

Answer 4

Table rows do not fill up, TDs do.

Change your style to:

 .calendar_table td { margin:0; padding:4px; } 

Answer 5

Yes it is possible. That you work to some extent (with tricks).

To create a td style, use:

 .calendar_table td { } 

Or:

 .calendar_table tr td { } 

will also work.

To set attributes such as borders, colors, and sizes, this is a cleaner way to do this by embedding this information in HTML.

This approach is great for data tables, where information should naturally be presented in a table. If you post data, use more semantically correct tags, such as <div> and <span> .

Answer 6

• Tables expand if necessary to match content
• As far as I know, table rows have no fields or padding

These placement rules apply no matter how you set it.

Answer 7

The answers above are either old or not responding properly, as they ignore the style of the table itself, not just td or th , etc. elements.

If we had a table like this:

 <table class="custom_class"> <thead> <tr> <th>header 1</th> <th>header 2</th> </tr> </thead> <tbody> <tr> <td>row value 1</td> <td>row value 2</td> </tr> </tbody> </table> 

Then in .css we have to put:

 table.custom_class { border: 1px solid black; td, th { color: blue; } } 

Answer 8

Good theme for a green table:

https://jsfiddle.net/sujayun/qwsLk3aL/

 table.namTblCls { color:purple; border: #004400 4px solid; border-collapse: collapse; font-size:16px; } table.namTblCls th { text-align: center; color:yellow; background-color:#008800; border: #004400 2px solid; padding: 20px; } table.namTblCls td { text-align: center; padding: 20px; border: #004400 1px solid ; border-right-width: 2px; border-left-width: 2px; } table.namTblCls tr:nth-child(odd) { background-color: #DDFFDD; } table.namTblCls tr:nth-child(even) { background-color: #BBFFBB; }