CSS para tabela com combobox responsiva

Boa noite a todos,

Segue imagem para ficar mais claro: https://uploaddeimagens.com.br/images/000/608/382/original/TABELAS.jpg?1461546501

Tenho uma tabela onde cada <td> possui um combobox que puxa dados do banco. A tabela é responsiva com bootstrap e suas propriedades são:

<table class="table table-action table-striped table-bordered table-hover table-responsive">
 <thead>
 <th>Nome da Obra</th>
 <th>Autor</th>
 <th>Tema</th>
 <th>Editora</th>
 <th>Disciplina</th>
 <th>Palavras-Chave</th>
 <th>Tipo de Arquivo</th>
 </thead>

 <tbody>
 <tr>
 <td>
 //meu php+html para select option (combobox)
 </td>
 </tr>
 </tbody>
</table>

Esta tabela é responsiva "perfeitamente", pois eu utilizo este mesmo código para gerar outra tabela onde não há os combobox (select options), utilizo ela para listar os dados da busca, onde neste caso, ela apresenta responsividade perfeita.

Também tenho um media css (que eu andei fuçando muito e pode ter algo meio errado ai, hehe):

@media (max-width: 480px){

 #trr {
 border-bottom: 1px solid #dddddd;
 }
 #tdr {
 border: 0;
 }
 .table-action td {
 display: block;
 }
 .table-responsive tr {
 display: block;
 }
 .table-responsive th {
 display: block;
 }

 }

A tabela sem os combobox, que funciona perfeitamente, com este css acima, ele pega e ao reduzir o tamanho da tela ao máximo permitido pelo navegador, ele ajusta fazendo com que os dados da tabela fiquem "aninhados" ou alinhados... De forma vertical, formando assim a linha da minha tabela verticalmente:

Nome da Obra | Autor | Editora | Disciplina

Nome da Obra

Autor

Editora

Disciplina

PERFEITO! É isso mesmo que eu queria e consegui fazer, mas ai que vem o problema...

Na tabela onde tenho o combobox, ela não fica responsiva nem por reza braba e sai tudo bixado. Como eu consigo fazer ela ficar organizada o mais amigável possível para o usuário?