jquery - 仅在表中的几列上创建溢出

Question

嘿，我正在尝试在设定的框架内创建一个表格，它有很多列。最后一列虽然包含一些我希望始终可见的链接，但前两列(id，标题)也是如此。我希望中间的列可以水平滚动。

所以基本上我有这个:

    <table>
     <tr>
        <th>ID</th>
        <th>Title</th>
        <th>Test Col 1</th>
        <th>Test Col 2</th>
        <th>Test Col 3</th>
        <th>Test Col 4</th>
        <th>Test Col 5</th>
        <th>Test Col 6</th>
        <th>LINKS</th>
     </tr>
     <tr>
        <td>1</td>
        <td>Test Title</td>
        <td>Col 1</td>
        <td>Col 2</td>
        <td>Col 3</td>
        <td>Col 4</td>
        <td>Col 5</td>
        <td>Col 6</td>
        <td>LINK 1  | LINK 2</td>
     </tr>
     <tr>
        <td>1</td>
        <td>Test Title</td>
        <td>Col 1</td>
        <td>Col 2</td>
        <td>Col 3</td>
        <td>Col 4</td>
        <td>Col 5</td>
        <td>Col 6</td>
        <td>LINK 1  | LINK 2</td>
     </tr>
     </table>

所以表格对我来说太宽了，我总是想显示表格中的第 1,2 列和最后一列，但让中间的其余部分填满我的剩余空间，然后在这些之间滚动(水平) 。我该去哪里做这个？？？

Answer 1

这是一个非常简化的 jquery 方法:

http://jsfiddle.net/pmDpa/

HTML

<table>
     <tr>
        <th>ID</th>
        <th>Title</th>
        <th>Test Col 1</th>
        <th>Test Col 2</th>
        <th>Test Col 3</th>
        <th>Test Col 4</th>
        <th>Test Col 5</th>
        <th>Test Col 6</th>
        <th>LINKS</th>
     </tr>
</table>

JQUERY

$('th:nth-child(3)').addClass('no-show');
$('th:nth-child(4)').addClass('no-show');
$('th:nth-child(5)').addClass('no-show');
$('th:nth-child(6)').addClass('no-show');
$('th:nth-child(7)').addClass('no-show');
$('th:nth-child(8)').addClass('no-show');

CSS

.no-show { display:none; }