标签: html-table

有一个非常简单的方法我可以采用一组JSON对象并将其转换为HTML表,不包括几个字段？或者我是否必须手动完成此操作？

我进行了搜索和搜索,但未能找到符合我要求的解决方案.

我有一个简单的HTML表格.我想要它的圆角,不使用图像或JS,即纯CSS.像这样:

角部细胞的圆角和细胞的1px粗边.

到目前为止我有这个:

table {
  -moz-border-radius: 5px !important;
  border-collapse: collapse !important;
  border: none !important;
}
table th,
table td {
  border: none !important
}
table th:first-child {
  -moz-border-radius: 5px 0 0 0 !important;
}
table th:last-child {
  -moz-border-radius: 0 5px 0 0 !important;
}
table tr:last-child td:first-child {
  -moz-border-radius: 0 0 0 5px !important;
}
table tr:last-child td:last-child {
  -moz-border-radius: 0 0 5px 0 !important;
}
table tr:hover td {
  background-color: #ddd !important …

可能重复:
在html表中自动换行

此文字的行为与Google Chrome(和其他现代浏览器)完全一样:

<div style="border: 1px solid black; width:100%; word-wrap: break-word;">
  <p>
    aaaaaaaaaaaaaaaa
    bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
  </p>
</div>

1. 当浏览器足够宽时,+和b +在同一行.

   aaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
   

   Run Code Online (Sandbox Code Playgroud)

2. 缩小浏览器范围时,+和b +放在不同的行上.

   aaaaaaaaaaaaaaaa
   bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
   

   Run Code Online (Sandbox Code Playgroud)

3. 当b +不再适合时,它会断开并放在两条线上(总共三条线).

   aaaaaaaaaaaaaaaa
   bbbbbbbbbbbbbbbbbbbbbbbb
   bbbbbbbb
   

   Run Code Online (Sandbox Code Playgroud)

这一切都很棒.

然而,在我的情况下,这不是一个,div而是table如此:

<table style="border:1px solid black; width:100%; word-wrap:break-word;">
  <tr>
    <td>
      <p>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
      </p>
    </td>
  </tr>
</table>

在这种情况下,#1和#2会发生,但不会发生#3.也就是说,表格在步骤2之后停止缩小,并且不会发生步骤3.破解词似乎没有过滤掉.

有谁知道make#3是如何发生的？该解决方案只需要在Chrome中运行,但它也适用于其他更好的浏览器.

PS"不要使用表格"没有帮助.

我需要提取表格中每列的详细信息.例如,列"Name/Nr.".

• 该表包含许多地址
• 每行的最后一列都有一个按钮,用户可以选择列出的地址.

问题:我的代码只选择了第一个<td>有类的代码nr.我如何让它工作？

这是jQuery位:

$(".use-address").click(function() {
    var id = $("#choose-address-table").find(".nr:first").text();
    $("#resultas").append(id); // Testing: append the contents of the td to a div
});

表:

<table id="choose-address-table" class="ui-widget ui-widget-content">
    <thead>
        <tr class="ui-widget-header ">
            <th>Name/Nr.</th>
            <th>Street</th>
            <th>Town</th>
            <th>Postcode</th>
            <th>Country</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="nr"><span>50</span>
            </td>
            <td>Some Street 1</td>
            <td>Leeds</td>
            <td>L0 0XX</td>
            <td>United Kingdom</td>
            <td>
                <button type="button" class="use-address" />
            </td>
        </tr>
        <tr>
            <td class="nr">49</td>
            <td>Some Street 2</td>
            <td>Lancaster</td>
            <td>L0 0XX</td>
            <td>United Kingdom</td>
            <td>
                <button type="button" …

是否可以<tr>一次性对表行进行边界处理,而不是为单个单元格设置边框,<td>例如,

<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">
    <tbody>
        <tr>
            <th style="width: 96px;">Column 1</th>
            <th style="width: 96px;">Column 2</th>
            <th style="width: 96px;">Column 3</th>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;">&nbsp;</td>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

这给出了给定边界的边界,<tr>但它需要围绕单个单元格的边界.

我们可以<tr>一次性给一个边界吗？

→jsFiddle

我想在HTML表格中输出数据库中的一些数据,我希望用户能够重新排序表格行.为实现这一点,我使用jQuery UI进行排序,因此:

<script>
    $(function() {
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
    });
    </script>
<?php 
 while($row = mysql_fetch_assoc($co_authors)) {
                    echo "<tr id='sortable'><td>{$row['author_email']}</td>
                         <td>{$row['coauthor_level']}</td>";
                         <td><button class='remove' id='remove' name='remove' email="<?php echo $row['author_email'] ?>"
                            paper="<?php echo $row['paper_id'] ?>">Remove</button></td>
                         </tr>";
                }
?>

问题是,当我拖动一个表时tr,只会td被拖动.此外,最重要的是,只有第一行是可拖动的:效果不会应用于其他行.我怎么解决这个问题？

在Bootstrap 3,我可以随意应用和调整表格列中col-sm-xx的th标签thead.但是这在bootstrap 4中不起作用.如何在bootstrap 4中实现这样的功能？

<thead>
<th class="col-sm-3">3 columns wide</th>
<th class="col-sm-5">5 columns wide</th>
<th class="col-sm-4">4 columns wide</th>
</thead>

查看codeply,前提是它的大小不正确,特别是如果向表中添加一些数据.看看它是如何运行的:

<div class="container" style="border: 1px solid black;">
    <table class="table table-bordered">
    <thead>
        <tr class="row">
            <th class="col-sm-3">3 columns wide</th>
            <th class="col-sm-5">5 columns wide</th>
            <th class="col-sm-4">4 columns wide</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>123</td>
            <td>456</td>
            <td>789</td>
        </tr>
    </tbody>
</table>
</div>

我正在写一个页面,我需要一个html表来维持一个设置的大小.我需要表格顶部的标题始终保持在那里,但无论表格中添加了多少行,我还需要滚动表格的主体.

我希望它看起来像这个网址中的方法2:http://www.cssplay.co.uk/menu/tablescroll.html

我试过这样做但没有滚动条出现:

    <table border=1 id="qandatbl" align="center">
    <tr>
    <th class="col1">Question No</th>
    <th class="col2">Option Type</th>
    <th class="col1">Duration</th>
    </tr>

   <tbody>
    <tr>
    <td class='qid'></td>
    <td class="options"></td>
    <td class="duration"></td>
    </tr>
    </tbody>
</table>

CSS:

tbody { 
    height:80em;  
    overflow:scroll;
                }

可能重复:
如何使用JQuery迭代表行并访问某些单元格值？

我有类似的东西:

<table id="tblOne">
            <tbody>
                <tr>
                    <td>
                        <table id="tblTwo">
                            <tbody>
                                <tr>
                                    <td>
                                        Items
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Prod
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        Item 1
                    </td>
                </tr>
                <tr>
                    <td>
                        Item 2
                    </td>
                </tr>
            </tbody>
        </table>

我编写了jQuery循环遍历每个tr,如:

$('#tblOne tr').each(function() {...code...});

但问题是它通过"tblTwo"的"tr"循环也是我不想要的.有人可以建议解决这个问题吗？

可能重复的嵌套元素

我从服务器端ajax响应(Json)得到,我正在尝试动态创建表行并将它们附加到现有表(ID :) #records_table;

我尝试以可能的重复方式实现解决方案,但失败了.

我的回答如下:

    "[{
      "rank":"9",
      "content":"Alon",
      "UID":"5"
     },
     {
       "rank":"6",
       "content":"Tala",
       "UID":"6"
    }]"

需求结果是这样的:

<tr>
   <td>9</td>
   <td>Alon</td>
   <td>5</td>  
</tr>
<tr>
   <td>6</td>
   <td>Tala</td>
   <td>5</td>  
</tr>

我想在不解析Json的情况下做一些事情,所以我尝试做以下事情,这当然是一场灾难:

    function responseHandler(response)
    {

        $(function() {
            $.each(response, function(i, item) {
                $('<tr>').html(
                    $('td').text(item.rank),
                    $('td').text(item.content),
                    $('td').text(item.UID)
                ).appendTo('#records_table');

            });
        });


    }

从我的解决方案中,我只得到一行,所有单元格中的数字为6.我究竟做错了什么？