Question

我要在橙色阴影区域左右滚动。

我不知道如何应用这项技术。

我想尽可能避免使用插件。

如果你知道怎么做，请帮助我。

Answer 1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
  <p>Css</p>
    <style>

        table {
            border-collapse:collapse; }

       .long { 
            background:yellow; letter-spacing:1em; }

        div.first1 {
            width: auto;
            height: 150px;           
            padding-bottom: 1px;
            position: absolute;
            left:0;
            top:auto;
        }

        div.second1 {
             width: 600px; 
            overflow-x:scroll;  
            overflow-y:visible;
            margin-left:5em; 
            padding-bottom:1px;
            height:auto;
        }

        .headcol {
            position: absolute;
            width: 5em;
            left: 0;
            top: auto;
            border-right: 0px none black;
            border-top-width: 3px;
            margin-top: -3px;
        }
    </style>
</head>
<body> 
<p>Html</p>
    <div class="first1">
        <div class="second1">
            <table style="border:1px solid black;" border="1">

                    <tr>
                        <td class="headcol">11111111111</td>
                        <td class="long">22222222222222222222222222222222222222222222</td>
                    </tr>
                    <tr>
                        <td class="headcol">1</td>
                        <td class="long">22222222222222222222222222222222222222222222</td>
                    </tr>
                    <tr>
                        <td class="headcol">1</td>
                        <td class="long">22222222222222222222222222222222222222222222</td>
                    </tr>
                    <tr>
                        <td class="headcol">1</td>
                        <td class="long">22222222222222222222222222222222222222222222</td>
                    </tr>
                    <tr>
                        <td class="headcol">1</td>
                        <td class="long">22222222222222222222222222222222222222222222</td>
                    </tr>

            </table>
        </div>
    </div>
</body>
</html>

Answer 2

实现此结构的关键是在父元素上使用溢出滚动。我已经在codepen上完成了，您可以在下面找到链接。

http://codepen.io/cryptcslaughtr/pen/JWxqMy

HTML：

<div class="container">
  <div class="header">
  HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER
  </div>
  <div class="sidebar">
    <p>This</p>
    <p>Is</p>
    <p>Sidebar</p>
    <p>Block</p>
  </div>
  <div class="tcontainer">
    <table>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
          <td>9</td>
          <td>10</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
          <td>9</td>
          <td>10</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
          <td>9</td>
          <td>10</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
          <td>9</td>
          <td>10</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
          <td>9</td>
          <td>10</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>  <td>10</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
    </tr>
  </tbody>
</table>

CSS

.header{
  padding:10px;
  background: #eee;
}
.sidebar{
  background: #ddd;
  float: left;
  width: 30%;
  min-width: 100px;
}
.container{
  width: 500px;
}
.tcontainer{
  width: 70%;
  overflow: auto;
}
td{
  background: grey;
  text-align: center;
  width: 50px;
  padding: 5px 20px;
}

Answer 3

<div>
    <div class="contentTbl">
        <div class="tblContent">
            <div class="headerTblFix">
                <p>Header 1</p>
                <p>Header 2</p>
            </div>
            <div class="contentFixTbl contentTblSec">
                <div class="contentFixTblRow">
                    <p>Content Fix 1</p>
                    <p>Content Fix 1</p>
                </div>
                <div class="contentFixTblRow">
                    <p>Content Fix 2</p>
                    <p>Content Fix 2</p>
                </div>
                <div class="contentFixTblRow">
                    <p>Content Fix 3</p>
                    <p>Content Fix 3</p>
                </div>
                <div class="contentFixTblRow">
                    <p>Content Fix 4</p>
                    <p>Content Fix 4</p>
                </div>
                <div class="contentFixTblRow">
                    <p>Content Fix 5</p>
                    <p>Content Fix 5</p>
                </div>
                <div class="contentFixTblRow">
                    <p>Content Fix 6</p>
                    <p>Content Fix 6</p>
                </div>
                <div class="contentFixTblRow">
                    <p>Content Fix 7</p>
                    <p>Content Fix 7</p>
                </div>
            </div>
        </div>
        <div class="tblContent">
            <div class="headerTblFix">
                <p>Header 3</p>
                <p>Header 4</p>
            </div>
            <div class="contentScrollTbl contentTblSec">
                <div class="contentScrollTblRow">
                    <p>Content Scroll 1</p>
                    <p>Content Scroll 1</p>
                    <p>Content Scroll 1</p>
                    <p>Content Scroll 1</p>
                    <p>Content Scroll 1</p>
                    <p>Content Scroll 1</p>
                </div>
                <div class="contentScrollTblRow">
                    <p>Content Scroll 2</p>
                    <p>Content Scroll 2</p>
                    <p>Content Scroll 2</p>
                    <p>Content Scroll 2</p>
                    <p>Content Scroll 2</p>
                    <p>Content Scroll 2</p>
                </div>
                <div class="contentScrollTblRow">
                    <p>Content Scroll 3</p>
                    <p>Content Scroll 3</p>
                    <p>Content Scroll 3</p>
                    <p>Content Scroll 3</p>
                    <p>Content Scroll 3</p>
                    <p>Content Scroll 3</p>
                </div>
                <div class="contentScrollTblRow">
                    <p>Content Scroll 4</p>
                    <p>Content Scroll 4</p>
                    <p>Content Scroll 4</p>
                    <p>Content Scroll 4</p>
                    <p>Content Scroll 4</p>
                    <p>Content Scroll 4</p>
                </div>
                <div class="contentScrollTblRow">
                    <p>Content Scroll 5</p>
                    <p>Content Scroll 5</p>
                    <p>Content Scroll 5</p>
                    <p>Content Scroll 5</p>
                    <p>Content Scroll 5</p>
                    <p>Content Scroll 5</p>
                </div>
                <div class="contentScrollTblRow">
                    <p>Content Scroll 6</p>
                    <p>Content Scroll 6</p>
                    <p>Content Scroll 6</p>
                    <p>Content Scroll 6</p>
                    <p>Content Scroll 6</p>
                    <p>Content Scroll 6</p>
                </div>
                <div class="contentScrollTblRow">
                    <p>Content Scroll 7</p>
                    <p>Content Scroll 7</p>
                    <p>Content Scroll 7</p>
                    <p>Content Scroll 7</p>
                    <p>Content Scroll 7</p>
                    <p>Content Scroll 7</p>
                </div>
                <div class="contentScrollTblRow">
                    <p>Content Scroll 8</p>
                    <p>Content Scroll 8</p>
                    <p>Content Scroll 8</p>
                    <p>Content Scroll 8</p>
                    <p>Content Scroll 8</p>
                    <p>Content Scroll 8</p>
                </div>
                <div class="contentScrollTblRow">
                    <p>Content Scroll 9</p>
                    <p>Content Scroll 9</p>
                    <p>Content Scroll 9</p>
                    <p>Content Scroll 9</p>
                    <p>Content Scroll 9</p>
                    <p>Content Scroll 9</p>
                </div>
                <div class="contentScrollTblRow">
                    <p>Content Scroll 10</p>
                    <p>Content Scroll 10</p>
                    <p>Content Scroll 10</p>
                    <p>Content Scroll 10</p>
                    <p>Content Scroll 10</p>
                    <p>Content Scroll 10</p>
                </div>
                <div class="contentScrollTblRow">
                    <p>Content Scroll 11</p>
                    <p>Content Scroll 11</p>
                    <p>Content Scroll 11</p>
                    <p>Content Scroll 11</p>
                    <p>Content Scroll 11</p>
                    <p>Content Scroll 11</p>
                </div>
                <div class="contentScrollTblRow">
                    <p>Content Scroll 12</p>
                    <p>Content Scroll 12</p>
                    <p>Content Scroll 12</p>
                    <p>Content Scroll 12</p>
                    <p>Content Scroll 12</p>
                    <p>Content Scroll 12</p>
                </div>
                <div class="contentScrollTblRow">
                    <p>Content Scroll 13</p>
                    <p>Content Scroll 13</p>
                    <p>Content Scroll 13</p>
                    <p>Content Scroll 13</p>
                    <p>Content Scroll 13</p>
                    <p>Content Scroll 13</p>
                </div>
                <div class="contentScrollTblRow">
                    <p>Content Scroll 14</p>
                    <p>Content Scroll 14</p>
                    <p>Content Scroll 14</p>
                    <p>Content Scroll 14</p>
                    <p>Content Scroll 14</p>
                    <p>Content Scroll 14</p>
                </div>
            </div>
    </div>
</div>
<style>
.tblContent{
    display:inline-block;
    width: 304px;
}
.tblContent p{
    border: 1px solid #ccc;
    width: 150px;
    padding: 0px;
    margin: 0px;
    text-align: right;
    display: table-cell;
}
.headerTblFix, .contentFixTbl{
    position:fixed;
}
.headerTblFix{
    height:20px;
}
.contentFixTbl{
    height:150px;
    margin-top: 20px;
}
.contentScrollTbl{
    overflow: auto;
    width: 304px;
    height: 150px;
    position: absolute;
    margin-top: 20px;
}
</style>

如何滚动＆＃34; tbody＆＃34;

3 个答案: