CSS - Hacer una Tabla Responsive II

Hacer una Tabla Responsive II

Publicado por Adolfo (18 intervenciones) el 26/11/2022 13:37:52

Buenas de nuevo amigos;

Si antes pude resolver, a mi modo, el problema de una pequeña tabla para hacerla responsive cuando se veía desde un móvil (mediante grid), con éstas que son más complejas no veo una manera sencilla.

Se admiten sugerencias de cómo afrontar el reto de la mejor manera posible. Las tablas están en está página:

https://www.adolfoventas.es/galeria/index.php?file=minicms/cms&id=110

Tiene demasiadas columnas y filas como para visualizarse bien en un móvil, desborda el ancho y descuadra la página. Por encima de 800 px se ve bien, pero cuando empezamos a bajar no. La imagen de la página no tiene relación, la he ocultado y, aún así, la página queda descuadrada de anchura.

Código:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

<table width="100%" cellspacing="1" cellpadding="1" border="1" align="center">

    <thead>

    </thead>

    <tbody>

        <tr>

            <th colspan="2" scope="row"><strong><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Floración</span></span></strong></th>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">III-IV<br />

            </span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">IV-VI<br />

            </span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">(II) III-IV (V)</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">(II) III-V</span></span></div>

            </td>

        </tr>

        <tr>

            <th rowspan="2" scope="row">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Inflorescencia</span></span></div>

            </th>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Longitud (cm)</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">3-7 (8)</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">5-16 (17)</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">(4) 7-18 (22)</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">(3) 6-15 (20)</span></span></div>

            </td>

        </tr>

        <tr>

            <td>

            <div style="text-align: center;"><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Distancia entre Flores (mm)</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">2-5</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">4-8</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">10-17 (21)</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">3-6</span></span></div>

            </td>

        </tr>

        <tr>

            <th rowspan="4" scope="row">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Labelo</span></span></div>

            </th>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Longitud (mm)</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span class="bblink"><span style="font-size: 12pt; line-height: 115%;">5-8 (10)</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">7-12 (14)</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">8-12 (14)</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">9-15 (16)</span></span></div>

            </td>

        </tr>

        <tr>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Anchura (mm)</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">6-9 (10)</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">8-14</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">8-12 (13)</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">9-14 (17)</span></span></div>

            </td>

        </tr>

        <tr>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Longitud Lóbulo Lateral (mm)</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span class="bblink"><span style="font-size: 12pt; line-height: 115%;">1,5-3</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">3-6</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">2,5-3,5</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">2-3</span></span></div>

            </td>

        </tr>

        <tr>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Forma del Labelo</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Plegada</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Doblada en la mitad basal (geniculado)</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Plana a plegada</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Plana</span></span></div>

            </td>

        </tr>

        <tr>

            <th scope="row" rowspan="3">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Espolón</span></span></div>

            </th>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Longitud (mm)</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">12-16 (1</span></span><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">8)</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">7-12 (14)</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">7-12 (14)</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">10-18</span></span></div>

            </td>

        </tr>

        <tr>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Disposición</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Curvado</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Recto</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Recto o curvado</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Recto</span></span></div>

            </td>

        </tr>

        <tr>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Ápice</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Engrosado a mazudo</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Engrosado</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Engrosado a recto</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Mazudo a engrosado</span></span></div>

            </td>

        </tr>

        <tr>

            <th scope="row" rowspan="3">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Sépalos</span></span></div>

            </th>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Longitud (mm)</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">6-9</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">7-10</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">7-9 (10)</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">8-14</span></span></div>

            </td>

        </tr>

        <tr>

            <td style="text-align: center;">

            <div><span class="bblink"><span style="font-size: 12pt; line-height: 115%;">Forma</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Ovados</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Ovados lanceolados</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Anchamente ovados</span></span></div>

            </td>

            <td style="text-align: center;">

            <address><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Ovado lanceolados</span></span></address>

            </td>

        </tr>

        <tr>

            <td style="text-align: center;">

            <div><span class="bblink"><span style="font-size: 12pt; line-height: 115%;">Ápice</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Obtuso</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Obtuso</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Obtuso</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Agudo</span></span></div>

            </td>

        </tr>

        <tr>

            <td rowspan="3" style="text-align: center;">

            <div><strong><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Tallo</span></span></strong></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Longitud (cm)</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Hasta 30</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Hasta 56</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Hasta 40</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Hasta 45</span></span></div>

            </td>

        </tr>

        <tr>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Grosor en la base (mm)</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Hasta 7</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Hasta 10<br />

            </span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Hasta 11</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Hasta 12</span></span></div>

            </td>

        </tr>

        <tr>

            <td style="text-align: center;"><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Grosor en comienzo de inflorescencia (mm)</span></span></td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Hasta 3,5</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Hasta 4</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Hasta 4</span></span></div>

            </td>

            <td style="text-align: center;">

            <div><span style="font-size: 12pt; line-height: 115%;"><span class="bblink">Hasta 4,5</span></span></div>

            </td>

        </tr>

    </tbody>

</table>

Voy a depurar un poco el html mientras tanto.

Gracias anticipadas ;)

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Hacer una Tabla Responsive II

Publicado por Ivan (46 intervenciones) el 30/11/2022 10:10:11

Hola,

la mejor manera que yo encontré en su momento fué mirando el código de bootstrap.
No uso bootstrap en su totalidad, pero sí que me ha inspirado mucho en la forma de crear mis propias hojas css copiando sus técnicas.

Con bootstrap sería algo tan fácil como:

<div class="table-responsive">

  <table class="table">

...

  </table>

</div>

Tienes el código explicado aquí https://getbootstrap.com/docs/4.0/content/tables/

Un saludo!

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 10

Val: 101

Hacer una Tabla Responsive II

Publicado por Kathyu (30 intervenciones) el 30/11/2022 16:58:56

Algo así iba a preguntar, porque no usar un FW de CSS para ese fin? como Bootstrap

Valora esta respuesta

Comentar

Hacer una Tabla Responsive II

Publicado por Adolfo (18 intervenciones) el 05/12/2022 13:47:52

Gracias, no creáis que me he olvidado, es que ando de tiempo fatal y ésto quería verlo más tranquilamente porque apenas he leído nada sobre Bootstrap, pero mirando en la web tampoco es que sea capaz de usar su código, pero he captado la idea perfectamente e, incluso, he probado ya con algunos códigos de tablas reponsivas basadas en bootstrap que funcionarían, tan solo he añadir más filas y más columnas.

Ya os cuento, espero esta tarde resolver este asunto ;)

Valora esta respuesta

Comentar

Hacer una Tabla Responsive II

Publicado por Adolfo (18 intervenciones) el 07/12/2022 14:32:04

Ayer eché toda la tarde intentado resolver este tema. Es curioso como el mismo código resuelve el tema en el párrafo de cualquier web, pero en mi caso no. Es decir, cuando reduces el tamaño sale el scroll horizontal, que es lo esperado con bootstrap, pero "scrolea" (se puede decir así???, je, je, je), toda la página;

Captura

Lo ideal sería que solo se hiciera Scroll en la tabla que desborda el ancho del body, que es lo que veo ocurre en el estilo de Bootstrap, pero a mí no me sucede así que debo estar haciéndolo muy mal. Al menos he aprovechado para darle un aspecto más acorde a la tabla, que era mu sosa :p

Seguiremos intentándolo esta tarde, aunque sea por cansino lo consigo :)

Valora esta respuesta

Comentar

Hacer una Tabla Responsive II

Publicado por Adolfo (18 intervenciones) el 08/12/2022 09:28:18

Bueno, nuevo intento pero sin resultados. Curiosamente subo el código a Codepen y allí funciona:

Ver Codepen

Cuando reducimos la página, sale el Scroll, pero solo afecta a las tablas, no así a todo lo demás.

Sin embargo, si lo aplico a mi web, en dos páginas diferentes, obtenigo el mismo resultado, el Scroll actúa sobre la página completa, además de las tablas.

Caso A (enlazando el css de Bootstrap, tal y como está en codepen):
Con enlace al CSS de Bootstrap

Caso B (extrayendo el código css de bootstrap que relaciona la clase "table-responsive"):
Con la parte del CSS de Bootstrap integrado en mi página

El código css que he extraido de Boostrap para mi página ha sido éste:

.table-responsive{

    min-height:.01%;

    overflow-x:auto

@media screen and (max-width:767px){

    .table-responsive{

        width:100%;

        margin-bottom:15px;

        overflow-y:hidden;

        -ms-overflow-style:-ms-autohiding-scrollbar;

        border:1px solid #ddd

.table-responsive>.table{

    margin-bottom:0

.table-responsive>.table>tbody>tr>td,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>thead>tr>th{

    white-space:nowrap

En este caso, he creado un bootstrap.css y lo he enlazado en la página para no mezclar mi código con el del Bootstrap, así me es más fácil eliminarlo si no llego a ninguna solución.

Los resultados son los mismos, solo que el Caso A afecta a otras cosas donde tienen su propio estilo en mi web (color enlaces, etc).

Uno pensaría que hay algo más en mi página que afecta al Scroll, pero lo curioso es que si oculto las tablas (.table-responsive {display:none;}), el problema desaparece (lógico, lo que queda es texto que ocupa todo el ancho disponible del body).

En fin, no sé por qué pasa pero me temo que el camino de Bootstrap no me lleva a ningún sitio, quizás cambie el rumbo y me centre más en intercambio de filas y columnas con los @media queries.

No sé si se me escapa algo, la verdad :(

Valora esta respuesta

Comentar

Hacer una Tabla Responsive II

Publicado por Ivan (46 intervenciones) el 08/12/2022 11:41:12

Hola,

interesante como siempre tus preguntas jeje
Te has hecho un blog muy xulo con muchos detalles css que molan un montón, enhorabuena!

Pero también es cierto que cuando vas añadiendo librerias y frameworks cada vez se lía más la cosa.
He estado mirando tu problema y la solución es que en la clase table-responsive debes asignarle un width o max-width en píxeles, como por ejemplo tu contenedor 820px y el overflow-x en auto o scroll. Si lo estableces en 100%, por algún motivo que desconozco, entre tantas capas y reglas css la tabla no coge el ancho actual de la página.

Otra cosa que he visto, es que maquetas toda la web con una tabla, mezclando filas y columnas de tablas con <div> <h2> etc. Así se hacía en el año 2000 y el css se creó presisamente para acabar con ese método.

No pretendo dar un sermón, pero como veo que te gusta saber estas cosas te paso unos enlaces sobre el diseño web actual (web semántica) usada para ser más legible y entendible por los dispositivos.

Piensa en que el Sr Google también lee el código y cuanto más estandar y bien hecha esté tu web, mejor se posicionará en el buscador.

Definición en la wikiperdia
https://es.wikipedia.org/wiki/Web_sem%C3%A1ntica

Organismo oficial sobre estandares web
https://www.w3.org/standards/semanticweb/

Un pequeño tutorial práctico
https://www.w3schools.com/html/html5_semantic_elements.asp

Un saludo!

Valora esta respuesta

Comentar

Hacer una Tabla Responsive II

Publicado por Adolfo (18 intervenciones) el 11/12/2022 20:54:22

Ante todo, gracias por tu magnífica respuesta Ivan, siempre ayudando a todo el mundo, es magnífico tenerte por aquí.

En relación a tu respuesta, pues de nuevo te doy las gracias por los halagos pero creo que me atribuyes un mérito que no me merezco, y te explico por qué. Cierto que es una galería bastante completa, pero eso no es mérito mío. Imagino que conoces Coppermine Photo Gallery, verdad?, antes de salir las redes sociales, los amantes de la fotografía subíamos nuestras fotos a fotogalerías de este estilo, con cuentas propias, multiusuario, con opciones de comentarios y muchas cosas más. Hoy ya se ha quedado un poco obsoleta (las RRSS mataron este tipo de aplicaciones, como aquella canción que decía que el vídeo mató a las estrelleas de la radio), pero para mí me sirve. Por tanto, todo el mérito es de CPG, porque además es bastante sencilla de manejar, te buscas el hosting, la instalas con el instalador y listos, configuras algunas cosas al gusto y ya puedes subir tus fotos, con un título y un comentario, todo lo extenso que quieras. Además, para el que busca algo más, trabaja con plugins que generosamente alguien aportó al foro de CPG, uno de ellos es "miniCMS" que, con un pequeño editor HTML (FCKEditor), te permite "incrustar" código html en ciertos lugares de la web (en las categorías, en los álbumes, antes de la foto subida, etc). Incluso te permite crear un html sin incrustarlo en la propia galería, como si fuera una página anexa, sin relación (como es el caso de la página que contiene las tablas que nos ocupa).

Para la parte del CSS, CPG tiene decenas de templates (themes) que cambian la apariencia de la web, pero teniendo en cuenta que heredaron la estética de cuando se iniciaba CPG, han quedado muy antiguas. Pero nada que no se pueda resolver, en internet existen diferentes webs que venden sus templates, tanto para WP como para CPG, más modernos, además responsives, y éste es el caso que nos ocupa en mi web, cuyo diseño costaría unos 5€ (un regalo).

Y luego sí, a partir de aquí ya me atribuyo ese mérito (pero no antes), luego hay que coger ese diseño y darle unas pinceladas para que no sea como el resto y quede más personal, así que se coje el CSS que incluye y te pones a tocar cosas, como los border-radius, añadir algunos hovers que te gustan, corregir algunos fallos de diseño que no me funcionaban (ciertas anchuras, mejorar la parte responsibe en mi caso concreto), cambiar algunos colores, añadir slideshow........

Perdón por la chapa, pero es que era una medalla que no era para mí

, si te digo que la primera vez que me he puesto realmente en serio a ver códigos y aprender html y css es hace apenas unos meses igual lo entiendes mejor (viendo vídeos, buscando en internet cómo hacer determinados efectos en css, etc).

Con respecto a la web semántica, pues decirte que es la primera vez que leo sobre ello, pero entiendo el concepto, se trataría que etiquetar bloques con etiquetas estandarizadas como <article>, <footer>, <aside>, etc para facilitar a los exploradores la comprensión de lo que se está viendo. No sé si en mi página puedo cambiar ello, aunque toda CPG está integrada en un html del template, en realidad solo sería cambiar ese html principal y el css. Tendría que valorarlo si no es mucho jaleo.

Y con respeto al CSS, solo indicarte que ese código que añadía es el propio de Bootstrap, no es de cosecha mía, he copiado la parte que afecta a la clase "table-responsive" y es tal cual está, pero que no funciona en mi caso (pero sí fuera de mi web, como había comentado). El overflow-X estaba ya en auto, pero lo paso a scroll, a ver si funciona y, en cualquier caso, tiene sentido ponerle un tope a la tabla.

Lo he dejado así:

.table-responsive{

    min-height:.01%;

    overflow-x:scroll;

@media screen and (max-width:820px){

    .table-responsive{

        max-width:820px;

        margin-bottom:15px;

        overflow-y:hidden;

        -ms-overflow-style:-ms-autohiding-scrollbar;

        border:1px solid #ddd

.table-responsive>.table{

    margin-bottom:0

.table-responsive>.table>tbody>tr>td,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>thead>tr>th{

    white-space:nowrap

Pero sigue sin funcionar

, no sé qué puede estar influyendo para que afecte a todo el código en lugar de solo a la clase "table-responsive". Esto es más raro que un perro verde!

PD. Finalmente he mantenido el overflow-x:scroll en auto ya que solo me añadía el scroll, pero sin scroll (se veía nada más los botones derecho e izquierdo en las tablas, pero no me aparecía la barra desplazadora):

2022-12-11-21_11_11-Diferencias-Grupo-Mascula-Adolfo-Ventas-Mozilla-Firefox

2022-12-11-21_11_11-Diferencias-Grupo-Mascula-Adolfo-Ventas-Mozilla-Firefox

Valora esta respuesta

Comentar

Hacer una Tabla Responsive II

Publicado por Adolfo (18 intervenciones) el 12/12/2022 19:44:11

Pues ya he dado con la solución, Ivan. He descubierto que darle un ancho, concreto, en píxeles, a la tabla responsiva no funcionaba, pero sí que era eficaz cuando bajaba la anchura a lo que yo veía en la pantalla. Me explico, si le ponía un max-width de 820px, toda el body se desplazaba mediante scroll. Pero lugo bajé a diferentes anchuras para adaptarlas al ancho de un móvil, por ejemplo, y en ese caso sí, el resultado era el esperado.

Claro está que si reducía el tamaño de la ventana, dejaba de ser efectivo y no era plan de crear un media query por cada paso de reducción que pudiera considerar así que se me ocurrió que, quizás, podría basarlo en la anchura de la pantalla con la medida vw. Finalmente, he dejado el css así, y funciona perfectamente:

.table-responsive{

    min-height:.01%;

    overflow-x:auto;

@media screen and (max-width:739px){

    .table-responsive{

        max-width: 92vw;

        margin-bottom:15px;

        overflow-x:scroll;

        overflow-y:hidden;

        -ms-overflow-style:-ms-autohiding-scrollbar;

        border:1px solid #ddd

.table-responsive>.table{

    margin-bottom:0

.table-responsive>.table>tbody>tr>td,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>thead>tr>th{

    white-space:nowrap

He puesto 92vw porque si le pongo menos la tabla queda con un tamaño inferior, y si le pongo más, empieza a hacer Scroll toda el body.

En realidad lo que creo que pasa es que esos 92vw se sigue aplicando al body, pero las tamblas, como no caben, sale el Scroll (no así en el resto del documento que entra perfectamente en la pantalla.

Bueno, pues es otro tema arreglado. Voy a ver si todo ese css de bootstrap es necesario o puedo reducirlo a su máxima expresión sin que afecte.

Asunto arreglado, gracias a todos!!

Valora esta respuesta

Comentar

Hacer una Tabla Responsive II

Publicado por Adolfo (18 intervenciones) el 12/12/2022 20:57:26

Finalmente, lo he dejado en un simple;

.table-responsive {

      border:1px solid var(--color_destacado);

Y para la parte responsive, con esto era suficiente;

.table-responsive{

        max-width: 92vw;

        overflow-x:scroll;

        -ms-overflow-style:-ms-autohiding-scrollbar;

Y ya puestos, la otra trabla que tenía en otro hilo, en la que terminé usando un grid para cambiar de posición filas y columnas, la he puesto como ésta ahora, para que ambas estén en consonancia.

Valora esta respuesta

Comentar

Hacer una Tabla Responsive II

Publicado por Ivan (46 intervenciones) el 12/12/2022 22:23:28

Hola Adolfo,

genial que lo hayas solucionado, esa medida en vw, es mágica !! encaja perfectamente.

Es un poco a los que me refería, el table-responsive tenía que tener una medida establecida, no el 100%, pero al encontrar el vw has dado en el clavo !!

No he usado nunca el vw y yo también aprendo cosas nuevas en este foro jajaja

Un saludo!

Valora esta respuesta

Comentar

Css se rompe después de JS

Cambiar color de capa transparente en imagen