css - 将 css 应用于具有特定标题的表列

Question

我有这种风格。

.wordwrap-table .v-table-cell-wrapper {
    white-space: normal;
    overflow: hidden;
}

如何将它应用到标题为 Value 的表格列(我只想调整一组单元格的大小)？

HTML代码

<div style="width: 1879px;" class="v-table-header-wrap">
   <div class="v-table-header" style="overflow: hidden;">
      <div style="width: 900000px;">
         <table>
            <tbody>
               <tr>
                  <td style="width: 95px;" class="v-table-header-cell">
                     <div class="v-table-resizer"></div>
                     <div class="v-table-sort-indicator"></div>
                     <div class="v-table-caption-container v-table-caption-container-align-left" style="width: 79px;">Field</div>
                  </td>
                  <td style="width: 1801px;" class="v-table-header-cell-asc">
                     <div class="v-table-resizer"></div>
                     <div class="v-table-sort-indicator"></div>
                     <div class="v-table-caption-container v-table-caption-container-align-left" style="width: 1769px;">Value</div>
                  </td>
               </tr>
            </tbody>
         </table>
      </div>
   </div>
   <div class="v-table-column-selector" style="display: none;"></div>
</div>
<div style="position: relative; width: 1879px; height: 233px;" class="v-scrollable v-table-body-wrapper v-table-body" tabindex="-1">
   <div style="height: 216px;" class="v-table-body-noselection">
      <div style="height: 0px;" class="v-table-row-spacer"></div>
      <table class="v-table-table">
         <tbody>
            <tr class="v-table-row" style="">
               <td style="width: 82px;" class="v-table-cell-content">
                  <div style="text-align: left; width: 82px;" class="v-table-cell-wrapper">User first and last names</div>
               </td>
               <td style="width: 1788px;" class="v-table-cell-content">
                  <div style="text-align: left; width: 1788px;" class="v-table-cell-wrapper">First last</div>
               </td>
            </tr>
            <tr class="v-table-row-odd" style="">
               <td style="width: 82px;" class="v-table-cell-content">
                  <div style="text-align: left; width: 82px;" class="v-table-cell-wrapper">Organization from URL parameter</div>
               </td>
               <td style="width: 1788px;" class="v-table-cell-content">
                  <div style="text-align: left; width: 1788px;" class="v-table-cell-wrapper">Org1</div>
               </td>
            </tr>
            <tr class="v-table-row" style="">
               <td style="width: 82px;" class="v-table-cell-content">
                  <div style="text-align: left; width: 82px;" class="v-table-cell-wrapper">Organization</div>
               </td>
               <td style="width: 1788px;" class="v-table-cell-content">
                  <div style="text-align: left; width: 1788px;" class="v-table-cell-wrapper">Organization</div>
               </td>
            </tr>
            <tr class="v-table-row-odd" style="">
               <td style="width: 82px;" class="v-table-cell-content">
                  <div style="text-align: left; width: 82px;" class="v-table-cell-wrapper">Certificate</div>
               </td>
               <td style="width: 1788px;" class="v-table-cell-content">
                  <div style="text-align: left; width: 1788px;" class="v-table-cell-wrapper">12345</div>
               </td>
            </tr>
            <tr class="v-table-row" style="">
               <td style="width: 82px;" class="v-table-cell-content">
                  <div style="text-align: left; width: 82px;" class="v-table-cell-wrapper">User login</div>
               </td>
               <td style="width: 1788px;" class="v-table-cell-content">
                  <div style="text-align: left; width: 1788px;" class="v-table-cell-wrapper">login@cp.vom</div>
               </td>
            </tr>
            <tr class="v-table-row-odd" style="">
               <td style="width: 82px;" class="v-table-cell-content">
                  <div style="text-align: left; width: 82px;" class="v-table-cell-wrapper">Email</div>
               </td>
               <td style="width: 1788px;" class="v-table-cell-content">
                  <div style="text-align: left; width: 1788px;" class="v-table-cell-wrapper">newlogin@image.com</div>
               </td>
            </tr>
         </tbody>
      </table>
      <div style="height: 0px;" class="v-table-row-spacer"></div>
   </div>
   <div tabindex="-1" style="position: fixed; top: 0px; left: 0px;"></div>
</div>
<div aria-hidden="true" style="display: none; width: 1879px;" class="v-table-footer-wrap">
   <div class="v-table-footer" style="overflow: hidden;">
      <div style="width: 900000px;">
         <table>
            <tbody>
               <tr>
                  <td style="width: 94px;">
                     <div class="v-table-footer-container" style="width: 81px;">&nbsp;</div>
                  </td>
                  <td style="width: 1800px;">
                     <div class="v-table-footer-container" style="width: 1787px;">&nbsp;</div>
                  </td>
               </tr>
            </tbody>
         </table>
      </div>
   </div>
</div>

Answer 1

这没有经过测试，但您会明白这一点:

var index = $(".v-table-header-wrap .v-table-header-cell .v-table-caption-container:contains('Value')").index() + 1; // get the index of the header first

$(".v-table-body .v-table-table").addClass("wordwrap-table"); // add "wordwrap-table" class to the table
$(".v-table-body .v-table-table tr td:nth-child(" + index + ")").addClass("v-table-cell-wrapper"); // add "v-table-cell-wrapper" class to each td at the index position

如果结果符合预期，请告诉我们。