Ir para conteúdo
View in the app

A better way to browse. Learn more.

Portal do Host

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Problema Com Conflito Em Tabela [Css]

Featured Replies

Postado

Boa noite pessoal. Estou precisando um pouco da ajuda dos designs de plantão.

O problema é o seguinte:

Eu possuo duas folhas de estilo em meu site:

estilo.css

tabeladepreco.css

No estilo.css, há códigos de tabela, como por exemplo <td>, <th>, <tr> e etc.

Semana passada eu comprei uma tabela de preços HTML/CSS e o CSS dela dá conflito com os códigos do estilo.css.

Vejam:

estilo.css


table { border:none; background-color:#F3F3F3; border-collapse:collapse; margin:10px 0; font:normal 11px/20px "Lucida Sans", "Lucida Sans Unicode", Helvetica, sans-serif; }

td,th { border-collapse:collapse; border-bottom:0px solid #cacaca; padding:10px 15px; text-align:center; }

table th { border-left:0px solid #cacaca; color:#ccc; }

table td { border-left:0px solid #cacaca; }

table td:first-child, table th:first-child { text-align:left; border-left:none; font-weight:bold; width:190px; }

.first { border-left:none; text-align:left; color:#F30;}

.first2 { border-left:none; text-align:left; }

.td2 { background:url(../images/table-head-mid.gif) repeat-x 0 0; padding-left:20px; text-align:right; font-size:12px; }

th { background:url(../images/table-head-mid.gif) repeat-x 0 0; padding-left:20px; text-align:right; font-size:12px; }

th.lefthead { background:url(../images/table-head-left.gif) no-repeat 0 0; padding-left:20px; text-align:left; }

th.righthead { background:url(../images/table-head-right.gif) no-repeat right top; text-align:left; }

th.lefthead2 { background:url(../images/table-head-left.gif) no-repeat 0 0; padding-left:20px; text-align:left; }

table a { text-decoration:none; }

thead th { color: #309; height:5px; padding:10px 15px; font-family:Arial, Helvetica, sans-serif; font-size:18px; text-align:center; }


<tbody>

		 <thead>

		 <tr>

		 <th><img class="alignleft" src="images/icons/dominio.png" />Domínios</th>

		 <th>INICIANTE</th>

		 <th>PLUS</th>

		 <th>PROFISSIONAL</th>

		 <th>EMPRESARIAL</th>

		 </tr>

		 </thead>


		 <tr>

		 <td>Domínios Adicionais</td>

		 <td>1</td>

		 <td>3</td>

		 <td>5</td>

		 <td>ILIMITADO</td>

		 </tr>

tabeladepreco.css

.pricing-table { min-width: 670px; }

.pricing-table td {

position: relative;

display: inline-block;

margin: 0 5px;

vertical-align: text-top;

}

/* Plan Title */

.pricing-table thead .plan td {

width: 210px;

height: 42px;

padding: 15px 0;

text-align: center;

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

border-radius: 2px;

}

.pricing-table thead .plan h2 {

font-family: 'Arial Black', Arial, Helvetica, sans-serif;

font-weight: bold;

font-size: 22px;

text-transform: uppercase;

line-height: 24px;

}

.pricing-table thead .plan em {

font-family: Georgia, Arial, Helvetica, sans-serif;

font-style: italic;

font-size: 14px;

line-height: 16px;

}

.pricing-table thead .plan .green {

color: #36611e;

text-shadow: 1px 1px 0px rgba(255,255,255, .2);

background: url(../images/green_pattern.png) repeat-x 0 0;

}

.pricing-table thead .plan .orange {

color: #fafafa;

text-shadow: 1px 1px 2px rgba(0,0,0, .4);

background: url(../images/orange_pattern.png) repeat-x 0 0;

}

/* Plan Price Section */

.pricing-table thead .price td {

position: relative;

width: 210px;

padding: 25px 0;

font-family: 'Arial Black', Arial, Helvetica, sans-serif;

font-weight: bold;

text-transform: uppercase;

text-align: center;

color: #b6b07c;

background: #f9f8f1;

background: -moz-linear-gradient(top, #f9f8f1 0%, #f4f2e2 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f8f1), color-stop(100%,#f4f2e2));

background: -webkit-linear-gradient(top, #f9f8f1 0%,#f4f2e2 100%);

background: -o-linear-gradient(top, #f9f8f1 0%,#f4f2e2 100%);

background: -ms-linear-gradient(top, #f9f8f1 0%,#f4f2e2 100%);

background: linear-gradient(to bottom, #f9f8f1 0%,#f4f2e2 100%);

}

.pricing-table thead .price p {

display: table;

margin: 0 auto;

font-size: 50px;

line-height: 60px;

}

.pricing-table thead .price p span {

font-size: 0.5em;

display: table-cell;

vertical-align: middle;

}

.pricing-table thead .price span { font-size: 14px; }

.pricing-table thead .price a {

display: block;

position: absolute;

top: 41px;

right: -5px;

height: 32px;

padding: 0 10px;

line-height: 32px;

font-size: 12px;

text-decoration: none;

}

.pricing-table thead .price .green a {

color: #37621f;

text-shadow: 1px 1px 0px rgba(255,255,255, .2);

background: #82d344;

background: -moz-linear-gradient(top, #82d344 0%, #51af34 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82d344), color-stop(100%,#51af34));

background: -webkit-linear-gradient(top, #82d344 0%,#51af34 100%);

background: -o-linear-gradient(top, #82d344 0%,#51af34 100%);

background: -ms-linear-gradient(top, #82d344 0%,#51af34 100%);

background: linear-gradient(to bottom, #82d344 0%,#51af34 100%);

}

.pricing-table thead .price .orange a {

color: #fafafa;

text-shadow: 1px 1px 2px rgba(0,0,0, .3);

background: #ff8042;

background: -moz-linear-gradient(top, #ff8042 0%, #f55a0e 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8042), color-stop(100%,#f55a0e));

background: -webkit-linear-gradient(top, #ff8042 0%,#f55a0e 100%);

background: -o-linear-gradient(top, #ff8042 0%,#f55a0e 100%);

background: -ms-linear-gradient(top, #ff8042 0%,#f55a0e 100%);

background: linear-gradient(to bottom, #ff8042 0%,#f55a0e 100%);

}

.pricing-table thead .price .green a:before,

.pricing-table thead .price .orange a:before,

.pricing-table thead .price .green a:after,

.pricing-table thead .price .orange a:after {

display: block;

position: absolute;

content: '';

}

.pricing-table thead .price .green a:before,

.pricing-table thead .price .orange a:before {

width: 8px;

height: 32px;

top: 0;

left: -8px;

background: url(../images/badge.png) no-repeat;

}

.pricing-table thead .price .green a:after,

.pricing-table thead .price .orange a:after {

width: 0;

height: 0;

bottom: -5px;

right: 0;

border-bottom: 5px solid transparent;

}

.pricing-table thead .price .green a:before { background-position: 0 0; }

.pricing-table thead .price .orange a:before { background-position: 0 -32px; }

.pricing-table thead .price .green a:after { border-left: 5px solid #1c5d40; }

.pricing-table thead .price .orange a:after { border-left: 5px solid #88330a; }

/* Plan Features Section */

.pricing-table tbody tr:first-child td:before {

position: absolute;

display: block;

content: '';

width: 100%;

height: 5px;

top: -25px;

left: 0;

background: url(../images/stripe.png) repeat-x 0 0;

}

.pricing-table tbody td {

width: 170px;

padding-left: 40px;

line-height: 30px;

border-top: 1px solid #f2f2f2;

font-family: Helvetica, Arial, sans-serif;

font-size: 11px;

color: #828282;

}

.pricing-table tbody tr:first-child td { border-top: 20px solid #ffffff; }

.pricing-table .clock-icon td,

.pricing-table .basket-icon td,

.pricing-table .star-icon td,

.pricing-table .heart-icon td { background: #ffffff url(../images/icons.png) no-repeat 0 0; }

.pricing-table .clock-icon td { background-position: 0 0; }

.pricing-table .basket-icon td { background-position: 0 -30px; }

.pricing-table .star-icon td { background-position: 0 -60px; }

.pricing-table .heart-icon td { background-position: 0 -90px; }


/* Plan Description Section */

.pricing-table tfoot td {

width: 190px;

padding: 20px 10px;

text-align: center;

line-height: 18px;

background: #ffffff;

font-family: Helvetica, Arial, sans-serif;

font-size: 11px;

color: #828282;

-webkit-border-radius: 0 0 2px 2px;

-moz-border-radius: 0 0 2px 2px;

border-radius: 0 0 2px 2px;

-webkit-box-shadow: 0px 2px 0px #e4e4e4;

-moz-box-shadow: 0px 2px 0px #e4e4e4;

box-shadow: 0px 2px 0px #e4e4e4;

}

/* Float Text Section */

@font-face {

font-family: 'Lobster13Regular';

src: url('font/Lobster_1.3-webfont.eot');

src: url('font/Lobster_1.3-webfont.eot?#iefix') format('embedded-opentype'),

		 url('font/Lobster_1.3-webfont.woff') format('woff'),

		 url('font/Lobster_1.3-webfont.ttf') format('truetype'),

		 url('font/Lobster_1.3-webfont.svg#Lobster13Regular') format('svg');

font-weight: normal;

font-style: normal;

}

.table-float {

display: block;

position: absolute;

width: 300px;

padding: 80px 0 0 0;

top: 85%;

left: 130px;

}

.table-float p {

font-family: Lobster13Regular, sans-serif;

font-size: 16px;

color: #858585;

line-height: 20px;

}

.table-float p.big {

font-size: 65px;

color: #f76117;

text-align: right;

line-height: 65px;

}

.table-float .arrow {

display: block;

position: absolute;

top: 0;

left: 50px;

width: 68px;

height: 77px;

background: url(../images/arrow2.png) no-repeat 0 0;

}


<table class="pricing-table">

<thead>

	 <tr class="plan">

		 <td class="green">

			 <h2>Light</h2>

			 <em>Great for small business</em>

		 </td>

		 <td class="orange">

			 <h2>Run</h2>

			 <em>Great for small business</em>

		 </td>

		 <td class="green">

			 <h2>Fly</h2>

			 <em>Great for small business</em>

		 </td>

		 <td class="orange">

			 <h2>Fly</h2>

			 <em>Great for small business</em>

		 </td>

	 </tr>

	 <tr class="price">

		 <td class="green">

			 <p><span>$</span>5</p>

			 <span>monthly</span>

			 <a href="#">Join</a>

		 </td>

		 <td class="orange">

			 <p><span>R$ </span>9,<span>79</span></p>

			 <span>monthly</span>

			 <a href="#">ASSINAR</a>

		 </td>

		 <td class="green">

			 <p><span>$</span>12</p>

			 <span>monthly</span>

			 <a href="#">Join</a>

		 </td>

			 <td class="orange">

			 <p><span>$</span>12</p>

			 <span>monthly</span>

			 <a href="#">Join</a>

		 </td>

	 </tr>

</thead>


<tbody class="planocloud">

	 <tr class="clock-icon">

		 <td>No Support</td>

		 <td>24/7 Tech Support</td>

		 <td>24/7 Tech Support</td>

		 <td>5TB Bandwidth</td>

	 </tr>

	 <tr class="basket-icon">

		 <td>Basic Options</td>

		 <td>Advanced Options</td>

		 <td>Advanced Options</td>

		 <td>5TB Bandwidth</td>

	 </tr>

	 <tr class="star-icon">

		 <td>100GB Storage</td>

		 <td>200GB Storage</td>

		 <td>500GB Storage</td>

		 <td>5TB Bandwidth</td>

	 </tr>

	 <tr class="heart-icon">

		 <td>1TB Bandwidth</td>

		 <td>2TB Bandwidth</td>

		 <td>5TB Bandwidth</td>

		 <td>5TB Bandwidth</td>

	 </tr>

</tbody>

Quando eu apago os estilos da estilo.css, a tabela com o código CSS tabeladepreco.css fica normal.

Alguém sabe como eu consigo arrumar esse conflito.

A tabela que está com problema pode ser visualizada em: http://mibhost.com/T...-computing.html

E a tabela que GERA o problema pode ser vista no mesmo link acima clicando em "CLIQUE AQUI PARA VER TODOS OS RECURSOS DOS PLANOS". (como podem ver, ela está normal).

Agradeço a quem me ajudar.

Grato.


Postado

Faça o seguinte, englobe o CSS que esta entrando em conflito dentro de uma div, no caso:

<div id="nova-tabela">

... conteudo da tabela ...

</div>

Na folha de estilo dessa tabela, adicione "#nova-tabela" na frente de todas as propriedades. Veja se funciona.


Postado

Amigo não consegui entender o problema.. especifique melhor para que eu possa lhe ajudar.

Ajude o fórum! Antes de postar, leiam as regras de postagem aqui.


Postado
  • Autor

Faça o seguinte, englobe o CSS que esta entrando em conflito dentro de uma div, no caso:

Na folha de estilo dessa tabela, adicione "#nova-tabela" na frente de todas as propriedades. Veja se funciona.

Fiz o que você me disse e não funcionou :/


Postado
  • Autor

Amigo não consegui entender o problema.. especifique melhor para que eu possa lhe ajudar.

Resumindo: eu preciso tirar o conflito que há entre os dois CSS. A solução mais fácil, creio eu, seria adicionar uma propriedade no estilo.css para que as classes da tabela fiquem assim:

<td class="tabelaexemplo">

Porém, eu não sei em quais partes do CSS eu devo mexer.


table { border:none; background-color:#F3F3F3; border-collapse:collapse; margin:10px 0; font:normal 11px/20px "Lucida Sans", "Lucida Sans Unicode", Helvetica, sans-serif; }

td,th { border-collapse:collapse; border-bottom:0px solid #cacaca; padding:10px 15px; text-align:center; }

table th { border-left:0px solid #cacaca; color:#ccc; }

table td { border-left:0px solid #cacaca; }

table td:first-child, table th:first-child { text-align:left; border-left:none; font-weight:bold; width:190px; }

.first { border-left:none; text-align:left; color:#F30;}

.first2 { border-left:none; text-align:left; }

.td2 { background:url(../images/table-head-mid.gif) repeat-x 0 0; padding-left:20px; text-align:right; font-size:12px; }

th { background:url(../images/table-head-mid.gif) repeat-x 0 0; padding-left:20px; text-align:right; font-size:12px; }

th.lefthead { background:url(../images/table-head-left.gif) no-repeat 0 0; padding-left:20px; text-align:left; }

th.righthead { background:url(../images/table-head-right.gif) no-repeat right top; text-align:left; }

th.lefthead2 { background:url(../images/table-head-left.gif) no-repeat 0 0; padding-left:20px; text-align:left; }

table a { text-decoration:none; }

thead th { color: #309; height:5px; padding:10px 15px; font-family:Arial, Helvetica, sans-serif; font-size:18px; text-align:center; }


Postado

Faça o inverso do que disse Igor, ao invés de por na tabela em que você adquiriu adicione nas configurações de tabela já que existiam, no caso, "estilo.css"

Defina no estilo.css o seguinte:


#minhatabela table { border:none; background-color:#F3F3F3; border-collapse:collapse; margin:10px 0; font:normal 11px/20px "Lucida Sans", "Lucida Sans Unicode", Helvetica, sans-serif; }

#minhatabela td,th { border-collapse:collapse; border-bottom:0px solid #cacaca; padding:10px 15px; text-align:center; }

#minhatabela table th { border-left:0px solid #cacaca; color:#ccc; }

#minhatabela table td { border-left:0px solid #cacaca; }

#minhatabela table td:first-child, table th:first-child { text-align:left; border-left:none; font-weight:bold; width:190px; }

#minhatabela .first { border-left:none; text-align:left; color:#F30;}

#minhatabela .first2 { border-left:none; text-align:left; }

#minhatabela .td2 { background:url(../images/table-head-mid.gif) repeat-x 0 0; padding-left:20px; text-align:right; font-size:12px; }

#minhatabela th { background:url(../images/table-head-mid.gif) repeat-x 0 0; padding-left:20px; text-align:right; font-size:12px; }

#minhatabela th.lefthead { background:url(../images/table-head-left.gif) no-repeat 0 0; padding-left:20px; text-align:left; }

#minhatabela th.righthead { background:url(../images/table-head-right.gif) no-repeat right top; text-align:left; }

#minhatabela th.lefthead2 { background:url(../images/table-head-left.gif) no-repeat 0 0; padding-left:20px; text-align:left; }

#minhatabela table a { text-decoration:none; }

#minhatabela thead th { color: #309; height:5px; padding:10px 15px; font-family:Arial, Helvetica, sans-serif; font-size:18px; text-align:center; }


No HTML, coloque:

<div id="minhatabela">

</div>

... E dentro, ponhe o que não for da nova tabela. (creio que fique como abaixo)

<div id="minhatabela">


                 <thead>

                 <tr>

                 <th><img class="alignleft" src="images/icons/dominio.png" />Domínios</th>

                 <th>INICIANTE</th>

                 <th>PLUS</th>

                 <th>PROFISSIONAL</th>

                 <th>EMPRESARIAL</th>

                 </tr>

                 </thead>


                 <tr>

                 <td>Domínios Adicionais</td>

                 <td>1</td>

                 <td>3</td>

                 <td>5</td>

                 <td>ILIMITADO</td>

                 </tr>

</div>



Postado
  • Autor

Faça o inverso do que disse Igor, ao invés de por na tabela em que você adquiriu adicione nas configurações de tabela já que existiam, no caso, "estilo.css"

Defina no estilo.css o seguinte:


#minhatabela table { border:none; background-color:#F3F3F3; border-collapse:collapse; margin:10px 0; font:normal 11px/20px "Lucida Sans", "Lucida Sans Unicode", Helvetica, sans-serif; }

#minhatabela td,th { border-collapse:collapse; border-bottom:0px solid #cacaca; padding:10px 15px; text-align:center; }

#minhatabela table th { border-left:0px solid #cacaca; color:#ccc; }

#minhatabela table td { border-left:0px solid #cacaca; }

#minhatabela table td:first-child, table th:first-child { text-align:left; border-left:none; font-weight:bold; width:190px; }

#minhatabela .first { border-left:none; text-align:left; color:#F30;}

#minhatabela .first2 { border-left:none; text-align:left; }

#minhatabela .td2 { background:url(../images/table-head-mid.gif) repeat-x 0 0; padding-left:20px; text-align:right; font-size:12px; }

#minhatabela th { background:url(../images/table-head-mid.gif) repeat-x 0 0; padding-left:20px; text-align:right; font-size:12px; }

#minhatabela th.lefthead { background:url(../images/table-head-left.gif) no-repeat 0 0; padding-left:20px; text-align:left; }

#minhatabela th.righthead { background:url(../images/table-head-right.gif) no-repeat right top; text-align:left; }

#minhatabela th.lefthead2 { background:url(../images/table-head-left.gif) no-repeat 0 0; padding-left:20px; text-align:left; }

#minhatabela table a { text-decoration:none; }

#minhatabela thead th { color: #309; height:5px; padding:10px 15px; font-family:Arial, Helvetica, sans-serif; font-size:18px; text-align:center; }


No HTML, coloque:

<div id="minhatabela">

</div>

... E dentro, ponhe o que não for da nova tabela. (creio que fique como abaixo)

<div id="minhatabela">


<thead>

<tr>

<th><img class="alignleft" src="images/icons/dominio.png" />Domínios</th>

<th>INICIANTE</th>

<th>PLUS</th>

<th>PROFISSIONAL</th>

<th>EMPRESARIAL</th>

</tr>

</thead>


<tr>

<td>Domínios Adicionais</td>

<td>1</td>

<td>3</td>

<td>5</td>

<td>ILIMITADO</td>

</tr>

</div>


Também não resolveu.

Droga, creio que a única solução foi a que eu falei, porém eu não sei onde alterar o CSS.


Postado

Bom, primeiramente, você tem que começar a usar pelo menos um id ou uma class para definir onde serão aplicadas as alterações.

Percebi que o problema vem da sua formatação geral apresentada no inicio do seu post.

Para corrigir use o seguinte código:


.tabela { border:none; background-color:#F3F3F3; border-collapse:collapse; margin:10px 0; font:normal 11px/20px "Lucida Sans", "Lucida Sans Unicode", Helvetica, sans-serif; }

.tabela td, .tabela th { border-collapse:collapse; border-bottom:0px solid #cacaca; padding:10px 15px; text-align:center; }

.tabela th { border-left:0px solid #cacaca; color:#ccc; }

.tabela td { border-left:0px solid #cacaca; }

.tabela td:first-child, .tabela th:first-child { text-align:left; border-left:none; font-weight:bold; width:190px; }

.tabela .first { border-left:none; text-align:left; color:#F30;}

.tabela .first2 { border-left:none; text-align:left; }

.tabela .td2 { background:url(../images/table-head-mid.gif) repeat-x 0 0; padding-left:20px; text-align:right; font-size:12px; }

.tabela th { background:url(../images/table-head-mid.gif) repeat-x 0 0; padding-left:20px; text-align:right; font-size:12px; }

.tabela th.lefthead { background:url(../images/table-head-left.gif) no-repeat 0 0; padding-left:20px; text-align:left; }

.tabela th.righthead { background:url(../images/table-head-right.gif) no-repeat right top; text-align:left; }

.tabela th.lefthead2 { background:url(../images/table-head-left.gif) no-repeat 0 0; padding-left:20px; text-align:left; }

.tabela a { text-decoration:none; }

.tabela thead th { color: #309; height:5px; padding:10px 15px; font-family:Arial, Helvetica, sans-serif; font-size:18px; text-align:center; }

Depois vá até a tabela que você quer utilizar essa formatação e adicione
class="tabela"

nela.


Postado
  • Autor

Bom, primeiramente, você tem que começar a usar pelo menos um id ou uma class para definir onde serão aplicadas as alterações.

Percebi que o problema vem da sua formatação geral apresentada no inicio do seu post.

Para corrigir use o seguinte código:


.tabela { border:none; background-color:#F3F3F3; border-collapse:collapse; margin:10px 0; font:normal 11px/20px "Lucida Sans", "Lucida Sans Unicode", Helvetica, sans-serif; }

.tabela td, .tabela th { border-collapse:collapse; border-bottom:0px solid #cacaca; padding:10px 15px; text-align:center; }

.tabela th { border-left:0px solid #cacaca; color:#ccc; }

.tabela td { border-left:0px solid #cacaca; }

.tabela td:first-child, .tabela th:first-child { text-align:left; border-left:none; font-weight:bold; width:190px; }

.tabela .first { border-left:none; text-align:left; color:#F30;}

.tabela .first2 { border-left:none; text-align:left; }

.tabela .td2 { background:url(../images/table-head-mid.gif) repeat-x 0 0; padding-left:20px; text-align:right; font-size:12px; }

.tabela th { background:url(../images/table-head-mid.gif) repeat-x 0 0; padding-left:20px; text-align:right; font-size:12px; }

.tabela th.lefthead { background:url(../images/table-head-left.gif) no-repeat 0 0; padding-left:20px; text-align:left; }

.tabela th.righthead { background:url(../images/table-head-right.gif) no-repeat right top; text-align:left; }

.tabela th.lefthead2 { background:url(../images/table-head-left.gif) no-repeat 0 0; padding-left:20px; text-align:left; }

.tabela a { text-decoration:none; }

.tabela thead th { color: #309; height:5px; padding:10px 15px; font-family:Arial, Helvetica, sans-serif; font-size:18px; text-align:center; }

Depois vá até a tabela que você quer utilizar essa formatação e adicione
class="tabela"

nela.

André, deu certo muito obrigado!

Pessoal, agradeço a todos que ajudaram.

Abraços.


Postado

André, deu certo muito obrigado!

Pessoal, agradeço a todos que ajudaram.

Abraços.

Não foi nada. Se precisar, é só avisar.


Visitante
Este tópico está impedido de receber novos posts.

Quem Está Navegando 0

  • Nenhum usuário registrado visualizando esta página.

Informação Importante

Concorda com os nossos termos?

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.