Quem me ajuda a resolver este problema em tabela com 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 disse:

'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?

Clique 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 disse:

Te funcionó con esas modificación?

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

Clique para expandir...

Sí funcionó