HTML/CSS：如何爲tr創建滾動條

有人能告訴我如何爲內部表創建滾動條嗎？內部表格不顯示在容器內。我將容器的背景着色爲黃色。桌子本身是藍色的。HTML/CSS：如何爲tr創建滾動條

我想看看錶格內的滾動條。

這裏：

<html> 
<body> 
<div style="width:1000px;margin-left:auto;margin-right:auto;background-color: yellow; height: 1000px;"> 
    <table style="background-color: blue"> 
     <tr> 
      <th>column1</th> 
      <th>column2</th> 
      <th>column3</th> 
      <th>column4</th> 
     </tr> 
     <tr> 
      <td>columnvalue1</td> 
      <td>columnvalue2</td> 
      <td>columnvalue3</td> 
      <td>columnvalue4</td> 
     </tr> 
     <tr> 
      <td colspan="4"> 
       <table> 
        <tr> 
         <th>SubColumn1</th> 
         <th>SubColumn2</th> 
         <th>SubColumn3</th> 
         <th>SubColumn4</th> 
         <th>SubColumn5</th> 
         <th>SubColumn6</th> 
         <th>SubColumn7</th> 
         <th>SubColumn8</th> 
         <th>SubColumn9</th> 
         <th>SubColumn10</th> 
         <th>SubColumn11</th> 
         <th>SubColumn12</th> 
         <th>SubColumn13</th> 
         <th>SubColumn14</th> 
        </tr> 
        <tr> 
         <td>subvalue1</td> 
         <td>subvalue2</td> 
         <td>subvalue3</td> 
         <td>subvalue4</td> 
         <td>subvalue5</td> 
         <td>subvalue6</td> 
         <td>subvalue7</td> 
         <td>subvalue8</td> 
         <td>subvalue9</td> 
         <td>subvalue10</td> 
         <td>subvalue11</td> 
         <td>subvalue12</td> 
         <td>subvalue13</td> 
         <td>subvalue14</td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 
</div> 
<body> 
</html>

來源

2011-02-07 Benjamin

哪一部分是「內桌？」 – Kyle 2011-02-07 09:23:01

使用發現：D哈哈：D我也必須看兩次...德 – Shrinath 2011-02-07 09:32:20

你想從過去3天這樣做？： http://stackoverflow.com/questions/4898187/how-to-create-a-table-within-a-legend-with-overflow-x 我看到你回答@Kyle Sevenoaks在那裏工作..這裏也差不多！ – Shrinath 2011-02-07 09:57:29

請嘗試對DIV部分

<div style="overflow:scroll width:1000px;margin-left:auto;margin-right:auto; 
background-color: yellow; height: 1000px;">

如果失敗，嘗試溢出：滾動表的風格。

來源

2011-02-07 09:22:33 Oralet

對不起，我標記了我的刪除。 – pdinklag 2011-02-07 09:30:54

用div包裹你的內表。通過將寬度和高度樣式與溢出一起作爲自動或滾動來使該div可滾動。

<div style="width:1000px;margin-left:auto;margin-right:auto;background-color: yellow; height: 1000px;"> 
<table style="background-color: blue"> 
    <tr> 
     <th>column1</th> 
     <th>column2</th> 
     <th>column3</th> 
     <th>column4</th> 
    </tr> 
    <tr> 
     <td>columnvalue1</td> 
     <td>columnvalue2</td> 
     <td>columnvalue3</td> 
     <td>columnvalue4</td> 
    </tr> 
    <tr> 
     <td colspan="4"> 
      <div style="max-height: 100px; max-width: 100px; width: 100px; overflow: auto;"> 
      <table> 
       <tr> 
        <th>SubColumn1</th> 
        <th>SubColumn2</th> 
        <th>SubColumn3</th> 
        <th>SubColumn4</th> 
        <th>SubColumn5</th> 
        <th>SubColumn6</th> 
        <th>SubColumn7</th> 
        <th>SubColumn8</th> 
        <th>SubColumn9</th> 
        <th>SubColumn10</th> 
        <th>SubColumn11</th> 
        <th>SubColumn12</th> 
        <th>SubColumn13</th> 
        <th>SubColumn14</th> 
       </tr> 
       <tr> 
        <td>subvalue1</td> 
        <td>subvalue2</td> 
        <td>subvalue3</td> 
        <td>subvalue4</td> 
        <td>subvalue5</td> 
        <td>subvalue6</td> 
        <td>subvalue7</td> 
        <td>subvalue8</td> 
        <td>subvalue9</td> 
        <td>subvalue10</td> 
        <td>subvalue11</td> 
        <td>subvalue12</td> 
        <td>subvalue13</td> 
        <td>subvalue14</td> 
       </tr> 
      </table> 
      </div> 
     </td> 
    </tr> 
</table>

應該工作

來源

2011-02-07 09:31:28 Shrinath

包裝你的表有一個div，這將具有相同的寬度與container和overflow:scroll

例子：http://jsbin.com/uheha4

來源

2011-02-07 09:35:29 Sotiris

HTML/CSS：如何爲tr創建滾動條

回答

相關問題