Comment placer du texte sur deux cellules de table?

Question

Disons que nous avons cette table:

<table> 
    <tr> 
    <td width="50px">Text crossing two td´s</td> 
    <td width="50px"></td> 
    </tr> 
</table> 

Comment le texte peut être au-dessus des deux td's et suivre la taille de la tr?

https://jsfiddle.net/roj7w1t4/

Est-il possible?

EDIT
J'ai besoin des frontières pour rester visible. Par conséquent, je ne peux pas utiliser colspan!
Est-il possible de créer un span et de le mettre sur le td?

Pour plus de sens ce que je suis en train de faire .. c'est un petit exemple de ma demande: What printable element is better to use than linear-gradient?

L'ÉLÉMENT

<div class="elementsDiv ui-draggable ui-draggable-handle" id="29065-1_105" data-weight="938" data-nr="105" style="width: 159.5px; height: 20px; position: absolute; left: 108px; top: 27.1875px;"><table style="height: 100%;"><tbody><tr style="border 1px solid black;"><td style="width: 34.2px; border-right: 1px dotted black;">105</td><td style="width: 91px; border-right: 1px dotted black;"></td><td></td></tr></tbody></table></div> 

Answer 1

La seule façon de le faire l'image est de placer un élément extérieur de la table et ayant un récipient autour de la table et l'élément. Puis placer l'élément en utilisant la position absolue sur le dessus de la table.

div { 
 
    width: 200px; 
 
    position: relative; 
 
} 
 
table { 
 
    width: 200px; 
 
} 
 
td { 
 
    border: 1px solid red; 
 
    height: 40px; 
 
} 
 
span { 
 
    position: absolute; 
 
    padding: 2px; 
 
    z-index: 99; 
 
}

<div> 
 
<span>Lorem ipsum dolor sit amet</span> 
 
<table> 
 
<tr> 
 
    <td></td> 
 
    <td></td> 
 
</tr> 
 
</table> 
 
</div>

Answer 2

table { 
 
    border: 1px solid black; 
 
} 
 

 
td { 
 
    border: 1px solid red; 
 
} 
 

 
th { 
 
    text-align:center; 
 
}

<table> 
 
    <tr> 
 
    <th colspan="2">Monthly Savings</th> 
 
    </tr> 
 
    <tr> 
 
    <td width="50px">This text should cross two td´s</td> 
 
    <td width="50px"></td> 
 
    </tr> 
 
</table>

Vous pouvez inclure la bordure sera visible e. Tout le meilleur. Pour toute requête s'il vous plaît commenter.

Answer 3

Que diriez-vous de changer votre disposition html? Essayez d'utiliser l'élément pseudo after et le position:absolute. Cette technique me sauve dans beaucoup de situation et c'est très fort, je pense.

div { 
 
    border: 1px solid green; 
 
    padding: 2px; 
 
    position: relative; 
 
    width: 150px; 
 
} 
 

 
div:after { 
 
    background: green; 
 
    bottom: 0; 
 
    content: ''; 
 
    display: block; 
 
    left: 50%; 
 
    position: absolute; 
 
    top: 0; 
 
    transform: translateX(-50%); 
 
    width: 1px; 
 
}

<div> 
 
This text should cross two td´s 
 
</div>