4

Estoy tratando de corregir los problemas de usabilidad móvil de un sitio web y no consigo encontrar solución por más recursos que he buscado. He realizados las soluciones que se ofrecen en otras consultas de este sitio, pero ninguna a funcionado.

En HTML, ¿Cómo puedo adaptar el contenido al ancho de la pantalla?

Corregir el ancho de pantalla

El problema está en una tabla, es la que se extiende a lo ancho, estropeando todo Ya no se que mas puedo hacer, espero que con el código que les muestro, puedan darme alguna idea.

Muchas gracias

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body class="homepage">
<section id="portfolio">
    <div class="container">
    <div class="container-politica">
      <h2>1. Política de privacidad</h2>
      <p>Este sitio web informa a los usuarios del sitio web sobre su política respecto del tratamiento ye servicios a través de su sitio web.</p
   <p>El uso de esta web implica la aceptación de esta política de privacidad</p>

      <h2>¿Qué son las cookies propias y las de terceros?</h2>
      <p>Las cookies propias son las generadas por la página que está visitando y las de terceros son las generadas por
        servicios
        o proveedores externos como Mailchimp, Mailrelay, Facebook, Twitter, Google, etc.</p>
      <h2>¿Se pueden eliminar las cookies?</h2>
      <p>Sí. No sólo eliminar, también bloquear, de forma general o particular para un dominio específico. Para eliminar
        las
        cookies de un sitio web debe ir a la configuración de su navegador y allí podrá buscar las asociadas al dominio
        en
        cuestión y proceder a su eliminación.</p>


      <h2>Cookies de redes sociales</h2>
      <p>Las Cookies de redes sociales pueden almacenarse en su navegador mientras navega por haciaelautoempleo.com por
        ejemplo,
        cuando utiliza el botón de compartir contenidos de haciaelautoempleo.com en alguna red social.</p>
      <p>Las empresas que generan estas cookies correspondientes a las redes sociales que utiliza esta web tienen sus
        propias
        políticas de cookies:</p>
      <ul>
        <li>Cookie de Twitter, según lo dispuesto en su
          <a target="_blank" href="https://twitter.com/privacy">Política de privacidad y uso de cookies.</a>
        </li>
        <li>Cookie de Google+ y Google Maps, según lo dispuesto en su página sobre qué
          <a target="_blank" href="http://www.google.com/intl/es/policies/technologies/types/">tipo de cookies
            utilizan</a>.</li>
      </ul>
      <p>&nbsp;</p>
      <p>En cumplimiento de lo establecido en el artículo 22.2 de la LSSI se detallan las cookies que pueden instalarse
        habitualmente
        durante la navegación por este sitio web:</p>

      <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>web</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>web.com </th>
          <td>_ga</td>
          <td>Caducada.</td>
          <td></td>
          <td>Se utiliza para cualquier tipo de conexión.</td>
        </tr>

        <tr>
          <th>web.com </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>
       
      </table>
      <h2>Más información sobre las cookies</h2>
      <p>Puedes consultar el reglamento sobre cookies publicado por 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>
    </div>
    </div>
  </section>

</body>
</html>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,300,800);


/*************************
*******Typography******
**************************/

.navbar1 {
  background-color: transparent !important;
  -webkit-transition: all .5s;
  transition: all .5s;
}

.navbar1.alt-color {
  background-color: rgb(19, 143, 214) !important;
} 

body {
  background: #fff;
  font-family:'Open Sans', Arial, sans-serif;
  color:#333;
  line-height:1.6em;
}

.container-politica {
  font-size: 1.6em;
}

.container-politica h2 {
  font-size: 36px;
}

.container-politica p {
  line-height: 200%;
}

.container-politica ul {
  line-height: 200%;
}

/*.container-politica tr { 
  max-width: 100%;
  height: auto;
}

.container-politica.egt {
  display: flex;
  justify-content: space-between;
}

table{
  padding-right: 1em;
  width: 100%;
  }*/


h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight:500; 
    font-family:'Open Sans', Arial, sans-serif;
    color:#333;
}

h1{
  font-size: 36px;
  color:#fff;
}

h2{
  font-size: 20px;
}

h3{
  font-size: 16px;
  color: #787878;
  font-weight: 400;
  line-height: 24px;
}

h4{
  font-size: 16px;
}

a {
  color: #E8CE0E;
  -webkit-transition: color 300ms, background-color 300ms;
  -moz-transition: color 300ms, background-color 300ms;
  -o-transition:  color 300ms, background-color 300ms;
  transition:  color 300ms, background-color 300ms;
}

a:hover, a:focus {
  color: #d43133;
}

hr {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #fff;
}


.btn-primary {
  padding: 8px 20px;
  background: #E8CE0E;
  color: #fff;
  border-radius: 4px;
  border:none;
  margin-top: 10px;
}


.btn-primary:hover, 
.btn-primary:focus{
  background: #E8CE0E;
  outline: none;
  box-shadow: none;
} 

.btn-transparent {
  border: 3px solid #fff;
  background: transparent;
  color: #fff;
}

.btn-transparent:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

a:hover,
a:focus {
  color: #000;
  text-decoration: none;
  outline: none;
}

.dropdown-menu {
  margin-top: -1px;
  min-width: 180px;
}

.center h2{
  font-size: 36px;
  margin-top: 0;
  margin-bottom: 20px;
}

.media>.pull-left{
  margin-right: 20px;
}

.media>.pull-right{
  margin-left: 20px;
}

body > section {
  padding: 70px 0;
}

.center {
  text-align: center;
  padding-bottom: 55px;
}

.scaleIn {
  -webkit-animation-name: scaleIn;
  animation-name: scaleIn;
}

.lead{
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.transparent-bg {
  background-color: transparent !important;
  margin-bottom: 0;
}

@-webkit-keyframes scaleIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes scaleIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}


/*************************
*******Header******
**************************/
.navbar-fixed-top .navbar-toggle .icon-bar {
  background-color: #fff;
}

.navbar>.container .navbar-brand{
  margin-left: 0;
}

.top-bar {
  padding: 10px 0;
  background: #1163dd;
  border-bottom: 1px solid #222;
  line-height: 28px;
}

.social{
  text-align: center;
}

.social-share{
 display: inline-block;
 list-style: none;
 padding: 0;
 margin: 0;
}

ul.social-share li {
  display: inline-block;
}

ul.social-share li a {
  display: inline-block;
  color: #fff;
  background: #404040;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 2px;
}

ul.social-share li a:hover {
  background: #E8CE0E;
  color: #fff;
}

.navbar-brand {
  padding: 0;
  margin:0;
  color:#E8CE0E;
}
.navbar-header a.navbar-brand {
  color:#E8CE0E;
}

.navbar {
  border-radius: 0;
  margin-bottom: 0;
  background: #1475cf;
  padding: 15px 0;
  padding-bottom: 0;
}

 .navbar-nav{
  margin-top: 12px;
 }

.navbar-nav>li{
  margin-left: 25px;
  padding-bottom: 28px;
}

.navbar-fixed-top .navbar-nav > li > a {
  padding: 5px 15px;
  margin: 0;
  border-radius: 3px;
  color: #fff;
  line-height: 24px;
  display: inline-block;
}

.navbar-fixed-top .navbar-nav > li > a:hover{
    background-color: #E8CE0E;
  color: #333;
}

.navbar-fixed-top {
  border: none;
}

.navbar-fixed-top .navbar-brand {
  font-size: 36px;
  line-height: 50px;
  color: #fff;
}

.navbar-fixed-top .navbar-nav > .active > a,
.navbar-fixed-top .navbar-nav > .active > a:hover,
.navbar-fixed-top .navbar-nav > .active > a:focus,
.navbar-fixed-top .navbar-nav > .open > a,
.navbar-fixed-top .navbar-nav > .open > a:hover,
.navbar-fixed-top .navbar-nav > .open > a:focus {
  background-color: #E8CE0E;
  color: #333;
}

.navbar-fixed-top .navbar-nav .dropdown-menu {
  background-color: rgba(0,0,0,.85);
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125);
  -moz-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125);
  border: 0;
  padding: 0;
  margin-top: 0;
  border-top: 0;
  border-radius: 0;
  left: 0;
}

.navbar-fixed-top .navbar-nav .dropdown-menu:before{
  position: absolute;
  top:0;
}

.navbar-fixed-top .navbar-nav .dropdown-menu > li > a {
  padding: 8px 15px;
  color: #fff;
}

.navbar-fixed-top .navbar-nav .dropdown-menu > li:hover > a,
.navbar-fixed-top .navbar-nav .dropdown-menu > li:focus > a,
.navbar-fixed-top .navbar-nav .dropdown-menu > li.active > a {
  background-color: #E8CE0E;
  color: #fff;
}

.navbar-fixed-top .navbar-nav .dropdown-menu > li:last-child > a {
  border-radius: 0 0 3px 3px;
}

.navbar-fixed-top .navbar-nav .dropdown-menu > li.divider {
  background-color: transparent;
}

.navbar-fixed-top .navbar-collapse,
.navbar-fixed-top .navbar-form {
  border-top: 0;
  padding-bottom: 0;
}


/*************************
*******Home Page******
**************************/


.slider {
  position: relative;
  margin-top:130px;
}

#carousel-slider {
  position: relative;
}

#carousel-slider .carousel-indicators {
  bottom: -25px;
}

#carousel-slider .carousel-indicators li {
  border: 1px solid #ffbd20;
}

#carousel-slider a i {
  border: 1px solid #777;
  border-radius:50%;
  font-size: 28px;
  height: 50px;
  padding: 8px;
  position: absolute;
  top: 50%;
  width: 50px;
  color:#777;
}

#carousel-slider a i:hover {
  background:#E8CE0E;
  color:#fff;
  border: 1px solid #E8CE0E;
}

#carousel-slider 
.carousel-control {
  width:inherit;
}

#carousel-slider .carousel-control.left i {
  left:-25px
}

#carousel-slider .carousel-control.right i {
  right: -25px;
}

#carousel-slider
.carousel-control.left, 
#carousel-slider
.carousel-control.right {
  background: none;
}



#feature {
  background: #f2f2f2;
  padding-bottom: 40px;
}
#feature.transparent-bg {
  margin-top:-40px;
  
}
.features{
  padding: 0;
}

.feature-wrap {
  margin-bottom: 35px;
  overflow: hidden;
}

.feature-wrap h2{
  margin-top: 10px;
}

.feature-wrap .pull-left {
  margin-right: 25px;
}

.feature-wrap i{
  font-size: 48px;
  height: 110px;
  width: 110px;
  margin: 3px;
  border-radius: 100%;
  line-height: 110px;
  text-align:center;
  background: #ffffff;
  color: #E8CE0E;
  border: 3px solid #ffffff;
  box-shadow: inset 0 0 0 5px #f2f2f2;
  -webkit-box-shadow: inset 0 0 0 5px #f2f2f2;
  -webkit-transition: 500ms;
  -moz-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
  float: left;
  margin-right: 25px;
}

.feature-wrap i:hover {
  background: #E8CE0E;
  color: #fff;
  box-shadow: inset 0 0 0 5px #E8CE0E;
  -webkit-box-shadow: inset 0 0 0 5px #E8CE0E;
  border: 3px solid #E8CE0E;
}

#recent-works .col-xs-12.col-sm-4.col-md-3{
  padding: 0;
}
/*
#recent-works{
    padding-bottom: ;
}
*/
.recent-work-wrap {
  position: relative;
}

.recent-work-wrap img{
  width: 100%;
}

.recent-work-wrap .recent-work-inner{
  top: 0;
  background: transparent;
  opacity: .8;
  width: 100%;
  border-radius: 0;
  margin-bottom: 0;
}

.recent-work-wrap .recent-work-inner h3{
  margin: 10px 0;
}

.recent-work-wrap .recent-work-inner h3 a{
  font-size: 24px;
  color: #fff;
}

.recent-work-wrap .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 0;
  background: #333;
  color: #fff;
  vertical-align: middle;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;  
  padding: 30px;
}

.recent-work-wrap .overlay .preview {
  bottom: 0;
  display: inline-block;
  height: 35px;
  line-height: 35px;
  border-radius: 0;
  background: transparent;
  text-align: center;
  color: #fff;
}

.recent-work-wrap:hover .overlay {
  opacity: 1;
}

#services {
  background: #000 url(../images/services/bg_services.jpg);
  background-size: cover;
  margin-top:70px;
}

#services .lead,
#services h2{
  color: #fff;
}

.services-wrap {
  padding: 40px 30px;
  background: #fff;
  border-radius: 4px;
  margin: 0 0 40px;
}

.services-wrap h3 {
  font-size: 20px;
  margin: 10px 0;
}

.services-wrap .pull-left {
  margin-right: 20px;
}

#middle {
  background: #fff;
  margin-top:-90px;
}

.skill h2{
  margin-bottom: 25px;
}

.progress-wrap{
  position: relative;
}

.progress .color1,
.progress .color1 .bar-width{
  background: #2d7da4;
}

.progress .color2,
.progress .color2 .bar-width{
  background: #6aa42f;
}

.progress .color3,
.progress .color3 .bar-width{
  background: #ffcc33;
}

.progress .color4,
.progress .color4 .bar-width{
  background: #db3615;
}

.progress, 
.progress-bar {
  height: 15px;
  line-height: 15px;
  background: #e6e6e6;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  text-align: right;
}

.progress{
  position: relative;
}

.progress .bar-width{
  position: absolute;
  width: 40px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  top: -30px;
  border-radius: 2px;
  margin-left: -30px;
}

.progress span{
  position: relative;
}

.progress span:before{
  content: " ";
  position: absolute;
  width: auto;
  height: auto;
  border-width: 8px 5px;
  border-style: solid;
  bottom: -15px;
  right: 8px;
}

.progress .color1 span:before{
  border-color: #2d7da4 transparent transparent transparent;
}

.progress .color2 span:before{
  border-color: #6aa42f transparent transparent transparent;
}

.progress .color3 span:before{
  border-color: #ffcc33 transparent transparent transparent;
}

.progress .color4 span:before{
  border-color: #db3615 transparent transparent transparent;
}

.accordion h2{
  margin-bottom: 25px;
}

.panel-default{
  border-color: transparent;
}

.panel-default>.panel-heading,
.panel{
  background-color: #e6e6e6; 
  border:0 none;
  box-shadow:none;
}

.panel-default>.panel-heading+.panel-collapse .panel-body{
  background: #fff;
  color: #858586;
}

.panel-body{
  padding: 20px 20px 10px;
}

.panel-group .panel+.panel{
  margin-top: 0;
  border-top: 1px solid #d9d9d9;
}

.panel-group .panel{
  border-radius: 0;
}

.panel-heading{
  border-radius: 0;
}

.panel-title>a{
  color: #4e4e4e;
}

.accordion-inner img{
  border-radius: 4px;
}

.accordion-inner h4{
  margin-top: 0;
}

.panel-heading.active{
  background: #1f1f20;
}

.panel-heading.active .panel-title>a{
  color:#fff;
}

a.accordion-toggle  i{
  width: 45px;
  line-height: 44px;
  font-size: 20px;
  margin-top: -10px;
  text-align: center;
  margin-right: -15px;
  background: #c9c9c9;
}

.panel-heading.active a.accordion-toggle i{
  background: #E8CE0E;
  color: #fff;
}

.panel-heading.active a.accordion-toggle.collapsed i{
  background: #E8CE0E;
  color: #fff;
}

.nav-tabs>li{
  margin-bottom: 0px;
  border-bottom: 1px solid #e6e6e6;
}

.nav-tabs{
  border-bottom: transparent;
  border-right: 1px solid #e6e6e6;
}

.nav-tabs>li>a {
  background: #f5f5f5;
  color: #666;
  border-radius: 0;
  border: 0 none;
  line-height: 24px;
  margin-right:0;
  padding: 13px 15px;
}

.nav-tabs li:last-child{
  border-bottom: 0 none;
} 

.nav-stacked>li+li{
  margin-top: 0;
}

.nav-tabs>li>a:hover{
  background: #1f1f20;
  color:#fff;
}

.nav-tabs>li.active>a, 
.nav-tabs>li.active>a:hover, 
.nav-tabs>li.active>a:focus {
  border: 0;
  color:#fff;
  background: #1f1f20;
  position: relative;
}

.nav-tabs>li.active>a:after {
  position: absolute;
  content:  "";
  width: auto;
  height: auto;
  border-style:solid;
  border-color: transparent transparent transparent #1f1f20;
  border-width: 25px 22px;
  right: -44px;
  top:0;
}

.tab-wrap{
  border:1px solid #e6e6e6;
  margin-bottom: 20px;
}

.tab-content{
  padding: 20px;
}

.tab-content h2{
  margin-top: 0;
}

.tab-content img{
  border-radius: 4px;
}

.testimonial h2{
  margin-top: 0;
}

.testimonial-inner {
  color:#858586;
  font-size: 14px;
}

.testimonial-inner .pull-left{
  border-right: 1px solid #e7e7e7;
  padding-right: 15px;
  position: relative;
}

.testimonial-inner .pull-left:after{
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  top: 50%;
  margin-top: -5px;
  background: #FFF;
  -webkit-transform: rotate(45deg);
  border: 1px solid #e7e7e7;
  right: -5px;
  border-left: 0 none;
  border-bottom: 0 none;
}

#partner {
  background: url(../images/partners/partner_bg.png) 50% 50% no-repeat;
  background-size: cover;
}

#partner {
  color: #fff;
  text-align: center;
}

#partner h2, 
#partner h3 {
  color: #fff;
}

.partners ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.partners ul li{
  display: inline-block;
  float: left;
  width: 20%;
}

#conatcat-info{
  background: #fff url(../images/contact.png) no-repeat 90% 0;
  padding: 30px 0;
}

.contact-info i{
  width: 60px;
  height: 60px;
  font-size: 40px;
  line-height: 60px;
  color: #fff;
  background: #000;
  text-align: center;
  border-radius: 10px;
}

.contact-info h2{
  margin-top: 0;
  color: #000;
}

.contact-info{
  color:#000;
}


.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;
}

.services {
  padding: 0;
}

.get-started {
  background: none repeat scroll 0 0 #F3F3F3;
  border-radius: 3px;
  padding-bottom: 30px;
  position: relative;
  margin-bottom: 18px;
  margin-top: 60px;
}

.get-started h2 {
  padding-top: 30px;
  margin-bottom: 20px;
}

.request {
  bottom: -15px;
  left: 50%;
  position: absolute;
  margin-left: -110px;
}

.request h4 {
  position: absolute;
  width: 220px;
  position:relative;
}

.request h4 a{
  background:#E8CE0E;
  color: #fff;
  font-size: 14px;
  font-weight: normal;
  border-radius: 3px;
  padding: 5px 15px;
}

.clients-area {
  padding: 60px;
}

.clients-comments {
    background-image: url("../images/image_bg.png");
    background-position: center 118px;
    background-repeat: no-repeat;
    margin-bottom: 100px;
}

.clients-comments img {
  background:#DDDDDD;
  border: 1px solid #DDDDDD;
  height: 182px;
  padding: 3px;
  width: 182px;
  transition: all 0.9s ease 0s;
  -moz-transition: all 0.9s ease 0s;
  -webkit-transition: all 0.9s ease 0s;
  -o-transition: all 0.9s ease 0s;
}

.clients-comments h3 {
  margin-top: 55px;
  font-weight: 300;
  padding: 0 40px;
}

.clients-comments h4 {
  font-weight: 300;
  margin-top: 15px;
}


.clients-comments  h4  span {
  font-weight: 700;
  font-style: oblique;
}

/*************************
********* Portfolio CSS ******
**************************/
#portfolio {
  margin-top: 70px;
}

#portfolio_page {
  margin-top: 115px;
  padding-bottom: 0;
}

.portfolio-items, 
.portfolio-filter {
  list-style: none outside none;
  margin: 0 0 40px 0;
  padding: 0;
}

.portfolio-filter > li {
  display: inline-block;
}

.portfolio-filter > li a {
  background: none repeat scroll 0 0 #FFFFFF;
  font-size: 14px;
  font-weight: 400;
  margin-right: 20px;
  text-transform: uppercase;
  transition: all 0.9s ease 0s;
  -moz-transition: all 0.9s ease 0s;
  -webkit-transition: all 0.9s ease 0s;
  -o-transition: all 0.9s ease 0s;
  border: 1px solid #F2F2F2;
  outline: none;
  border-radius: 3px;
}

.portfolio-filter > li a:hover,
.portfolio-filter > li a.active{
  color:#fff;
  background: #E8CE0E;
  border: 1px solid #E8CE0E;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.portfolio-items > li {
  float: left;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.portfolio-item {
  margin: 0;
  padding:0;
}

/* Start: Recommended Isotope styles */
/**** Isotope Filtering ****/
.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  -ms-transition-property: height, width;
  -o-transition-property: height, width;
  transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -ms-transition-property: -ms-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  transition-property: transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -ms-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}

/* End: Recommended Isotope styles */
/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
}
5
  • 2
    Las tablas (<table>) son los elementos html menos responsivos (por no decir nada responsivos) con los que puedas trabajar. Existen muchas formas de lidiar con este problema, pero ninguna hará que una tabla sea 100% responsiva. Podrías apoyarte en algún framework css o al menos revisar cómo implementan dichos frameworks el aspecto responsive para los elementos de tabla. Un framework muy popular que implementa tablas responsivas es Bootstrap. Saludos Commented el 5 ene. 2021 a las 19:24
  • Gracias @MauricioContreras , la verdad es que tiene 8 archivos de css, entre ellos Bootstrap v3.3.0 , pero no se como corregir esto. El 'div' con las tablas le copie yo de otro sitio web
    – Mari Cruz
    Commented el 5 ene. 2021 a las 19:29
  • 1
    Si tienes bootstrap 3.3 deberias poder agregar a tu etiqueta <table> la clase "class="table table-responsive" <table class="table table-responsive"> Commented el 5 ene. 2021 a las 19:31
  • Claro, en este caso, tiene <table class="egt">. @GerardoMarroquin , ya que lo copie desde otra plantilla web
    – Mari Cruz
    Commented el 5 ene. 2021 a las 19:34
  • 1
    Genial @Marcos he utilizado tu solución, ya que con la idea de GerardoMarroquin no funcionaba. Gracias, veremos si a Google le gusta. Puedes poner respuesta y la aceptaré con gusto
    – Mari Cruz
    Commented el 5 ene. 2021 a las 19:53

2 respuestas 2

1

Si la idea es que no se genere scroll horizontal a nivel del documento, entonces podrías:

  • Meter la <table> dentro de un <div>
  • Al <div> agregarle overflow:auto para tener una barra de scroll horizontal a nivel de la tabla
  • Opcionalmente al <div> podes agregarle height: 90vh para agregar scroll vertical y así tener ambas barras de scroll visible en la pantalla.

Ejemplo:

.table-container {
  overflow: auto;
  height: 90vh;
}
<section id="portfolio">
  <div class="container">
    <div class="container-politica">
      <h2>1. Política de privacidad</h2>
      <p>Este sitio web informa a los usuarios del sitio web sobre su política respecto del tratamiento ye servicios a través de su sitio web.</p <p>El uso de esta web implica la aceptación de esta política de privacidad</p>

      <h2>¿Qué son las cookies propias y las de terceros?</h2>
      <p>Las cookies propias son las generadas por la página que está visitando y las de terceros son las generadas por servicios o proveedores externos como Mailchimp, Mailrelay, Facebook, Twitter, Google, etc.</p>
      <h2>¿Se pueden eliminar las cookies?</h2>
      <p>Sí. No sólo eliminar, también bloquear, de forma general o particular para un dominio específico. Para eliminar las cookies de un sitio web debe ir a la configuración de su navegador y allí podrá buscar las asociadas al dominio en cuestión y proceder
        a su eliminación.</p>


      <h2>Cookies de redes sociales</h2>
      <p>Las Cookies de redes sociales pueden almacenarse en su navegador mientras navega por haciaelautoempleo.com por ejemplo, cuando utiliza el botón de compartir contenidos de haciaelautoempleo.com en alguna red social.</p>
      <p>Las empresas que generan estas cookies correspondientes a las redes sociales que utiliza esta web tienen sus propias políticas de cookies:</p>
      <ul>
        <li>Cookie de Twitter, según lo dispuesto en su
          <a target="_blank" href="https://twitter.com/privacy">Política de privacidad y uso de cookies.</a>
        </li>
        <li>Cookie de Google+ y Google Maps, según lo dispuesto en su página sobre qué
          <a target="_blank" href="http://www.google.com/intl/es/policies/technologies/types/">tipo de cookies
            utilizan</a>.</li>
      </ul>
      <p>&nbsp;</p>
      <p>En cumplimiento de lo establecido en el artículo 22.2 de la LSSI se detallan las cookies que pueden instalarse habitualmente durante la navegación por este sitio web:</p>
      <div class="table-container">
        <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>web</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>web.com </th>
            <td>_ga</td>
            <td>Caducada.</td>
            <td></td>
            <td>Se utiliza para cualquier tipo de conexión.</td>
          </tr>

          <tr>
            <th>web.com </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>

        </table>
      </div>
      <h2>Más información sobre las cookies</h2>
      <p>Puedes consultar el reglamento sobre cookies publicado por 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>
    </div>
  </div>
</section>


Otra opción es agregar a la <table> word-break: break-all para forzar que las palabras largas se corte y columnas se puedan encojer automáticamente.

Ejemplo:

table {
word-break: break-all;
}
<section id="portfolio">
  <div class="container">
    <div class="container-politica">
      <h2>1. Política de privacidad</h2>
      <p>Este sitio web informa a los usuarios del sitio web sobre su política respecto del tratamiento ye servicios a través de su sitio web.</p <p>El uso de esta web implica la aceptación de esta política de privacidad</p>

      <h2>¿Qué son las cookies propias y las de terceros?</h2>
      <p>Las cookies propias son las generadas por la página que está visitando y las de terceros son las generadas por servicios o proveedores externos como Mailchimp, Mailrelay, Facebook, Twitter, Google, etc.</p>
      <h2>¿Se pueden eliminar las cookies?</h2>
      <p>Sí. No sólo eliminar, también bloquear, de forma general o particular para un dominio específico. Para eliminar las cookies de un sitio web debe ir a la configuración de su navegador y allí podrá buscar las asociadas al dominio en cuestión y proceder
        a su eliminación.</p>


      <h2>Cookies de redes sociales</h2>
      <p>Las Cookies de redes sociales pueden almacenarse en su navegador mientras navega por haciaelautoempleo.com por ejemplo, cuando utiliza el botón de compartir contenidos de haciaelautoempleo.com en alguna red social.</p>
      <p>Las empresas que generan estas cookies correspondientes a las redes sociales que utiliza esta web tienen sus propias políticas de cookies:</p>
      <ul>
        <li>Cookie de Twitter, según lo dispuesto en su
          <a target="_blank" href="https://twitter.com/privacy">Política de privacidad y uso de cookies.</a>
        </li>
        <li>Cookie de Google+ y Google Maps, según lo dispuesto en su página sobre qué
          <a target="_blank" href="http://www.google.com/intl/es/policies/technologies/types/">tipo de cookies
            utilizan</a>.</li>
      </ul>
      <p>&nbsp;</p>
      <p>En cumplimiento de lo establecido en el artículo 22.2 de la LSSI se detallan las cookies que pueden instalarse habitualmente durante la navegación por este sitio web:</p>
      
        <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>web</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>web.com </th>
            <td>_ga</td>
            <td>Caducada.</td>
            <td></td>
            <td>Se utiliza para cualquier tipo de conexión.</td>
          </tr>

          <tr>
            <th>web.com </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>

        </table>
      <h2>Más información sobre las cookies</h2>
      <p>Puedes consultar el reglamento sobre cookies publicado por 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>
    </div>
  </div>
</section>

1

Al parecer ya haz obtenido la respuesta necesaria, pero de todas me gustaría aportar.

  1. Contiene la tabla con un DIV. [div table /div]
  2. Si no funciona, trata de ordenar de otra forma el contenido, quizás apoyándote en la documentación para las clases de Bootstrap para lograr lo responsivo.
  3. veo que no formateas los márgenes, quizás puede ser ese el error. (https://franciscoamk.com/usar-reset-css-o-normalizar/)
  4. hacer un css para la tabla con distintos @mediaquery (https://www.w3schools.com/cssref/css3_pr_mediaquery.asp )

Esas son alternativas que quizás puedan solucionar tu problema, espero que te ayuden

Saludos!

1
  • Gracias por su aporte @FranciscoCastillo , lo tendré en cuenta y estudiaré su idea
    – Mari Cruz
    Commented el 6 ene. 2021 a las 9:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.