如何用CSS和Div模仿多行水平滾動錶行爲？

你如何模仿CSS和Div的表格行爲？是否有可能模仿見下表行爲：如何用CSS和Div模仿多行水平滾動錶行爲？

兩排水平溢流和一個水平溢流滾動
細胞

要查看示例，http://jsfiddle.net/srakestraw/BcQbk/3/之間沒有間距。下面是表的代碼：

<div style="width:500px; overflow:auto;"> 
    <table width="1000px" cellspacing="0"> 
     <tr> 
      <td>Row 1 - Cell 1</td> 
      <td>Row 1 - Cell 2</td> 
      <td>Row 1 - Cell 3</td> 
      <td>Row 1 - Cell 4</td> 
      <td>Row 1 - Cell 5</td> 
      <td>Row 1 - Cell 6</td> 
     </tr> 
     <tr> 
      <td>Row 2 - Cell 1</td> 
      <td>Row 2 - Cell 2</td> 
      <td>Row 2 - Cell 3</td> 
      <td>Row 2 - Cell 4</td> 
      <td>Row 2 - Cell 5</td> 
      <td>Row 2 - Cell 6</td> 
     </tr> 
    </table> 
</div>

樣式表：

<style> 
     td 
     { 
      width: 200px; 
      border: 1px solid #ccc; 
     } 
    </style>

我靠近用下面的代碼，但不能消除細胞之間的間隔或控制水平滾動多行。

<style> 
     .slideContainer{ 
      white-space: nowrap; 
      overflow:auto; 
      } 
     .slide{ 
      display: inline-block; 
      width: 100px; 
      white-space: normal; 
      border: 1px solid #ccc; 
      vertical-align:top; 
      border: 1px solid #ccc; 
     } 
     </style> 

<div style="width:500px;"> 
    <div class="slideContainer"> 
     <div class="slide">Cell 1</div> 
     <div class="slide">Cell 2</div> 
     <div class="slide">Cell 3</div> 
     <div class="slide">Cell 4</div> 
     <div class="slide">Cell 5</div> 
     <div class="slide">Cell 6</div> 
    </div> 
</div>

最終產品將與合併單元格比較複雜，我只是對使用表傾斜。我的首選是使用div來更容易地實現前端佈局操作。

這不是一個真正的數據表，但是是相似的。我發佈了一個模型http://www.volunteeryourself.com/sch.htm。

來源

2011-02-12 scottrakes

您是否正在導入表格數據？表格不是魔鬼，但如果僅用於佈局目的，它們是......您必須使用表格來表格類型數據 – 2011-02-12 15:31:25

請問我可以在這裏做什麼內容？表格對佈局不利，但如果你想要表示數據，那麼表格可能實際上是正確的元素（語義上和風格上）使用。 – Luke 2011-02-12 15:33:53

新增margin-right:-5px;到類：

http://jsfiddle.net/Mutant_Tractor/BcQbk/4/

除此之外，如果它是通過各種手段表格數據使用表，這是他們所爲，

當你使用他們變得邪惡他們的頁面佈局。

來源

2011-02-12 15:34:36

你的div之間的空格正在讓你煩惱。

<div style="width:500px;"> 
    <div class="slideContainer"> 
     <div class="slide">Cell 1</div><!-- 
    --><div class="slide">Cell 2</div><!-- 
    --><div class="slide">Cell 3</div><!-- 
    --><div class="slide">Cell 4</div><!-- 
    --><div class="slide">Cell 5</div><!-- 
    --><div class="slide">Cell 6</div> 
    </div> 
</div>

應該爲你做。

來源

2011-02-12 15:36:35 jswolf19

jswolf說的是對的。內聯塊使您的DIV行爲與文本行中的文字流動一樣，因此它們之間的任何空格都會留出空間。改爲圖片：

<div> 
    <span>I</span> 
    <span>am</span> 
    <span>a</span> 
    <span>robot</span> 
</div>

這表現爲「我是機器人」而不是「Iamarobot」。

您可以像上面提到的那樣使用註釋，或者在一行上一起運行所有內容。

來源

2011-02-12 18:37:39 jpsimons

如何用CSS和Div模仿多行水平滾動錶行爲？

回答

相關問題