I have added to the cookie policy page a table to show the cookies I use, but I just copied an example code, so everything works perfectly, but on mobile devices this table widens the screen.
I have tried to study solutions, but my experience in css is null, I am afraid of damaging the page more.
I have read the guidelines of the site, and I am adding the code that I think will help you, omitting the text of the cookie policy, leaving only the table. If not, tell me what I need to add.
The site loads Bootstrap 3.1 and Bootstrap 3.2, but being a page added by me, it doesn't work well, so I show the code:
/* style para la tabla */
body {
font-family: Arial, Helvetica, sans-serif;}
table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 45px;
width: 980px;
text-align: left;
border-collapse: collapse; }
th {
font-size: 13px;
text-align: center;
font-weight: normal;
padding: 8px;
background: #b9c9fe;
border-top: 4px solid #aabcfe;
border-bottom: 1px solid #fff;
color: #039; }
td {
padding: 8px;
background: #e8edff;
border-bottom: 1px solid #fff;
color: #669;
border-top: 1px solid transparent; }
tr:hover td {
background: #d0dafd;
color: #339; }
/* style de la pagina en general*/
@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Montserrat:700|Merriweather:400italic');
.navbar navbar-custom navbar-fixed-top{
overflow: hidden;
background-color: transparent;
}
.collapse navbar-collapse navbar-right navbar-main-collapse{
overflow: hidden;
background-color: transparent;
}
body {
width: 100%;
height: 100%;
font-family: 'Lato',sans-serif;
font-weight: 300;
color: #666;
background-color: #fff;
}
html {
width: 100%;
height: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 30px;
text-transform: uppercase;
font-family: Montserrat,sans-serif;
font-weight: 700;
letter-spacing: 1px;
}
h2{
margin: 0; bottom: 0;
}
p {
margin: 0 0 20px;
font-size: 16px;
line-height: 1.4em;
}
p.lead {
font-weight: 600;
}
a {
color: #05110f;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.navbar-brand img{
height: 70px;
width: 70px;
margin-top: -12px;
}
#logo{
padding-left: 10%;
}
a:hover,
a:focus {
text-decoration: none;
color: #bb0912;
}
.light {
font-weight: 400;
}
.navbar {
margin-bottom: 0;
border-bottom: 1px solid rgba(255,255,255,.3);
}
.navbar-brand {
font-weight: 700;
}
.navbar-brand {
height: 40px;
padding: 5px 15px;
font-size: 18px;
line-height: 1em;
}
.navbar-brand h1{
color: #fff;
font-size: 20px;
line-height: 40px;
}
.navbar-brand:focus {
outline: 0;
}
.nav.navbar-nav {
/*opacity: 0;*/
background-color: rgba(255,255,255,.4);
}
.navbar-custom.top-nav-collapse .nav.navbar-nav {
opacity: 1;
background-color: rgba(0,0,0,0);
}
.navbar-custom ul.nav li a {
font-size: 12px;
letter-spacing: 1px;
color: #444;
text-transform: uppercase;
font-weight: 700;
}
.navbar-custom.top-nav-collapse ul.nav li a {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
color: #fff;
}
.navbar-custom ul.nav ul.dropdown-menu {
border-radius: 0;
}
.navbar-custom ul.nav ul.dropdown-menu li {
border-bottom: 1px solid #f5f5f5;
}
.navbar-custom ul.nav ul.dropdown-menu li:last-child{
border-bottom: none;
}
.navbar-custom ul.nav ul.dropdown-menu li a {
padding: 10px 20px;
}
.navbar-custom ul.nav ul.dropdown-menu li a:hover {
background: #fefefe;
}
.navbar-custom.top-nav-collapse ul.nav ul.dropdown-menu li a {
color: #666;
}
.navbar-custom .nav li a {
-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
}
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
outline: 0;
background-color: rgba(255,255,255,.2);
}
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
outline: 0;
background-color: rgba(255,255,255,0);
}
.navbar-toggle {
padding: 4px 6px;
font-size: 14px;
color: #fff;
}
.navbar-toggle:focus,
.navbar-toggle:active {
outline: 0;
}
/* loader */
#preloader {
background: #ffffff;
bottom: 0;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
z-index: 999;
}
#loaderInner {
background:#ffffff url(../img/spinner.gif) center center no-repeat !important;
height: 60px;
left: 50%;
margin: -50px 0 0 -50px;
position: absolute;
top: 50%;
width: 60px;
}
@keyframes boxSpin{
0%{
transform: translate(-10px, 0px);
}
25%{
transform: translate(10px, 10px);
}
50%{
transform: translate(10px, -10px);
}
75%{
transform: translate(-10px, -10px);
}
100%{
transform: translate(-10px, 10px);
}
}
@keyframes shadowSpin{
0%{
box-shadow: 10px -10px #39CCCC, -10px 10px #FFDC00;
}
25%{
box-shadow: 10px 10px #39CCCC, -10px -10px #FFDC00;
}
50%{
box-shadow: -10px 10px #39CCCC, 10px -10px #FFDC00;
}
75%{
box-shadow: -10px -10px #39CCCC, 10px 10px #FFDC00;
}
100%{
box-shadow: 10px -10px #39CCCC, -10px 10px #FFDC00;
}
}
#load {
background:#ffffff url(../img/spinner.gif) center center no-repeat !important;
height: 60px;
left: 50%;
margin: -50px 0 0 -50px;
position: absolute;
top: 50%;
width: 60px;
}
/* misc */
hr {
margin-top: 10px;
}
/* margins */
.marginbot-0{margin-bottom:0 !important;}
.marginbot-10{margin-bottom:10px !important;}
.marginbot-20{margin-bottom:20px !important;}
.marginbot-30{margin-bottom:30px !important;}
.marginbot-40{margin-bottom:40px !important;}
.marginbot-50{margin-bottom:50px !important;}
/* ===========================
--- General sections
============================ */
.home-section {
padding-top: 20px;
padding-bottom: 20px;
display:block;
position:relative;
z-index:120;
}
.section-heading {
margin-top:20px;
margin-bottom:20px;
}
.section-heading h2 {
font-size: 40px;
margin-bottom: 1px;
}
.section-heading i {
margin-bottom: 1px;
}
/* --- section bg var --- */
.bg-white {
background: #fff;
}
.bg-gray {
background: #f8f8f8;
}
.bg-dark {
background: #575757;
}
/* --- section color var --- */
.text-light {
color: #fff;
}
/* ===========================
--- Intro
============================ */
.intro {
width:100%;
position:relative;
background: url(../img/header1.jpg) no-repeat top center;
background-size: cover;
height: auto;
}
#intro.intro {
padding:20% 0 0 0;
}
.intro .slogan {
text-align: center;
}
.intro .page-scroll {
text-align: center;
}
.brand-heading {
font-size: 40px;
}
.intro-text {
font-size: 18px;
}
.intro .slogan h1 {
color: #FFF;
}
.intro .slogan h2 {
color: #FFF;
text-shadow: none;
font-size: 60px;
line-height: 60px;
font-weight: 700;
font-family: Montserrat, sans-serif;
background-color: rgba(0, 0, 0, 0);
text-decoration: none;
text-transform: uppercase;
border-width: 0px;
border-color: #000;
border-style: none;
text-shadow: -1px 0 1px #000;
}
.intro .slogan h4 {
color: #fff;
text-shadow: -1px 1px 1px #000;
}
@media (max-width: 768px) {
.intro .slogan h2 {
font-size: 48px;
}
}
@media (max-width: 600px) {
.intro .slogan h2 {
font-size: 36px;
}
}
/* ===========================
--- About
============================ */
.boxed-grey {
background: #f9f9f9;
padding: 20px;
}
.team h5 {
margin-bottom: 10px;
}
.team p.subtitle {
margin-bottom: 10px;
}
.avatar {
margin-bottom: 20px;
}
/* ===========================
--- Services
============================ */
.service-icon {
margin-bottom: 20px;
}
.widget-contact {
text-align: left;
}
.validation {
color: red;
display:none;
margin: 0 0 20px;
font-weight:400;
font-size:13px;
}
#sendmessage {
color: green;
border:1px solid green;
display:none;
text-align:center;
padding:15px;
font-weight:600;
margin-bottom:15px;
}
#errormessage {
color: red;
display:none;
border:1px solid red;
text-align:center;
padding:15px;
font-weight:600;
margin-bottom:15px;
}
#sendmessage.show, #errormessage.show, .show {
display:block;
}
.credits, .credits a {
color: #000;
}
/* ==========================
Parallax
============================= */
#parallax1{
background-image: url(../img/parallax/1.jpg);
}
#parallax1:after {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWNgYGD4z0AswK4SAFXuAf8EPy+xAAAAAElFTkSuQmCC);
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
opacity: 0.7;
z-index: -1;
}
#parallax2{
background-image: url(../img/parallax/2.jpg);
}
#parallax2:after {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWNgYGD4z0AswK4SAFXuAf8EPy+xAAAAAElFTkSuQmCC);
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
opacity: 0.7;
z-index: -1;
}
/* ===========================
--- Elements
============================ */
.btn {
border-radius: 0;
text-transform: uppercase;
font-family: Montserrat,sans-serif;
font-weight: 400;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.btn-circle {
width: 70px;
height: 70px;
margin-top: 15px;
padding: 7px 16px;
border: 2px solid #fff;
border-radius: 50%;
font-size: 40px;
color: #fff;
/*color:blue;*/
background: 0 0;
-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
}
.btn-circle.btn-dark {
border: 2px solid #666;
color: #666;
}
.btn-circle:hover,
.btn-circle:focus {
outline: 0;
color: #fff;
background: rgba(255,255,255,.1);
}
.btn-circle.btn-dark :hover,
.btn-circle.btn-dark :focus {
outline: 0;
color: #999;
background: #fff;
}
.btn-circle.btn-dark :hover i,
.btn-circle.btn-dark :focus i{
color: #999;
}
.page-scroll .btn-circle i.animated {
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
}
.page-scroll .btn-circle:hover i.animated {
-webkit-animation-name: pulse;
-moz-animation-name: pulse;
-webkit-animation-duration: 1.5s;
-moz-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes pulse {
0% {
-moz-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-moz-transform: scale(1);
transform: scale(1);
}
}
#text {
color: #fff;
background: #ffcc00;
}
#map {
height: 500px;
}
.btn-skin:hover,
.btn-skin:focus,
.btn-skin:active,
.btn-skin.active {
color: #fff;
background-color: #666;
border-color: #666;
}
.btn-default:hover,
.btn-default:focus {
border: 1px solid #2897c3;
outline: 0;
color: #000;
background-color: #28a4c3;
}
.btn-huge {
padding: 25px;
font-size: 26px;
}
.banner-social-buttons {
margin-top: 0;
}
/* Media queries */
@media(min-width:767px) {
.navbar {
padding: 20px 0;
border-bottom: 0;
letter-spacing: 1px;
background: 0 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
background-color: #000;
}
.navbar-custom.top-nav-collapse {
border-bottom: 1px solid rgba(255,255,255,.3);
}
.intro {
height: 100%;
padding: 0;
}
.brand-heading {
font-size: 100px;
}
.intro-text {
font-size: 25px;
}
}
@media (max-width:768px) {
.team.boxed-grey {
margin-bottom: 30px;
}
.boxed-grey {
margin-bottom: 30px;
}
}
@media (max-width:480px) {
.navbar-custom .nav.navbar-nav {
background-color: rgba(255,255,255,.4);
}
.navbar.navbar-custom.navbar-fixed-top {
margin-bottom: 30px;
}
.tp-banner-container {
padding-top:40px;
}
.page-scroll a.btn-circle {
width: 40px;
height: 40px;
margin-top: 10px;
padding: 7px 0;
border: 2px solid #fff;
border-radius: 50%;
font-size: 20px;
}
}
html .nav.navbar-nav {
background-color: rgba(255,255,255,0);
}
.nav.navbar-nav li {
background-color: rgba(255,255,255,0);
}
footer {
text-align: center;
padding: 30px 10px;
}
footer p {
color: #f8f8f8;
}
footer a{
text-decoration-color: #000;
}
a:focus {
text-decoration: none;
color: #bb0912;
}
footer p a{
color: #000;
}
.content-3{
text-align: center
}
.content-3 h2{
padding-top: 20px;
padding-bottom: 20px;
}
.content-3 a2a_kit{
padding-left: 100px;
}
.a2a_kit {
padding-left: 18%;
padding-bottom: 20px;
}
footer .a2a_kit{
padding-left: 2%;
padding-top: 20px;
}
footer h2{
font-size: 14px;
padding-left: 0%;
padding-right: 8%;
}
.col-md-4 img{
padding-left: 150px;
}
.col-md-4 p{
padding-left: 150px;
}
.col-md-4 .izquierda{
padding-left: 0% ;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/logo.ico">
<title>Política de cookies</title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<!-- Fonts -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="css/tabla-politica.css" rel="stylesheet">
<!-- style de botones compartir -->
<link href="https://fonts.googleapis.com/css?family=Raleway+Dots" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/share-5.css" rel="stylesheet">
<!--/ style de botones compartir -->
<style type="text/css">
.container-politica p {
font-size: 20px !important;
}
.container-politica ul {
font-size: 25px !important;
}
.container-politica li {
text-align: left !important;
}
#service-2 {
text-align: center !important;
margin-left: 50px !important;
margin-right: 50px !important;
}
</style>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<li>
<a href="#">POLITICA DE COOKIES</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Section: intro -->
<section id="intro" class="intro">
<div class="slogan">
<h2>POLITICA
<span class="text_color">DE COOKIES</span>
</h2>
<h4>Las cookies que usa esta web...!!!</h4>
</div>
<div class="page-scroll">
<a href="#service-2" class="btn btn-circle">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</section>
<!-- /Section: intro -->
<!-- Section: services -->
<section id="service-2" class="home-section text-center bg-gray">
<div class="container-politica">
<p>En<a target="_blank" href="https://www.agpd.es/portalwebAGPD/resultados-ides-idphp.php">Agencia Española de Protección de Datos</a> web. </p>
<h2>¿Qué NO es una cookie?</h2>
<p>No es un virus, ni algo que pueda danar su ordenador ni su informaciòn ni su seguridad.</p>
<br>
<h2>¿Qué información almacena una cookie?</h2>
<p>Si usted no desea que se guarden cookies en su navegador o prefiere recibir una información cada vez que una cookie
solicite instalarse, puede configurar sus opciones de navegación para que se haga de esa forma. La mayor parte de
los navegadores permiten la gestión de las cookies de 3 formas diferentes:</p>
<br>
<ul>
<li>Las cookies son siempre rechazadas;</li>
<li>El navegador pregunta si el usuario desea instalar cada cookie;</li>
</ul>
<table class="egt">
<caption>Cookies que utiliza esta web.</caption>
<tr>
<th scope="col">DOMINIO</th>
<th>NOMBRE DE LA COOKIE</th>
<th>DURACION</th>
<th>CONTENIDO</th>
<th>DESCRIPCION</th>
</tr>
<tr>
<th>sitioWeb</th>
<td>PHPSESSID</td>
<td>Al finalizar la sesión de navegación.</td>
<td></td>
<td> Esta cookie es usada por el lenguaje de encriptado PHP para permitir que las variables de SESIÓN sean guardadas
en el servidor web. Esta cookies es esencial para el funcionamiento de la web</td>
</tr>
<tr>
<th>sitioWeb </th>
<td>_ga</td>
<td>Caducada.</td>
<td></td>
<td>Se utiliza para cualquier tipo de conexión.</td>
</tr>
<tr>
<th>sitioWeb </th>
<td>cookies_surestao</td>
<td>viernes, 4 de mayo de 2018, 22:07:35</td>
<td></td>
<td>Se utiliza para cualquier tipo de conexión.</td>
</tr>
<tr>
<th>.static.addtoany.com </th>
<td>__utmz</td>
<td>sábado, 1 de septiembre de 2018, 6:19:04</td>
<td>s|utmccn=(referral)|utmcmd=referral|utmcct=/</td>
<td>Se utiliza estadisticas de redes sociales.</td>
</tr>
<tr>
<th>.static.addtoany.com </th>
<td>__utma</td>
<td>domingo, 1 de marzo de 2020, 17:19:04</td>
<td>5444.1517675303.1519902741.1520007545.13</td>
<td>Se utiliza para comprobar las sesiones</td>
</tr>
<tr>
<th>.addtoany.com</th>
<td>__utma</td>
<td>sábado, 29 de febrero de 2020, 15:35:52</td>
<td>83466.1517675308.1519911747.1519914824.9</td>
<td>Se utiliza para comprobar las sesiones</td>
</tr>
<tr>
<th>.addtoany.com</th>
<td>__utmz</td>
<td>viernes, 31 de agosto de 2018, 4:35:52</td>
<td>ca-9c4c-03c7-9fb2-ebb523bea075/index.html</td>
<td>Se utiliza para comprobar las sesiones</td>
</tr>
</table>
<h2>Más información sobre las cookies</h2>
<p>la Agencia Española de Protección de Datos en su “
<a target="_blank"
href="https://www.agpd.es/portalwebAGPD/canaldocumentacion/publicaciones/common/Guias/Guia_Cookies.pdf">Guía sobre el uso de las cookies</a>” y obtener más información sobre las cookies en Internet,
<a href="#"></a>
</p>
<p>Si desea tener un mayor control sobre la instalación de cookies, puede instalar programas o complementos a su navegador,
conocidos como herramientas de “Do Not Track”, que le permitirán escoger aquellas cookies que desea permitir.</p>
<h2>Advertencia importante sobre las cookies</h2>
<p>Politica de cookies elaborada con la ayuda legal de
<a target="_blank" href="https://www.abogadoamigo.com/">www.abogadoamigo.com</a>
</p>
</div>
</section>
<!-- /Section: services -->
<footer>
<div class="container">
</div>
</footer>
<!-- Custom Theme JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="js/cookies.js" type="text/javascript"></script>
</body>
</html>
Puedes incluir un
div
que encierre tu tabla y le agregas la clasetable-responsive
de bootstrap, esto le agrega un scroll en la parte inferior a la tabla: