Il contenuto della cella dovrebbe occupare tutte le righe senza modificare la larghezza delle colonne

Voglio avere un piccolo tavolo non standard. Ecco come dovrebbe apparire:

inserisci la descrizione dell'immagine qui

Questa è la mia demo . Come puoi vedere, la larghezza della prima colonna è aumentata dal testo, ma non voglio questo comportamento. Voglio che il testo vada da sinistra a destra in full row.

AGGIORNAMENTO: per coloro che vogliono chiudere la domanda. Leggi sotto per favore.

Non posso usare addizionali tr e td con colspan per la nota. Uso angular2 e datatables.net per le tabelle e interrompe la selezione e recupera i dati selezionati.

usa colspan

      JS Bin   
First Name Last Name Username
Mark
Age: 18
Income: 85
Otto @mdo
Note: A big text here, A big text here, A big text here, A big text here, A big text here
Jacob Thornton @fat
Larry the Bird @twitter

Puoi anche aggiungere un CSS incorporato

 Mark 
Age: 18
Income: 85
Note: A big text here, A big text here, A big text here, A big text here, A big text here

specifica la larghezza della tua tabella.

aggiungi queste proprietà CSS al tuo foglio di stile. Funzionerà bene

  table { table-layout: fixed; width: 100px; } 

Sono stato aggiunto lo snippet qui sotto.

 table { table-layout: fixed; width: 100px; } 
      JS Bin   
First Name Last Name Username
Mark
Age: 18
Income: 85
Note: A big text here, A big text here, A big text here, A big text here, A big text here
Otto @mdo
Jacob Thornton @fat
Larry the Bird @twitter

Potresti usare qualcosa come bootstrap o fondamenta per simulare una struttura di tabelle