Ir para conteúdo
Nicolas Sousa

Configuração de estilo em tabela

Recommended Posts

Boa tarde. 

 

Eu tenho vindo a encontrar uma dificuldade em colocar na tabela um fundo transparente mas que dê para ver o conteúdo da tabela ( as colunas e linhas) .

Ou seja , assim que coloco o código na tabela ele define tudo como igual , já criei class , tentei colocar mas é como se não formatasse então integrei diretamente no html e o que acontece?

A tabela desaparece..

 

Aqui está o código :

 

Spoiler

<table style="background-color:#000;
Filter : opacity (alpha=60);
Opacity : 0.0;">
   <tr>
           <td> <img src="images/demo/ementas/05.jpg" style="border-radius:25%; "><h1 style="color: black;">Terça-Feira</h1></td>
        <td> <img src="images/demo/ementas/05.jpg"><h1 style="color: black;">Quarta-Feira</h1></td>
           <td> <img src="images/demo/ementas/05.jpg"><h1 style="color: black;">Quinta-Feira</h1></td>
   </tr>
   <tr>    
        <td> <img src="images/demo/ementas/05.jpg"><h1 style="color: black; ">Sexta-Feira</h1></td>
        <td> <img src="images/demo/ementas/05.jpg"><h1 style="color: black; ">Sabado-Feira</h1></td>
           <td> <img src="images/demo/ementas/05.jpg"><h1 style="color: black; ">Domingo-Feira</h1></td>
    </tr>
   </table>

o meu objetivo era só tirar o fundo 

segundo.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Nicolas Sousa
Retire a declaração de estilos da tag table.
Deixe somente:

<table>
  ...

@marcos123

28 minutos atrás, marcos123 disse:

Segue o link onde explica como fazer

O link que você forneceu é para a home do seu Blog.
Onde você explica como fazer?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Retire style=".... da tag TABLE assim como o maujor disse. E adicione:

<table class="fundo_transparente">

No arquivo CSS coloque:

.fundo_transparente {
  background-color: rgba(0,0,0,.6) /* Fundo RGB preto com alpha em 60% (40% transparente) */
}

opacity > o elemento será transparente e "seus elementos internos também" seu objetivo não é só o plano de fundo? Porque então usar isso?

 

De preferência não se utilize de definições do css direto no HTML "style=........." São muito severas, ou seja não importa as definições da folha de estilo quando no html assim elas sempre serão prioritárias.

Veja um exemplo

Spoiler

<style>
  #identificador {color:red}
  .classificador {color:green}
</style>
<div id="identificador" class="classificador" style="color:blue">Bla bla bla</div>

 

A div terá o texto azul independente do CSS

Se remover style=..... A div terá o texto vermelho porque o identificador tem prioridade, porém não pode ser reaproveitado (90% dos iniciantes em layout cometem esse erro)

 

Ou seja prefira usar class pois nesse caso toda vez que eu quiser que um ou mais elementos do html tenham a cor verde é usar usar.

Limite a personalizar identificadores só se realmente precisar. E personalizar direto no html só em último caso.

 

Tudo isso se refere a nível de acesso das propriedades do CSS no entra mais conteúdo como uso de "!important" / ordem com que as propriedades são definidas em chave ou e linhas do arquivo CSS / Re-escrita de propriedades.

Mas isso já é outra história e ficamos por aqui mesmo.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 25/06/2018 at 14:31, Omar~ disse:

Retire style=".... da tag TABLE assim como o maujor disse. E adicione:

<table class="fundo_transparente">

No arquivo CSS coloque:


.fundo_transparente {
  background-color: rgba(0,0,0,.6) /* Fundo RGB preto com alpha em 60% (40% transparente) */
}

opacity > o elemento será transparente e "seus elementos internos também" seu objetivo não é só o plano de fundo? Porque então usar isso?

 

De preferência não se utilize de definições do css direto no HTML "style=........." São muito severas, ou seja não importa as definições da folha de estilo quando no html assim elas sempre serão prioritárias.

Veja um exemplo

  Mostrar conteúdo oculto


<style>
  #identificador {color:red}
  .classificador {color:green}
</style>
<div id="identificador" class="classificador" style="color:blue">Bla bla bla</div>

 

A div terá o texto azul independente do CSS

Se remover style=..... A div terá o texto vermelho porque o identificador tem prioridade, porém não pode ser reaproveitado (90% dos iniciantes em layout cometem esse erro)

 

Ou seja prefira usar class pois nesse caso toda vez que eu quiser que um ou mais elementos do html tenham a cor verde é usar usar.

Limite a personalizar identificadores só se realmente precisar. E personalizar direto no html só em último caso.

 

Tudo isso se refere a nível de acesso das propriedades do CSS no entra mais conteúdo como uso de "!important" / ordem com que as propriedades são definidas em chave ou e linhas do arquivo CSS / Re-escrita de propriedades.

Mas isso já é outra história e ficamos por aqui mesmo.

 

 

 

O problema que quando faço isso nao acontece nada , por isso é q criei um style pq so assim faz as alterações sabe se la porque raio... eu uso classe e n acontece nada , nem altera sequer a cor da table nao sei o motivo disso

e mesmo assim se colocar em style esse codigo nao funciona sem sequer alguma alteração , o meu objetivo nao é tirar o fundo da div , mas sim o fundo da table para ficar apenas as imagens la organizadas

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por santans
      estou desenvolvendo uma tela de login, mas quando tento selecionar um script de redirecionamento de pagina que me leve de volta para a tela de login ou para o painel de controle caso consiga logar ocorre o seguinte erro:
       
      ( ! ) Parse error: syntax error, unexpected 'echo' (T_ECHO), expecting ',' or ';' in C:\wamp64\www\cadastro\laguna\userauthentication.php on line 43
       
       
       
      Abaixo esta o código o programa de autenticação de dados a partir do banco de dados (Lembrando que o erro ocorre na hora em que o redirecionamento para a tela inicial caso não estejam autenticados os dados ou caso os dados sejam verdadeiros e o redirecionamento falha na hora de encaminhar a tela inicial do site)...
      <?php $host = "localhost"; $user = "root"; $pass = ""; $banco = "cadastro"; $mysqli_connection = new MySQLi('localhost', 'root', '', 'cadastro'); if($mysqli_connection->connect_error){ echo "Desconectado! Erro: " . $mysqli_connection->connect_error; }else{ echo "Conectado!"; } ?> <html> <head> <meta charset="utf-8"> <title>Autenticando...</title> <script type="text/javascript"> function loginsuccessfully(){ setTimeout("window.location='painel.php'", 5000); } function loginfailed() { setTimeout("window.location='login.php'", 2000); } </script> </head> <body> <?php $email=$_POST['email']; $senha=$_POST['senha']; $sql = mysqli_query("SELECT * FROM usuarios WHERE email = '$email' and '$senha'") or die(mysqli_error()); $row = mysqli_num_rows($sql); if ($row > 0) { session_start(); $_SESSION['email']=$_POST['email']; $_SESSION['senha']=$_POST['email']; echo "<center>Você foi logado com sucesso! Aguarde um momento!</center>" echo "<script>loginsuccessfully()</script>"; }else{ echo "<center>senha ou email invalidos!</center>" echo "<script>loginfailed()</script>" } ?> </body> </html>  
       
      Abaixo esta o código do formulário:
       
      <html> <head> <title></title> </head> <body> <form name="loginform" method="post" action="userauthentication.php"> E-mail:<input type="text" name="email"><br/><br/> Senha:<input type="password" name="senha"><br/><br/> <input type="submit" value="entrar"></button> </form> </body> </html> fiquem a vontade ...
      quem puder ajudar 
       
       
    • Por Jovelan Sena
      E ai galera!
      Rapaz, to com um probleminha aqui, espera que vcs possam me ajudar. As imagens recebidas via upload do meu site estão ultrapassando as margens, como posso resolver isso?? To mandando foto do script e da interface.


    • Por diogosilva_frontend
      Boa tarde,
      Estou precisando de uma ajuda, sou novo em Javascript, Jquery, etc. Estou desenvolvendo um projeto e criei uma parte com Owl Carousel 2 onde o Slider muda conforme eu clico nos links do alfabeto. Ao clicar no link do alfabeto, o slider muda conforme o nome da pessoa e insere mais um link com o nome da pessoa abaixo do alfabeto, pois o alfabeto irá trazer o nome das pessoas conforme a primeira inicial de seu nome.
       
      Preciso fazer o comportamento inverso, ou seja, que eu possa mudar o slide através das setas e o slider selecionado apareça selecionado no link do alfabeto e o nome da pessoa apareça abaixo dele.
       
      Outra dúvida, eu fiz um Javascript grande para que quando eu clicasse em outro link, ele removesse os demais. Gostaria de saber se existe outra alternativa para simplificar esse código, pois acho que ficou muito repetitivo e grande.
      Poderiam me ajudar?
       
      Link do meu código: https://bit.ly/2J4CRJ5
       
      Obrigado
    • Por rtavix
      Minha Pagina que desenvolvi.
       
      <!DOCTYPE html> <html lang="pt-br"> <head> <title>Emissao de comprovantes</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container form-group col-md-12"> <div class="row"> <div class="form-group col-md-3"></div> <div class="form-group col-md-5"> <div class="clearfix"></div> <div class="form-group"> </div> <div class="panel panel-danger"> <div class="panel-heading"><img src="http://internet.sefaz.es.gov.br/imagens/topo_brasao.png" class="img-responsive center-block" alt="Cinque Terre"><h4 class="text-center">BNES SA</h4></div> <h5 class="text-center"><strong>BNES CORPORATIVO</strong></h5> <h5 class="text-center"><strong>Pagamento e Transferencias Eletrônicas</strong></h5> <h5 class="text-center"><strong>PAGAMENTO: Deposito</strong></h5> <form class="form-horizontal" action="/action_page.php"> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Titular: </label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Codigo de Barras:</label> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Data de Pagamento:</label> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Valor Documento:</label> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Protocolo:</label> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Registro:</label> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Emissao:</label> </div> </form> </div> <div class="pull-right"> <button class="btn btn-success" id="btnImprimir" type="button"><p>IMPRIMIR <span class="glyphicon glyphicon-print"></span></p></button> </div> </div> <div class="form-group col-md-3"></div> </div> </div> </body> </html>  
      A ideia é que  quando eu clicar no botão de imprimir dentro de uma gridview ele chama essa pagina que postei logo acima e exibir os dados via label trazendo do banco, mas até o momento eu estou agarrada na parte da modal.
       
       
      Classe do evento click do meu botão que chama a pagina de cima.
       
      protected void ImgImprimir_Click(object sender, EventArgs e) { Response.Redirect("frmImprimir.aspx"); } Meu html da minha pagina:
       
      meu html do botão referente ao metodo:
      <ItemTemplate> <asp:LinkButton ID="imgImprimir" runat="server" CausesValidation="false" CommandArgument='<%#Eval("Flag")%>' CommandName="Imprimir" CssClass="iconesTabelas icon_imprimir" OnClick="ImgImprimir_Click" ToolTip="Imprimir" /> </ItemTemplate>  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.