Question

如何使用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发布了一个模型。

Answer 1

将margin-right:-5px;添加到.slide类：

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

除此之外，如果表格数据一定是使用表格，那就是它们的用途，

当你将它们用于页面布局时，它们会变得邪恶。

Answer 2

你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>

应该为你做。

Answer 3

jswolf说的是真的。 inline-block使你的DIV表现得像文字行中的文字一样，所以它们之间的任何空格都会给出空间。改为想象一下：

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

这表示“我是一个机器人”而不是“Iamarobot。”

你可以使用上面提到的评论，或者在一行上一起运行所有内容。

你如何使用CSS和Div模仿多行水平滚动表行为？

3 个答案: