Наведение только одной ячейки таблицы

Как я могу навести только одну ячейку таблицы? Я не хочу навешивать всю строку. Вот мой стол HTML:Наведение только одной ячейки таблицы

<table class="table table-hover table-bordered"> 
    <thead> 
     <tr> 
      <th class="danger" colspan="4">Comprobante de Pago</th> 
     </tr> 
    </thead> 
     <tr> 
      <td class="warning" width="10%">Fecha:</td> 
      <td colspan="2" id="vertical_align">sdf</td> 
     </tr> 
     <tr> 
      <td rowspan="3" colspan="1" class="asd">Client</td> 
      <td colspan="1">NAME</td> 
      <td colspan="1">NAME 2</td> 
     </tr> 
     <tr> 
      <td colspan="2">asd</td>  
     </tr> 
     <tr class="info"> 
      <td colspan="3">asd</td> 
     </tr>

Примечание: Я использую Bootstrap для висения. (Я не против, если проблема может быть исправлена без использования Bootstrap.)

источник

2016-10-31 Jplaudir8

Вы пробовали добавить класс в '', а затем использовать '.myclass: hover' в CSS ? – mhatch

-1

Вы должны переписать правила bootsrap с селектором strong enough : see specifity.

Кажется tr:hover, чтобы обнулить первый:

.table.table-hover.table-bordered tr:hover {/* selector strong enough to overwrite bootsrap rule */ 
    background:none;/* remove bg */ 
}

Затем применить правило, что нужно для ваших с.в., используя любые атрибуты, используемые здесь (класс, идентификатор, Объединение столбцов, RowSpan, ...)

.table.table-hover.table-bordered tr:hover { 
 
    background: none; 
 
} 
 
td:hover { 
 
    background: lightgray; 
 
} 
 
/* a few selector examples */ 
 
td[colspan]:hover { 
 
    background: lime; 
 
} 
 
td[colspan] + td[colspan]:hover { 
 
    background:turquoise; 
 
} 
 
td[colspan="2"]:hover { 
 
    background: gold; 
 
} 
 
td[rowspan]:hover { 
 
    background: tomato; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<table class="table table-hover table-bordered"> 
 
    <thead> 
 
    <tr> 
 
     <th class="danger" colspan="3">Comprobante de Pago</th> 
 
    </tr> 
 
    </thead> 
 
    <tr> 
 
    <td class="warning" width="10%">Fecha:</td> 
 
    <td colspan="2" id="vertical_align">sdf</td> 
 
    </tr> 
 
    <tr> 
 
    <td rowspan="3" class="asd">Client</td> 
 
    <td colspan="1">NAME</td> 
 
    <td colspan="1">NAME 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2">asd</td> 
 
    </tr> 
 
    <tr class="info"> 
 
    <td colspan="2">asd</td> 
 
    </tr> 
 
</table>

Примечание: я обновил код таблицы о rowspan и colspan значения (colspan="1" даже не заданы, это значение defaut)

источник

2016-10-31 16:34:01

Большое спасибо, также я хотел бы знать, как установить различные размеры ширины в ячейку« Fecha: »и в ячейку« Клиент », поскольку вы заметили, что я установил 10% ширины для ячейки», Fecha ", но если мне нравится устанавливать 30% в ячейку« Клиент », это не позволяет мне. – Jplaudir8

о, поэтому невозможно иметь 2 ячейки различной ширины? – Jplaudir8

@JoanPerezLozano ** вам нужно обмануть его **, как будто он построен на нескольких столбцах, чтобы сломать его. http://codepen.io/anon/pen/PGMqWZ ** Фактически '.asd' и' .warning' принадлежат к одному столбцу, они будут одинаковой ширины в любом случае ** :( –

Применить форматирование к элементу TD.

.table td:hover{ 
    background-color: green; 
}

источник

2016-10-31 15:54:38 TheValyreanGroup

, что следует сделать трюк ...

table tr td:hover{ 
 
    background-color:red; 
 
    }

<table class="table table-hover table-bordered"> 
 
     <thead> 
 
      <tr> 
 
       <th class="danger" colspan="4">Comprobante de Pago</th> 
 
      </tr> 
 
     </thead> 
 
      <tr> 
 
       <td class="warning" width="10%">Fecha:</td> 
 
       <td colspan="2" id="vertical_align">sdf</td> 
 
      </tr> 
 
      <tr> 
 
       <td rowspan="3" colspan="1" class="asd">Client</td> 
 
       <td colspan="1">NAME</td> 
 
       <td colspan="1">NAME 2</td> 
 
      </tr> 
 
      <tr> 
 
       <td colspan="2">asd</td> 
 

 
      </tr> 
 
      <tr class="info"> 
 
       <td colspan="3">asd</td> 
 
      </tr> 
 

 
</table>

источник

2016-10-31 15:55:33 FalcoB

Попробуйте

table td:hover{ 
    background-color: magenta; 
}

затем удалить класс table-hover здесь <table class="table table-hover table-bordered">

источник

2016-10-31 16:06:51

-1

вы можете использовать важный.

.table td:hover{ 
    background-color: red !important; 
}

источник

2016-10-31 16:12:00

Не применимо ли это ко всем ячейкам таблицы? OP спрашивает, как навести «только один» – mhatch

Я думаю, вы можете использовать класс или id: –

'.table .asd: hover { background-color: red! Important; } ' –

Наведение только одной ячейки таблицы

ответ

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