表 TDS 内的 HTML/CSS 可滚动跨度答案

【问题标题】：HTML/CSS Scrollable Spans inside Table TDS表 TDS 内的 HTML/CSS 可滚动跨度
【发布时间】：2011-11-05 07:37:15
【问题描述】：

我有如下 HTML。我在另一个表中有一个表。内部表中的每个 TD 都将包含一个使用 CSS 类定义的 Scrollable Span，如下所示。只有当宽度被定义为一个值（如 100 像素）时，跨度才会有滚动条和滚动。如果我将宽度设为自动，则滚动条不会出现，并且文本只会溢出 TD 和表格边界并破坏布局。我要做的是动态生成（从 ASP.NET Web 控件）。内表行可以有许多 TDS。因此，每个 TD 将生成宽度为 100/#ofTDs %。每个 TD 都会包含一个可滚动的 Span。我无法设置跨度的宽度。我需要它与包含的 TD 相同，并通过显示水平滚动条来滚动其余部分。有什么想法吗？？

  .OuterTable
    {
        Color:Red;
        width:120px;
        white-space:nowrap;
    }
    .SpanClass
    {
        overflow:auto;
        display:block;
        width:auto;
        color:Blue;

    }

   <table class="OuterTable">
   <tr>
   <td>Outer Table  Column</td>
   <td>
   <table class="InnerTable">
   <tr>
   <td><span class="SpanClass"> This is  A LINE IN Inner 
   table  .this is the first line . Line 1 line1 jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</span></td>
   </tr>
   </table>
   </td>
   </tr>
   </table>

【问题讨论】：

为表格添加表头 + 设置表格布局：固定？

标签： html css

【解决方案1】：

第一次尝试：http://jsfiddle.net/zZDvq/

这与您要创建的相似吗？

【讨论】：

【解决方案2】：

在生成 span 的服务器端代码中，将宽度设置为内联样式，即（伪代码）

<span style = "width:100/#TDs %">

【讨论】：