如何让jQuery ui tab与它里面的对象一样宽?

时间:2013-05-23 16:17:08

标签: javascript jquery-ui html-table width jquery-ui-tabs

我在其中一个标签内有一个表,它比默认的jQuery ui标签宽度的宽度长,所以它看起来很难看。

有没有办法将标签的宽度更改为与其内部的表格一样宽?

1 个答案:

答案 0 :(得分: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会做的就是添加它并尝试 希望这有帮助