1

I have a div with a small width and an overflow visible. I have inside a larger table with only one cell and a text inside:

<div style="overflow:visible;width:0px;">
  <table> 
    <tr>
      <td style="border:solid">
         A small text with spaces...
      </td>
    </tr>
  </table>
</div>

I would like the width of the table to be set automotically as the text width but without breaking line. i.e. I would like to have the same result I would have if I writed only:

<table> 
  <tr>
    <td style="border:solid">
       A small text with spaces...
    </td>
  </tr>
</table>

How can I set the table to not be "of minimum width" without specifying a precise witdh?

Hentold
  • 853
  • 7
  • 11
  • 1
    Please add your CSS, it's not so clear, what you want to achieve. Maybe `white-space: nowrap;` on the table cell might help. But what are you actually trying to solve? This doesn't look like tabular data at all, so using a table isn't the best choice. If you explain your real goal a bit, maybe we can find a simple solution. – insertusernamehere Sep 27 '13 at 15:19
  • A little unclear on what you want to achieve... Are you looking for `min-width`, i.e. `min-width: 100px;`? – kunalbhat Sep 27 '13 at 15:20
  • From the code snippet I am unsure why you need that table at all, why not just use the div tag although I suspect you have a reason that is unclear here but more information would be useful – ShufflerShark Sep 27 '13 at 15:29

1 Answers1

2

I think your answer is here: Object larger than outside div

It uses the position absolute to remove the stipulations of the containers surrounding it. The one issue then is positioning, but You can fix that with setting the left and top CSS rules.

jsfiddle example

<div style="overflow:visible;width:0px;">
     <table> 
     <tr>
     <td style="border:solid;position:absolute;">
         A small text with spaces...
      </td>
    </tr>
  </table>
</div>
<div style="overflow:visible;width:0px;padding-top:30px;">
  <table> 
    <tr>
      <td style="border:solid;white-space:nowrap;">
         A small text with spaces...
      </td>
    </tr>
  </table>
</div>

EDIT

As said in a comment above by "insertusernamehere": "white-space:nowrap;" works as well.

NOTE:

Tables are not the best thing to use. Use DIV's and set the `"float:left/right;" CSS style so that they mimic tables. It is easier to code (for me at least, it takes some getting used to at first.) but it is much more browser friendly and you have more room to play in.

Community
  • 1
  • 1
JakeMoz
  • 94
  • 7