How to make jQuery ui tab be as wide as the objects inside of it?

Question

I have a table inside of one of the tabs and it's longer than the width of the default jQuery ui tabs width so it looks ugly.

Is there a way to change the width of the tab to be as wide as the table inside of it?

Answer 1

You will be using the table width in pixels i guess. As the code is not provided i can do some guess work only. Try changing the table width to percentage and try.

Please post the code, so the question will be clearer...

This is just an assumption. Please look at this jsFiddle I have worked out a solution that may help you.

HTML

<div id="tabs" width="1000px">
<ul>
    <li><a href="#tabs-1">Actual Tab</a>
    </li>
    <li><a href="#tabs-2">Problem</a>
    </li>
    <li><a href="#tabs-3">problem fix</a>
    </li>
</ul>
<div id="tabs-1">
    Flexible tab
            <table border="1" cellspacing="0">
        <td>Column 1 Content</td>
        <td>Column 2 Content</td>
        <td>Column 3 Content</td>
        <td>Column 4 Content</td>
        <td>Column 5 Content</td>
        <td>Column 6 Content</td>
    </table>
</div>
<div id="tabs-2">
    this is a table with Fixed width so this will go beyond your tab
    <table border="1" cellspacing="0" width ="900px">
        <td>Column 1 Content</td>
        <td>Column 2 Content</td>
        <td>Column 3 Content</td>
        <td>Column 4 Content</td>
        <td>Column 5 Content</td>
        <td>Column 6 Content</td>
    </table>
</div>
<div id="tabs-3">
    <table border="1" cellspacing="0" width ="100%">
        <td>Column 1 Content</td>
        <td>Column 2 Content</td>
        <td>Column 3 Content</td>
        <td>Column 4 Content</td>
        <td>Column 5 Content</td>
        <td>Column 6 Content</td>
    </table>
</div>

JS

 $(function () {
     $("#tabs").tabs();
 });

EDIT :

CSS

div#tabs{
  width: 1000px;
}

The Css will do the trick just add it and try Hope this helps