Question

我在表格中制作可滚动的name时遇到问题。我用过bootstrap。我已经将category和overflow-x: scroll列粘贴为另一列thead。

问题是如何在滚动条件中使tfoot和tbody成为粘性且仅$keywords=$this->input->post('searchbook'); if($keywords){ $associate_tag = " xxxxx"; $aws_secret_access_key = "xxxxx"; $aws_access_key_id = "xxxxx"; $item_page=10; $base_url = 'http://ecs.amazonaws.com/onca/xml?Service=AWSECommerceService&AWSAccessKeyId='. $aws_access_key_id .'&'; $url_params = array( 'Operation'=>'ItemSearch', 'ItemPage'=>$item_page, 'AssociateTag'=>$associate_tag, 'Version'=>'2013-08-01', 'ResponseGroup'=>'Images,ItemAttributes,EditorialReview', 'SearchIndex'=>'Books', 'Keywords'=>rawurlencode($keywords) ); $url_parts = array(); foreach(array_keys($url_params) as $key) $url_parts[] = $key."=".$url_params[$key]; sort($url_parts); $url = $base_url . implode('&',$url_parts); $host = parse_url($base_url . implode('&',$url_parts),PHP_URL_HOST); $timestamp = gmstrftime('%Y-%m-%dT%H:%M:%S.000Z'); $url = $url. '&Timestamp=' . $timestamp; $paramstart = strpos($url,'?'); $workurl = substr($url,$paramstart+1); $workurl = str_replace(",",",",$workurl); $workurl = str_replace(":",":",$workurl); $params = explode("&",$workurl); sort($params); $signstr = "GET\n" . $host . "\n/onca/xml\n" . implode("&",$params); $signstr = base64_encode(hash_hmac('sha256', $signstr,$aws_secret_access_key, true)); $signstr = urlencode($signstr); $signedurl = $url . "&Signature=" . $signstr; $request = $signedurl; $request; //Send request to AWS $session = curl_init($request); curl_setopt($session, CURLOPT_HEADER, false); curl_setopt($session, CURLOPT_RETURNTRANSFER, true); $response = curl_exec($session); curl_close($session); $parsed_xml = simplexml_load_string($response); var_dump($parsed_xml);exit; }。我已经创建了jsfiddle https://jsfiddle.net/awpt6cL0/1/。

由于

Answer 1

这是一个解决方案，它不仅仅是一个CSS解决方案，它还使用了几行jQuery。

这是一个jsFiddle用于演示目的。

HTML代码：

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
            <th>Column 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
        </tr>
        <tr>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
        </tr>
        <tr>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
        </tr>
        <tr>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
        </tr>
        <tr>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
        </tr>
        <tr>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
        </tr>
        <tr>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
        </tr>
        <tr>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
        </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>
          FOOTER
        </td>
        <td>
          FOOTER
        </td>
        <td>
          FOOTER
        </td>
        <td>
          FOOTER
        </td>
        <td>
          FOOTER
        </td>
      </tr>
    </tfoot>
</table>

CSS代码

html {
    font-family: verdana;
    font-size: 10pt;
    line-height: 25px;
}
table {
    border-collapse: collapse;
    width: 400px;
    overflow-x: scroll;
    display: block;
}
thead {
    background-color: #EFEFEF;
}
thead, tbody {
    display: block;
}
tbody {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 140px;
}
td, th {
    min-width: 100px;
    height: 25px;
    border: dashed 1px lightblue;
}

Jquery代码：

$('table').on('scroll', function () {
    $("table > *").width($("table").width() + $("table").scrollLeft());
});

希望这有帮助！

在Tbody处使可滚动垂直和水平

1 个答案: