标签: html-table

<table>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Start</td><td>Hiding</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>End</td><td>Hiding</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
</table>

Run Code Online (Sandbox Code Playgroud)

这是我试图使用jQuery获得的结果.

Column1  Column2
Column1  Column2
...Show Full Table...
Column1  Column2
Column1  Column2

Run Code Online (Sandbox Code Playgroud)

我想使用jQuery的显示/隐藏功能来最小化表格,但仍然显示顶部和底部行的一部分.中间行应替换为"显示全表"之类的文本,单击时将展开以显示从开始到结束的完整表.

在jQuery中执行此操作的最佳方法是什么？

BTW我已经尝试在一些行中添加一个类"Table_Middle",但它并没有完全隐藏它占用的空间仍然存在,我没有文本给用户扩展表的方法充分.

[编辑]添加了工作示例HTML,灵感来自Parand发布的答案

下面的示例是一个完整的工作示例,您甚至不需要下载jquery.只需粘贴到空白HTML文件中即可.

如果关闭Javascript,它会很好地降低以仅显示完整的表格.如果Javascript打开,则它会隐藏中间表行并添加显示/隐藏链接.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <title>Example Show/Hide Middle rows of a table using jQuery</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#HiddenRowsNotice").html("<tr><td colspan='2'> <a href='#'>>> some rows hidden <<</a></td></tr>");
                $("#ShowHide").html("<tr><td colspan='2'><a href='#'>show/hide middle rows</a></td></tr>");
                $("#HiddenRows").hide();

                $('#ShowHide,#HiddenRowsNotice').click( function() {
                    $('#HiddenRows').toggle();  
                    $('#HiddenRowsNotice').toggle();
                });
            });
        </script>
    </head>
    <body>
        <table>
            <tbody id="ShowHide"></tbody>
                <tr><th>Month Name</th><th>Month</th></tr> …

Run Code Online (Sandbox Code Playgroud)

html jquery html-table

Bri*_*ght

2016 09-14

49
推荐指数

1
解决办法

7万
查看次数

使用jquery动态设置colspan

我有一个像这样的简单表结构.我想做的是根据某些条件动态合并一些列<td>,例如,如果td1和td3为空,那么合并单元格并 <td class="col1" colspan="3">1Meeting</td> 尝试使用jquery:

 $(".tblSimpleAgenda  td:contains('')").hide();

Run Code Online (Sandbox Code Playgroud)

但它没有效果.

使用jquery实现这一目标的最佳方法是什么.

<table  class="tblSimpleAgenda" cellpadding="5" cellspacing="0">
 <tbody>
 <th align="left">Time</th>
 <th align="left">Room 1</th>
 <th align="left">Room 2</th>
 <th align="left">Room 3</th> 

        <tr valign="top">
            <td class="colTime">09:00 – 10:00</td>
            <td class="col1"></td>
            <td class="col2">Meeting 2</td>
            <td class="col3"></td>
        </tr>

        <tr valign="top">
            <td class="colTime">10:00 – 10:45</td>
            <td class="col1">Meeting 1</td>
            <td class="col2">Meeting 2</td>
            <td class="col3">Meeting 3</td> 
        </tr>

        <tr valign="top">
            <td class="colTime">11:00 – 11:45</td>
            <td class="col1">Meeting 1</td>
            <td class="col2">Meeting 2</td>
            <td class="col3">Meeting 3</td> 
        </tr>
</tbody>
</table>

Run Code Online (Sandbox Code Playgroud)

jquery html-table

Ter*_*der

2016 10-23

49
推荐指数

1
解决办法

10万
查看次数

CSS表边框间距只在里面

我试图解决这个问题好几个月了,谷歌并没有帮助我.我试图在表格<td>和<th>标签之间设置间距,但是当我这样做时,它会在外面间隔.因此,该表与其他任何内容都不一致.所以看起来桌子有一些填充.

我似乎无法找到解决方案.

这是一个问题的例子

css html-table

use*_*081

2019 01-04

48
推荐指数

4
解决办法

4万
查看次数

居中对齐HTML表格

在我正在处理的页面上,我似乎无法将第一行中的图像和下面的两列文本居中(两列不应超过图像的这是页面:http://www.puzzles-et-jeux.com/fr/page/minipuzzles.html 我花了很多时间试图解决这个问题.我想把它保存在HTML中因为我必须赶时间,因为我必须为每个图像创建20页不同宽度/ +布局的排序.

html html-table alignment

Fab*_*PMW

2017 07-31

48
推荐指数

3
解决办法

28万
查看次数

带有jQuery的可调整大小的表列

这是我能找到的唯一一个调整表格列宽度的jQuery插件,但是它与我的表格不能很好地集成,并且有不必要的膨胀(保存在cookie中).是否还有其他插件只用于调整列的大小？(不是数据网格插件,请不要提示那些).

如果没有,我会写自己的,不应该太难,我只是不知道如何检测用户点击td边框(调整大小).有任何想法吗？

html jquery resize html-table

作者

2017 10-27

47
推荐指数

4
解决办法

11万
查看次数

如何在CSS中创建具有相等列宽的表？

我有一个包含这样的表的文档:

<table>
    <tr>
        <td>
            Word
        </td>
        <td>
            Definition
        </td>
    </tr>
    <tr>
        <td>
            Word
        </td>
        <td>
            Definition
        </td>
    </tr>
    <tr>
        <td>
            Word
        </td>
        <td>
            Definition
        </td>
    </tr>
</table>

Run Code Online (Sandbox Code Playgroud)

使用CSS,我需要将所有单元格设置为50%宽度,左侧"列"中的文本右对齐,左列中的文本左对齐.我尝试了很多不同的选择,例如width: 50%; text-align: left,结果总是不寻常的.结果应如下所示:

 _________________________
|       word | definition |
|____________|____________|
|       word | definition |
|____________|____________|

Run Code Online (Sandbox Code Playgroud)

我不能直接调整表的实际代码.我只能修改CSS样式.
在<table>中使Make列具有相等宽度的答案是不合适的,因为我不知道页面的宽度,并且该宽度可能会有所不同.

如何在CSS中的两列表中设置等宽单元格,并将所有内容对齐到中间？

html css html-table

Vil*_*age

2018 11-11

47
推荐指数

3
解决办法

7万
查看次数

删除表格单元格和行之间的间距

我正在设计一个HTML电子邮件模板,它迫使我使用表格.在下面的代码中,我遇到了问题(1)删除了占位符图像下面的间距,以及(2)删除了图像和标题之间的空格.以下是OS X 10.6.8上Chrome 15的外观截图:

在此输入图像描述

<!DOCTYPE HTML>
<html>
<head>
    <title>Email Template</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
    <table style="border: 1px solid #b50b32; margin: 30px auto; width: 600px; padding: 0; border-spacing: none;" cellspacing="0" cellpadding="0">
        <tr>
            <td id="main" style="background-color: #f2f2f2;">
                <h2 style="color: #b50b32; font-family: 'Lucida Grande', Arial, sans-serif; font-size: 22px; font-weight: normal; padding: 15px; margin: 25px 0; background-color: #fff;">Major headline goes here</h2>
                <table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px;">
                    <tr><td style="padding: 0; border: 1px solid red;"><img src="placeholder.jpg" …

Run Code Online (Sandbox Code Playgroud)

css html-table html-email

Joe*_*nin

2019 01-10

46
推荐指数

6
解决办法

13万
查看次数