Javascript 如何使jQueryUI选项卡与其中的对象一样宽？

我在其中一个选项卡中有一个表，它比默认jQueryUI选项卡的宽度长，所以看起来很难看

---

有没有办法将选项卡的宽度更改为与其中的表格一样宽？

我猜您将使用以像素为单位的表格宽度。由于没有提供代码，我只能做一些猜测工作。尝试将表格宽度更改为百分比，然后重试

请张贴代码，这样问题会更清楚

这只是一个假设。请看这个 我已经想出了一个可能对你有帮助的解决办法

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>

编辑：

CSS

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

div#tabs{
  width: 1000px;
}

Css将完成这个任务，只需添加它并尝试一下

---

希望这有帮助

我猜您将使用以像素为单位的表格宽度。由于没有提供代码，我只能做一些猜测工作。尝试将表格宽度更改为百分比，然后重试

请张贴代码，这样问题会更清楚

这只是一个假设。请看这个 我已经想出了一个可能对你有帮助的解决办法

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>

编辑：

CSS

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

div#tabs{
  width: 1000px;
}

Css将完成这个任务，只需添加它并尝试一下

---

希望这有帮助

你能展示一下你的问题的jsfiddle.net演示吗？我正在处理IE8，而jsfiddle不处理IE8://但它只是在一个选项卡内创建一个表，并添加一个超长的textfield@rahulmaindargi您将看到边框的宽度已固定。您可以展示您的问题的jsfiddle.net演示吗？我正在处理IE8和JSFIDLE不适用于IE8://但它只是在其中一个选项卡内创建一个表，并添加一个超长标签textfield@rahulmaindargi你会看到边界的宽度是固定的这是一个很好的方法！谢谢但这并不能解决我的问题。每个td都有一个大小为12的文本字段，因此，即使我更改了表格的宽度，它也有一个默认的大小，用于显示选项卡内的内容，我想用选项卡更改整个表格的宽度是可行的，但这就是我不知道如何做的。因此，您有大小为12px的文本字段。你的标签中有多少列？randomizertech:看，请看编辑过的答案。CSS成功了！我不知道我以前怎么没有想到这个！非常感谢。这是一个很好的方法！谢谢但这并不能解决我的问题。每个td都有一个大小为12的文本字段，因此，即使我更改了表格的宽度，它也有一个默认的大小，用于显示选项卡内的内容，我想用选项卡更改整个表格的宽度是可行的，但这就是我不知道如何做的。因此，您有大小为12px的文本字段。你的标签中有多少列？randomizertech:看，请看编辑过的答案。CSS成功了！我不知道我以前怎么没有想到这个！非常感谢。