2

嘿，我正在尝试在设定的框架内创建一个表格，并且它有很多列。最后一列虽然包含一些我希望始终可见的链接，前两列（id，title）相同。我希望中间列可以水平滚动。

所以基本上我有这个：

    <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 列和最后一列，但让其余部分填满我的剩余空间，然后在它们之间滚动（水平）。我要去哪里？

4

2 回答 2

2

这是一个非常简化的 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>

查询

$('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; }
于 2013-05-07T14:55:53.787 回答
1

您可以将前两列放在自己的表中，然后将最后一列放在自己的表中吗？然后，您可以为内部表格设置固定宽度并将其溢出设置为滚动。

这是jsfiddle。

HTML：

<table border="1">
    <tr>
        <th>ID</th>
        <th>Title</th>
    </tr>
    <tr>
        <td>Test Title</td>
        <td>1</td>
    </tr>
    <tr>
        <td>Test Title</td>
        <td>1</td>
    </tr>
</table>
<div class="middle">
<table border="1" width="100%">     
    <tr>
        <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>
     </tr>
     <tr>
        <td>Col 1</td>
        <td>Col 2</td>
        <td>Col 3</td>
        <td>Col 4</td>
        <td>Col 5</td>
        <td>Col 6</td>
     </tr>
     <tr>
        <td>Col 1</td>
        <td>Col 2</td>
        <td>Col 3</td>
        <td>Col 4</td>
        <td>Col 5</td>
        <td>Col 6</td>
     </tr>
     </table>
</div>
<table border="1">
    <tr>
        <th>LINKS</th>
    </tr>
    <tr>
        <td>LINK 1  | LINK 2</td>
    </tr>
    <tr>
        <td>LINK 1  | LINK 2</td>
    </tr>
</table>

CSS

table { float:left; table-layout:fixed; }
.middle {  float:left; width:350px; overflow:auto;}
.middle table td, .middle table th { width:100px; background:red; }
于 2013-05-07T15:14:04.227 回答