table com bootstrap 4

[Marcos Souza]

Pessoal, no bootstrap 3 sempre escondi uma coluna da "table", dependendo do tamanho da tela do usuário, via html, como segue:
<th class="hidden-xs">titulo coluna</th>

<td class="hidden-xs">texto coluna</td>

No bootstrap 4 vi que mudou. Abaixo fiz um exemplo, mas estou com o seguinte problema.
O problema é que para a coluna 2 está aparecendo um borda inferior mais grossa. Achei muito estranho!
Obs: A parte de esconder a coluna 2, ao diminuir a tela, está funcionando.
Vocês podem testar o código abaixo, colando no site: https://www.codeply.com/go
Depois clicar em RUN.

Aguardo ajuda! Grato!

<div class="container">   
    <table class="table table-sm table-hover">
        <thead>
            <tr>
                <th>t1</th>
                <th class="d-none d-sm-block">t2</th>
                <th>t3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>123
                </td>
                <td class="d-none d-sm-block">
                    sadfsafsd fsdfsd fsdfsdf sdf
                </td>
                <td>789
                </td>
            </tr>
        </tbody>
    </table>
</div>

[Hugo Rocha]

Você pode sobrescrever o css no th assim:

 <th style="border-bottom: 1px solid #ddd !important;" class="d-none d-sm-block">t2</th> 

e vai ficar igual o estilo das outras. Também da pra editar css do bootstrap4, mas dai pode afetar o resto do seu projeto, então acho essa a melhor solução.

Vc tbm pode apenas remover as bordas de toda a tabela com a classe table-borderless.

--
Você recebeu essa mensagem porque está inscrito no grupo "Django Brasil" dos Grupos do Google.
Para cancelar inscrição nesse grupo e parar de receber e-mails dele, envie um e-mail para django-brasi...@googlegroups.com.
Para ver essa discussão na Web, acesse https://groups.google.com/d/msgid/django-brasil/c321c11e-35df-4b24-b1a4-2fc56ec23e92%40googlegroups.com.

[Marcos Souza]

Pra esse exemplo funcionou.
Mas caso eu adicionar o mesmo método da coluna t2 para a t3, a tabela se perde. Fica toda errada.
Alguma outra solução?
Valeu.

Em terça-feira, 30 de julho de 2019 12:26:57 UTC-3, Hugo Rocha escreveu:

Você pode sobrescrever o css no th assim:

 <th style="border-bottom: 1px solid #ddd !important;" class="d-none d-sm-block">t2</th> 

e vai ficar igual o estilo das outras. Também da pra editar css do bootstrap4, mas dai pode afetar o resto do seu projeto, então acho essa a melhor solução.

Vc tbm pode apenas remover as bordas de toda a tabela com a classe table-borderless.

Para cancelar inscrição nesse grupo e parar de receber e-mails dele, envie um e-mail para django...@googlegroups.com.

[Hugo Rocha]

Faz assim, troca o block por table-cell e esquece o style:

<div class="container">  
    <table class="table table-sm table-hover">
        <thead>
            <tr>
                <th>t1</th>

                <th class="d-none d-sm-table-cell">t2</th>
                <th class="d-none d-sm-table-cell">t3</th>

            </tr>
        </thead>
        <tbody>
            <tr>
                <td>123
                </td>

                <td class="d-none d-sm-table-cell">

                    sadfsafsd fsdfsd fsdfsdf sdf
                </td>

                <td class="d-none d-sm-table-cell">789

                </td>
            </tr>
        </tbody>
    </table>
</div>

Para cancelar inscrição nesse grupo e parar de receber e-mails dele, envie um e-mail para django-brasi...@googlegroups.com.
Para ver essa discussão na Web, acesse https://groups.google.com/d/msgid/django-brasil/6547dcd7-d9a5-4a5c-a65c-e79f31fc1d20%40googlegroups.com.