Разный стиль для столбца в таблице

-1

Я пытаюсь придать новый стиль последнему столбцу таблицы, но я понятия не имею, как я могу это сделать. Я добавил столбец <th>Buy</th>, и он работает нормально, как другой <th>..</th>, но я хотел бы дать другой стиль последнему столбцу. Также попытался написать что-то вроде <th th-1>Buy</th th-1>, но никакого эффекта. Пожалуйста, если кто-то имеет какие-либо идеи долю :)Разный стиль для столбца в таблице

Вот код:

<table id="example" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Rating</th> 
       <th>Salary</th> 
       <th th-1>Buy</th th-1> 
      </tr> 
     </thead> 

     <tfoot> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Rating</th> 
       <th>Salary</th> 
       <th th-1>Buy</th th-1> 
      </tr> 
     </tfoot> 

     <tbody> 
      <tr> 
       <td>Tiger Nixon</td> 
       <td>DEF</td> 
       <td>61</td> 
       <td>$320,800</td> 
       <td><div class="checkbox pull-right"> 
       <label> 
       <input type="checkbox"> Buy this player 
       </label> 
       </div></td> 
      </tr>

источник

2015-08-05 Иван Димитров

' Купить' - это просто бред, вы не можете просто придумать свои собственные атрибуты, а затем ожидать, что-нибудь случилось. Вы могли бы f.e. вместо этого используйте 'class', чтобы идентифицировать те элементы' th'/'td', или' th: last-child', или что-то в этом роде. – CBroe

Какой стиль вам нужно? Вы можете сделать все, что вы хотите с помощью CSS:

.display td:last-child, 
    .display th:last-child { 
     background-color: green; 
    }

С помощью этого кода вы увидите последний столбец в зеленом фоне.

источник

2015-08-05 12:43:00

это не работает –

вы уверены, что он не работает? –

Я хотел бы просто установить свой собственный widht в этот столбец –

Если у вас есть возможность определить пользовательский атрибут th-1, вы также можете использовать class в своем месте, и он будет работать.

То же самое с опцией css @Marcos Pérez Gude написал в своем ответе, но я бы предложил применить его только к элементу th и использовать last-of-type. https://css-tricks.com/pseudo-class-selectors/

: последний ребенок - Выбирает последний элемент внутри родителя.

: last-of-type - Выбирает последний элемент этого типа внутри любого родителя. Итак, если у вас есть два div, у каждого из них есть абзац, изображение, абзац, . Затем div img: last-of-type будет выбирать последнее изображение внутри первого div и последнего изображения во втором div.

.display th:last-of-type { 
 
    background-color: green; 
 
}

<table id="example" class="display" cellspacing="0" width="100%"> 
 
     <thead> 
 
      <tr> 
 
       <th>Name</th> 
 
       <th>Position</th> 
 
       <th>Rating</th> 
 
       <th>Salary</th> 
 
       <th>Buy</th> 
 
      </tr> 
 
     </thead> 
 

 
     <tfoot> 
 
      <tr> 
 
       <th>Name</th> 
 
       <th>Position</th> 
 
       <th>Rating</th> 
 
       <th>Salary</th> 
 
       <th>Buy</th> 
 
      </tr> 
 
     </tfoot> 
 

 
     <tbody> 
 
      <tr> 
 
       <td>Tiger Nixon</td> 
 
       <td>DEF</td> 
 
       <td>61</td> 
 
       <td>$320,800</td> 
 
       <td><div class="checkbox pull-right"> 
 
       <label> 
 
       <input type="checkbox"> Buy this player 
 
       </label> 
 
       </div></td> 
 
      </tr> 
 
     </tbody> 
 
    </table>

источник

2015-08-05 12:54:28

Разный стиль для столбца в таблице

ответ

Смежные вопросы