Quien me ayuda a resolver este problema en tabla con CSS

Alguien puede ayudarme con este problema ?

Mi tabla en PC se ve completamente bien, pero en movil, la info queda en un pequeño espacio dentro de la tabla. (En la parte de abajo dejo el codigo que estoy utilizando).


En PC se ve así:


En movil se ve asi:



HTML:
<table class="tftable" border="1">
<tr><th>Nombre</th><th>Cantidad/100g</th></tr>
<tr><td>Componente</td><td>0.2 mg</td></tr>
</table>

CSS:
.tftable {
width: 100%;
font-size:12px;
color:#333333;
border-width: 1px;
border-color: #a9a9a9;
border-collapse: collapse;
}

.tftable th {
font-size:12px;
background-color:#b8b8b8;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9a9a9;
text-align:left;}
.tftable tr {
background-color:#ffffff;}
.tftable td {
font-size:12px;
border-width: 1px;
padding: 8px;border-style: solid;
border-color: #a9a9a9;
}
.tftable tr:hover {
background-color:#ffff99;}

@Media (max-width: 767px) {
tftable {
display: block;
overflow-x: auto;
white-space: nowrap;
}

'tftable' es el nombre que le pusiste a class .. en @ Media le falta el punto, asi .tftable{
y
el cierre '}' de @ media ... asi ...

@Media (max-width: 767px) {
.tftable {
...
}
}

Pero es @Media only screen and
y ya me sale como en tu movil

si le quitas a @ Media display: block; ya se ve bien pero al ancho con el width: 100%
pero ..
al llegar tftable a 766px 'cambia' con @ Media .. pero no cambia nada con width: 100%; es como si NO pusieras @ Media y se ajusta sola cuando reduces la pantalla

O asi ..
tftable se reduce al llegar a 766px y con width: max-content ya se le quita el 100% del ancho (imagen adjunta)

@Media only screen and (max-width: 767px)
.tftable {
display: block;
overflow-x: auto;
white-space: nowrap;
width: max-content;
}

¿asi? ¿o como? ¿o cual espacio?

Puko dijo:

'tftable' es el nombre que le pusiste a class .. en @ Media le falta el punto, asi .tftable{
y
el cierre '}' de @ media ... asi ...

@Media (max-width: 767px) {
.tftable {
...
}
}

Pero es @Media only screen and
y ya me sale como en tu movil

si le quitas a @ Media display: block; ya se ve bien pero al ancho con el width: 100%
pero ..
al llegar tftable a 766px 'cambia' con @ Media .. pero no cambia nada con width: 100%; es como si NO pusieras @ Media y se ajusta sola cuando reduces la pantalla

O asi ..
tftable se reduce al llegar a 766px y con width: max-content ya se le quita el 100% del ancho (imagen adjunta)

@Media only screen and (max-width: 767px)
.tftable {
display: block;
overflow-x: auto;
white-space: nowrap;
width: max-content;
}

¿asi? ¿o como? ¿o cual espacio?

Hacer clic para expandir...

Vale voy a probarlo, te agradezco.

Te funcionó con esas modificación?

@Media (max-width: 767px) {
.tftable {
display: block;
overflow-x: auto;
white-space: nowrap;
}

ultracobra dijo:

Te funcionó con esas modificación?

@Media (max-width: 767px) {
.tftable {
display: block;
overflow-x: auto;
white-space: nowrap;
}

Hacer clic para expandir...

Sí funcionó