Question

嘿，我正在尝试在一个设定的框架内创建一个表格，并且它已经可以用于许多列。最后一列虽然包含一些我希望始终可见的链接，但前两列（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列和最后一列但是在其间填充剩余空间然后在这些之间滚动（水平）。我会在哪里找到这个???

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; }

Answer 2

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

这是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; }

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

2 个答案: