Question

现在我试图抓住ul并在点击时将其放在展开的tr下（使其看起来像是展开的）。它会移动ul，但它会保持thead中第一个的宽度。我需要ul才能移动表格的整个宽度。

<table>
<thead>
    <tr>
        <th class="header">number</th>
        <th class="header">details</th>
        <th class="header">first name</th>
        <th class="header">last name</th>
    </tr>
</thead>
<tbody> 
        <tr>
        <td>12345</td>
        <td class="expandable">Description
            <ul>
                <li><b>Sed ut:</b> perspiciatis unde omnis  error sit voluptatem</li>
                <li><b>Sed ut:</b> perspiciatis unde omnis  error sit voluptatem</li>
                <li><b>Sed ut:</b> perspiciatis unde omnis  error sit voluptatem</li>
            </ul>
        </td>
        <td>john</td>
        <td>smith</td>
    </tr>
</tbody>

这里是js

function legDesc(el){
el.click(function(){

var bag = $(this)
var width = bag.width()
var desc = bag.find('ul')
var parent = bag.parent()
bag.prev().css('width', width)

if($('.leg-desc ul').length > 0){
        desc.insertAfter(parent)
}else{
        var ul = el.parent().next()
        parent.next().prev().find('.leg-desc').append(ul)
}
bag.parents('tr').toggleClass('expanded')
})
}
  legDesc($('.leg-desc'))

Answer 1

你可以在li元素的css中设置white-space: nowrap

Answer 2

如果你想让整个事物成为一张桌子，你需要使用colspan来让你的ul穿过多个细胞，就像这个小提琴一样：http://jsfiddle.net/s8JZg/1/

如果你想让行的外观扩展但标题保持不变，你需要将它们分成两个单独的表，因为，正如crush指出的那样，同一个表中的列必须保持相同的宽度。您可以使用css规则在两个表中保持相同的列宽。

Jquery：需要在表内设置div的宽度

2 个答案: