html - Make an element's width depend on its grandparent's dynamic width--while having a fixed width parent -

pew, sounds complicated, huh? try describe can. basically, have 3 elements: div width auto, table width 500 , span width should auto, dependant on table's cell width.

let me show you:

<div>   <table>     <tr>       <td><span>some random content</span></td>       <td><span>some random content</span></td>     </tr>     <tr>       <td><span>some random content</span></td>       <td><span>some random content</span></td>     </tr>   </table> </div> 

here's css; borders enhanced clarity:

table, tr, td {     border: 1px solid black; }  table {     width: 500px; }  span {     border: 1px dotted red;     display: block;     word-wrap: break-word; }  div {     border: 1px dotted green; } 

rendered, looks this:

perfectly fine. noticed green dotted border? that's div: wide browser window. however, if resize whole thing, looks this:

look @ green border now: div resized expected. red dotted border (the span), still wide table, though. possible resizes according div, rather table, can still read entire text?

thanks in advance.

try percentage table's width, make fluid, width: 26% if screen size 1920px. 500/1920 * 100. he's gonna adapt screen size, if want fixed width @ full screen, , smaller after must use media query.