javascript - jQuery uiタブをその中のオブジェクトと同じ幅にする方法は?

Question

タブの 1 つの中にテーブルがあり、デフォルトの jQuery ui タブの幅よりも長いため、見栄えが悪くなります。

タブの幅をその中のテーブルと同じ幅に変更する方法はありますか?

Answer 1

テーブルの幅をピクセル単位で使用します。コードが提供されていないため、推測作業のみを行うことができます。表の幅をパーセンテージに変更して試してみてください。

質問がより明確になるように、コードを投稿してください...

これは単なる仮定です。このjsFiddle を見てください。役立つ解決策を見つけました。

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();
 });

編集 ：

CSS

div#tabs{
  width: 1000px;
}

Cssはそれを追加して試してみるだけでトリックを実行しますこれが役立つことを願っています