• Status: Solved
  • Priority: Low
  • Security: Public
  • Views: 48
  • Last Modified:

Select all tables with a given class and apply a class to the firt cell and another one to the second cell.

Hello,
I am working on a html document and I have the following tables


<table class="titles">
        <tr>
            <td class="cells">Nom de l'assuré</td>
            <td class="content">{{#childtable.place.rows}}{{fields.name}}{{/childtable.place.rows}}</td>
        </tr>
        <tr>
            <td class="cells">Lieu du sinistre</td>
            <td class="content">{{#childtable.address_view.rows}}{{fields.address}}&nbsp;-&nbsp;{{fields.second_address}}{{/childtable.address_view.rows}}</td>
        </tr>
        <tr>
            <td class="cells">Adresse de l'assuré</td>
            <td class="content">{{#childtable.address_view.rows}}{{fields.address}}&nbsp;-&nbsp;{{fields.second_address}}{{/childtable.address_view.rows}}</td>
        </tr>
        <tr>
            <td class="cells">N° de dossier</td>
            <td class="content">{{#childtable.request.rows}}{{fields.user_def16}}{{/childtable.request.rows}}</td>
        </tr>
    </table>
With the following CSS:
.titles{
            border-left: solid grey;
            border-width: thick;
            border-collapse: collapse;
        }

        .cells{
            font-weight: bold;
            background-color: lightgrey;
            padding-left: 3px;
            width: 25%;
        }
        .content{
            background-color: paleturquoise;
            width: 75%;
            padding-left: 3px;
            border: solid thin black;
            border-width: 0px 0px 1px 1px;
        }


Since I have a lot fof tables with taht layout, and I want to avoid to put the class .cells and the class .content to all the cells of the table, I would like a css code that can select all tables that have the class "titles" and apply them the class.

Thank youPreview
0
Alain Bensimon
Asked:
Alain Bensimon
1 Solution
 
Jan LouwerensSoftware EngineerCommented:
CSS cannot apply classes to markup. You can only style what's already there.

But, if I'm understanding your question correctly, you don't need to add classes. You can do what you want with pure CSS:
<style>
.titles tr td:nth-child(1) {
   font-weight: bold;
   background-color: lightgrey;
   padding-left: 3px;
   width: 25%;
}
.titles tr td:nth-child(2) {
   background-color: paleturquoise;
   width: 75%;
   padding-left: 3px;
   border: solid thin black;
   border-width: 0px 0px 1px 1px;
}
</style>

<table class="titles">
   <tr>
      <td>Nom de l'assuré</td>
      <td>{{#childtable.place.rows}}{{fields.name}}{{/childtable.place.rows}}</td>
   </tr>
   <tr>
      <td>Lieu du sinistre</td>
      <td>{{#childtable.address_view.rows}}{{fields.address}}&nbsp;-&nbsp;{{fields.second_address}}{{/childtable.address_view.rows}}</td>
   </tr>
   <tr>
      <td>Adresse de l'assuré</td>
      <td>{{#childtable.address_view.rows}}{{fields.address}}&nbsp;-&nbsp;{{fields.second_address}}{{/childtable.address_view.rows}}</td>
   </tr>
   <tr>
      <td>N° de dossier</td>
      <td>{{#childtable.request.rows}}{{fields.user_def16}}{{/childtable.request.rows}}</td>
   </tr>
</table>

Open in new window

1
 
Alain BensimonAuthor Commented:
Thank you.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now