0

我正在尝试使用固定宽度的内联块重新创建表格元素，并且我在间距元素中遇到了来自浏览器（Chrome 和 IE）的明显不一致的行为。

这是问题的图像：

在此处输入图像描述

问题是前两行中的第一行（它应该作为标题并且是页面的静态 HTML 的一部分）span在右侧得到一个奇怪的间距 - 正如你可以从 CSS 中看到的那样，有一个边距0 声明（这显然是一个 WIP，有些span应该被divs 等替换，所以请多多包涵。）。

如果我改为在运行时通过 Javascript 动态添加行，我会得到下面的两行 - 这是预期的行为。在蓝色中，您可以找到这些行的容器 - 100% 的div元素，包括所有这些。我使用这种方法而不是普通表的另一个原因是我希望动态数据行可滚动，而使用table.

这是HTML：

 <span class="cssTRC">
            <span>
                <span>Day</span>
                <span>Loc</span>
                <span>Nagare</span>
                <span>Pcs</span>
                <span>Packs</span>
            </span>
            <span>
                <span>Thu 30 Aug</span>
                <span>E5-1</span>
                <span>{only DI}</span>
                <span>480</span>
                <span>1</span>
            </span>
    </span>
   <span id="ctblrcOrdHist" class="cssTRC">
         <span>
              <span>Thu 30 Aug</span>
              <span>E5-1</span>
              <span>DI</span>
              <span>480</span>
              <span>1</span>
         </span> 
         <span>
            <span>Thu 30 Aug</span>
            <span>KE-1</span>
            <span>DI</span>
            <span>500</span> 
            <span>1</span>
         </span>
      </span>

和 CSS，定义如下：

.cssTH>span>span,.cssTRC>span>span
{
    display:inline-block;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
    font-size:1em;
    box-sizing:border-box;
    width:5em;
    padding:0.2em;
    margin:0;
    border:0 solid red/*#E8EEF4;*/;
    border-width:0 0 1px 1px;
}
.cssTH>span, .cssTRC>span
{
    display:block;
}
.cssTRC
{
    border:0 solid #E8EEF4;
    border-width:1px 1px 0 0 ;
    display:block;
    /*max-height:200px;
    overflow-y:auto;*/
    box-sizing:content-box;
}

问题显然是如何在运行时不添加伪标题的情况下获得前两行的预期行为（这听起来很可怕）。

编辑

我写下我认为更方便的解决方案，这样它也可以作为基本 CSS 表格布局的一个小例子，以防有人需要它：

            <div>
                 <span>Day</span
                ><span>Loc</span
                ><span>Nagare</span
                ><span>Pcs</span
                ><span>Packs</span>
            </div>
4

2 回答 2

2

</span>使用时和之间不要留空格（<span>在使用inline-block两个元素时，两个元素之间的任何类型的空格都很重要display: inline-block）。

像这样：

<span>Day</span><span>Loc</span>

当您通过 JavaScript 添加它们时，在结束标记和下一个开始标记之间不会插入空格，这就是为什么在这种情况下看起来不错的原因。

于 2012-09-02T14:45:36.240 回答
2

跨度之间的空格导致的问题 -演示

我float在这个例子中使用了修复。有关解决此问题的更多方法，您可以查看此处

于 2012-09-02T14:45:43.600 回答