applying CSS for particular td tag in a column

Question

In the following cshtml file, I want to apply CSS style to specific td tags where "want to add style here" is written. Is it possible to achieve it using class or do I have to use an id. The CSS works fine when it's written as inline. is there any mistake in writing the order of precedence of the tag in the CSS style sheet?

.table-module2 {
  margin-top: 30px;
}
.table-module2 .main-table th {
    line-height: 530px; 
    white-space: nowrap;
}

.table-module2 table tbody tr .sp-name1 {
    text-align: initial;
    white-space: nowrap;
}
.table-module2 table tbody tr .sp-name2  {
    text-align: initial;
}

<div class="table-module2" v-if="details.length > 0">
<table class="main-table">

                    <thead>
                        <tr>
                            <th>NO</th>
                            <th>name1</th>
                            <th>name2</th>
                            @foreach (var names in Model.TableName)
                            {
                                <td>
                                    <table class="table-heading">
                                        <tr>
                                            <th> <div class="vertical"> @names.TableName </div> </th>
                                        </tr>
                                        <tr>
                                            <th> <div class="vertical2"> @names.TableName2  </div> </th>
                                        </tr>
                                    </table>
                                </td>
                            }

                        </tr>
                    </thead>

                    <tbody>

                        @foreach (var item in Model.name)
                        {
                            <tr>
                                <td></td>


                                <td class="sp-name1">@Html.DisplayFor(model => item.Key)</td> <! --want to add style here--> 
                                @foreach (var names in Model.name)
                                {

                                    if (item.Key == names.Key)
                                    {
                                        <td class="sp-name2">@Html.DisplayFor(model => names.Value)</td><! --want to add style here--> 
                                    }
                                }


                                @foreach (var names in Model.name)
                                {

                                    if (item.Value.Contains(names.TableName))
                                    {
                                        <td>●</td>
                                    }
                                    else
                                    {
                                        <td></td>
                                    }
                                }

                            </tr>
                        }

                    </tbody>
                </table>
               }
            </div>

Answer 1

Yes, it is possible to use class!

When in look into your code in chrome developer tools and look at the elements. I get this: so I edited your CSS to match that and now you could access and style your sp-name1 & sn-name2.

(NOTE: I also added color: red; to show that the CSS works.)

.table-module2 {
  margin-top: 30px;
}
.table-module2 .main-table th {
    line-height: 530px; 
    white-space: nowrap;
}

table.main-table tbody tr td.sp-name2 {
    text-align: initial;
    white-space: nowrap;
}
table.main-table tbody tr td.sp-name2  {
color: red;
    text-align: initial;
}

<table class="main-table">

                    <thead>
                        <tr>
                            <th>NO</th>
                            <th>name1</th>
                            <th>name2</th>
                            @foreach (var names in Model.TableName)
                            {
                                <td>
                                    <table class="table-heading">
                                        <tr>
                                            <th> <div class="vertical"> @names.TableName </div> </th>
                                        </tr>
                                        <tr>
                                            <th> <div class="vertical2"> @names.TableName2  </div> </th>
                                        </tr>
                                    </table>
                                </td>
                            }

                        </tr>
                    </thead>

                    <tbody>

                        @foreach (var item in Model.name)
                        {
                            <tr>
                                <td></td>


                                <td class="sp-name1">@Html.DisplayFor(model => item.Key)</td> <! --want to add style here--> 
                                @foreach (var names in Model.name)
                                {

                                    if (item.Key == names.Key)
                                    {
                                        <td class="sp-name2">@Html.DisplayFor(model => names.Value)</td><! --want to add style here--> 
                                    }
                                }


                                @foreach (var names in Model.name)
                                {

                                    if (item.Value.Contains(names.TableName))
                                    {
                                        <td>●</td>
                                    }
                                    else
                                    {
                                        <td></td>
                                    }
                                }

                            </tr>
                        }

                    </tbody>
                </table>