javascript - 如何使 jQuery ui 选项卡与其中的对象一样宽？

Question

我在其中一个选项卡内有一个表格，它比默认 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会做的只是添加它并尝试希望这会有所帮助