标签: html-table

是否可以在一个单元格中使用单元格填充而不是整个html表格？

假设我有一个这样的列表:

['one','two','three','four','five','six','seven','eight','nine']

我想尝试将这些数据转换为各种维度的HTML表格:

one     two    three
four    five   six
seven   eight  nine

要么

one    four   seven
two    five   eight
three  six    nine

要么

one    two   three  four
five   six   seven  eight
nine

是否有一个库可以处理这个,而不需要做疯狂的列表拼接或嵌套的循环？我的谷歌搜索显示有一些HTML库,但我没有时间浏览每一个,看看他们是否可以很好地处理表.有没有人不得不这样做？如果是这样你是怎么做到的？

在HTML中我想显示一个小表作为段落的一部分.一种方法是:

<table>
  <tr>
    <td>
      Before 
      <table style="display:inline;"><tr><td>a</td><td>b</td></tr> <tr><td>c</td><td>d</td></tr> </table>
      After
    </td>
  </tr>
</table>

这产生了这个漂亮的布局:

       a b
Before     After
       c d

这正是我想要的.

但是,当我真正想要的是在一个段落中使用一个表时,在表格中使用表格似乎相当愚蠢.但是,如果我尝试使用此HTML:

<p>
  Before 
    <table style="display:inline;"><tr><td>a</td><td>b</td></tr> <tr><td>c</td><td>d</td></tr></table>
  After
</p>

我得到这个丑陋的布局:

Before
a b
    After
c d

我尝试过使用各种不同的显示样式,但似乎都没有做我想要的.

我被迫使用表内代码,还是我遗漏了什么？

这可能是一个无意义的问题,我知道我们必须尽可能地遵循标准.但是可以<td>成为另一个孩子的直接孩子<td>,像这样:

<td class="parent">
    <td class="child">
        <!-- Some info -->
    </td>
</td>

或者在添加之前<table>用新的东西创建另一个是必须<tr>的<td>,这可能会变成人口密集的表标签并成为集群...

我有表格width: 100%和表格中的元素width: 40em; max-width: 100%,但是当浏览器窗口太小时,元素仍在拉伸表格.

我希望这个元素是一个固定的宽度,但如果容器太小,我不希望它大于容器.如果固定宽度没有足够的空间,max-width: 100%应将其缩小以适应可用空间.这适用于表格之外.

请注意,max-width表不在表上.它实际上是在一个<input>元素上,虽然我链接的代码包含一个单独的表,在一个<span>元素上有相同的问题.它还包括<input>表外的字段,其行为正确.

链接到jsfiddle

我专门针对移动设备,所以我有一个Bootstrap响应表.它只是一个带有引导类"表响应"的div和一个嵌套在表中的表"table table-striped table-bordered table-hover table-condensed".

有没有简单的方法来确保第一列是固定的(不是水平滚动)？在移动设备上,可能每次都会滚动,但第一列包含基本上是表头的内容.

是否可以将列添加到现有表中,如下所示:

<table id="tutorial" width="600" border="0">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

用js？

我在bootstrap 3中有一张表

<table class="table table-bordered table-condensed">
    <tbody>
        <tr>
           <td><input type="text" class="form-control" /></td>
           <td><input type="text" class="form-control" /></td>
           <td><input type="text" class="form-control" /></td>
           <td><input type="text" class="form-control" /></td>
           <td><input type="text" class="form-control" /></td>
           <td><input type="text" class="form-control" /></td>
        </tr>
    </tbody>
</table>

我可以使输入字段看起来像普通单元格吗？我希望输入字段填写整个单元格(没有输入边距也没有表格单元格填充).就像一个Excel电子表格,我有很多单元格,可以在每个单元格中写入.

我试图在Table标签中实现String省略号.

源代码如下.

<div>
  <div class="widget-body no-padding" style="min-height:0px;">
    <table class="table" style="table-layout: fixed;">
      <tbody>
        <c:forEach var="item" items="${result.stuffList}" varStatus="idx">
          <c:if test="${idx.index < 5}">
            <tr>
              <td class='text-center' style="width: 80%; text-overflow:ellipsis; -o-text-overow: ellipsis; word-wrap:normal; overflow: hidden;">
                <nobr>
                  <a href="#" onclick="javascript:location.href='/view?nid=${item.id}'">${item.name}</a>
                </nobr>
              </td>
              <td class='text-center' style="width: 20%;">
                ${item.regDate}
              </td>
            </tr>
          </c:if>
        </c:forEach>
      </tbody>
    </table>
  </div>
</div>

这段代码有效,如果String太长,它会显示...我的预期.

但是,当我测试响应时,它会变得难看.

我写了以下部分来表达项目注册日期.

但是当浏览器缩小时,它的后部不会出现在屏幕上.

<td class='text-center' style="width: 20%;">
  ${item.regDate}
</td>

如何在所有浏览器中使用Bootstrap中的省略号？

所以它看起来像这样

我所期望的(缩小浏览器时)>>

第1栏/第2栏

AAAA ..../2014-09-24

现在看起来像>>

第1栏/第2栏

AAAA ..../2014-09

问题是>>

在我添加String省略号函数之前,它可以响应.

我的猜测>>

也许table-layout: fixed;风格是原因.但不知道如何实现String省略函数table-layout …

我想知道如何单击HTML表中的按钮并获取返回给我的行和列号:例如,使用下表:

<table>
  <tr>
    <td><input type="button" value="button"></td>
    <td><input type="button" value="button"></td>
    <td><input type="button" value="button"></td>
    </tr>
    <tr>
    <td><input type="button" value="button"></td>
    <td><input type="button" value="button"></td>
    <td><input type="button" value="button"></td>
    </tr>
    <tr>
    <td><input type="button" value="button"></td>
    <td><input type="button" value="button"></td>
    <td><input type="button" value="button"></td>
    </tr>
  </table>

我如何使用JavaScript点击第二行中的第一个按钮并让它告诉我,我点击了第二行中的第一个单元格？每个按钮是否需要具有唯一ID？