Tabella riga più lunga

[personalthings]

Ciao ragazzi,
mi sto dilettando nella combo html + css
Per il momento, da un punto di vista stilistico, non ho problemi. Ho solo un dubbio sulla creazione di una riga più lunga dentro una tabella.
Per semplificare, ecco un'immagine bozza:



Come potete vedere, la riga contenente IMM, SCRITTA, IMM, SCRITTA è più lunga e fuoriesce dalla tabella principale.
Ecco, chiedo aiuto proprio su questo effetto. Quale sarebbe la sintassi corretta?
E come posso allineare gli oggetti sottostanti in maniera ordinata? :(

[alemoppo]

È praticamente impossibile aiutarti, anche perché non hai mostrato il sorgente.

Io ti consiglio di utilizzare flexbox. Quando scrivi CSS, è molto utile utilizzare gli strumenti per sviluppatori presenti sul browser (solitamente si aprono con F12).

Ciao!

[GraphOGLRisorse]

Salve,
come le ha suggerito alemoppo, per fare una tabella con i css che sia anche responsive, tornano utili i flexbox.

Avendo a disposizione come guida solo qell'immagine che ha fatto, le ho creato un codice di esempio con i flexbox che ricalca quell'impostazione.

<style>
.flessibile1{
  display: flex;
  justify-content: center;
  background-color: #cccccc;
}
.flessibile1>div{
  background-color: #ffffff;
  color: #000000;
  width: 100px;
  margin: 2px;
  text-align: center;
  font-size: 30px;
}
.flessibile2{
  display: flex;
  justify-content: center;
  background-color: #cccccc;
  margin: 2px;
}
.flessibile2>div{
  background-color: #ffffff;
  color: #000000;
  width: 100px;
  margin: 0px;
  text-align: center;
  font-size: 30px;
}
img{
  width: 100%;
  height: auto;
}
</style>
<div style="margin:1px;background-color:#cccccc;">
<div class="flessibile1" style="height:5%;">
  <div style="flex-basis:100%"> </div> 
</div>
<div class="flessibile2" style="height:10%;">
  <div style="flex-basis:15%">img</div>
  <div style="flex-basis:50%">scritta</div>
  <div style="flex-basis:25%">img</div>
  <div style="flex-basis:20%">scritta</div>  
</div>
<div class="flessibile1" style="height:35%;">
  <div style="flex-basis:15%">1</div>
  <div style="flex-basis:50%">2</div>
  <div style="flex-basis:25%">3</div>
  <div style="flex-basis:20%">4</div>  
</div>
</div>

Per eventuali adattamenti, le basta fare un pò di prove con i valori delle classi css, nulla di complicato.

Cordiali saluti.