标签: html-table

带有固定标题和固定列的HTML表格?

是否有CSS/JavaScript技术来显示一个长HTML表格,使列标题保持固定在屏幕上,第一个coloumn保持固定并滚动数据.

我希望能够滚动表格的内容,但始终能够看到顶部的列标题和左侧的第一列.

如果有一个jQuery插件会很棒!如果它有助于我唯一关心的浏览器是Firefox.

html javascript css html-table

58
推荐指数
2
解决办法
17万
查看次数

如何在不使用javascript甚至/奇数类生成的情况下在html表上创建斑马条纹?

我想zebra-stripe一个html表而不使用任何js东西或编写服务器端代码来为表行生成偶数/奇数类.是否有可能使用原始css?

css html-table

58
推荐指数
1
解决办法
7万
查看次数

带水平滚动的HTML表格(第一列固定)

我一直试图想办法用一个固定的第一列制作一个表(并且表的其余部分有一个水平溢出)我看到一个帖子有一个类似的问题.但固定列位似乎没有得到解决.救命?

html html-table fixed overflow

58
推荐指数
6
解决办法
18万
查看次数

合并两个HTML表格单元格

我正在用HTML创建一个表格,我希望我的顶部单元格宽度为2.这是一幅粗略的图画:

__________________________________________
|                HEADER                  |
|                                        |
==========================================
|                  ||                    |
|     CONTENT      ||       CONTENT      |
|                  ||                    |
------------------------------------------
Run Code Online (Sandbox Code Playgroud)

有没有办法在HTML中实现这一点?

html html-table

58
推荐指数
2
解决办法
21万
查看次数

删除所有填充和边距表HTML和CSS

我有这张桌子:

<body>
    <table id="page" >
        <tr id="header" >
            <td colspan="2" id="tdheader" >je suis</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>
</body>
Run Code Online (Sandbox Code Playgroud)

这是css

html, body, #page {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}

#header {
    margin:0;
    padding:0;
    height:20px;
    background-color:green;
}
Run Code Online (Sandbox Code Playgroud)

我想删除所有边距和填充但总是我有:

在此输入图像描述

我该如何解决这个问题?

css html-table margin padding

58
推荐指数
5
解决办法
26万
查看次数

DataTables:无法读取未定义的属性"长度"

我理解这是一个受欢迎的问题,我已经在Stack Overflow和其他网站(包括datatables网站)上阅读了所有类似的问题.

为了澄清,我正在使用

  • PHP Codeigniter
  • Materliazecss

我还确保我正确地收到了JSON数组:

[{"name_en":"hello","phone":"55555555"},{"name_en":"hi","phone":"00000000"}]
Run Code Online (Sandbox Code Playgroud)

我的HTML表格如下所示:

<table id="customer_table">
     <thead>
         <tr>
            <th>Name</th>
            <th>Phone</th>
         </tr>
     </thead>
</table>
Run Code Online (Sandbox Code Playgroud)

这是我的document.ready功能:

  $(document).ready(function(){
            //$('#customer_table').DataTable();
            $('#customer_table').DataTable( {
                "ajax": 'json',
                "dataSrc": "",
                 "columns": [
                    { "data": "email" },
                    { "data": "name_en" }
                ]
            });
  });
Run Code Online (Sandbox Code Playgroud)

我得到的错误是

未捕获的TypeError:无法读取未定义的属性"长度"

jquery json codeigniter html-table datatables

58
推荐指数
4
解决办法
9万
查看次数

如何创建div来填充页眉和页脚div之间的所有空格

我正在努力从使用表格进行布局,再到使用div(是的,是的辩论).我有3个div,标题,内容和页脚.页眉和页脚各50px.如何让页脚div保持在页面底部,内容div填充两者之间的空间?我不想硬编码内容div高度,因为屏幕分辨率可能会改变.

css html-table

56
推荐指数
3
解决办法
8万
查看次数

用Div替换HTML表

好吧,我试图购买不应该使用html表的想法,而div应该是.但是,我经常使用类似于以下内容的代码

<table>
    <tr>
        <td>First Name:</td>
        <td colspan="2"><input  id="txtFirstName"/></td>
    </tr>
    <tr>
        <td>Last Name:</td>
        <td colspan="2"><input  type="text" id="txtLastName"/></td>
    </tr>
    <tr>
        <td>Address:</td>
        <td>
            <select type="text" id="ddlState">
                <option value="NY">NY</option>
                <option value="CA">CA</option>
            </select>
        </td>
        <td>
            <select type="text" id="ddlCountry">
                <option value="NY">USA</option>
                <option value="CA">CAN</option>
            </select>
        </td>
    </tr>
</table>
Run Code Online (Sandbox Code Playgroud)

我希望标签对齐,我希望控件对齐.如果不使用表格,我该怎么做?

html css html-table

55
推荐指数
3
解决办法
12万
查看次数

如何隐藏表行溢出?

我有一些html表,文本数据太大,不适合.因此,它会垂直扩展单元格以适应这种情况.因此,现在具有溢出的行的高度是具有较少数据量的行的两倍.这是无法接受的.如何强制表具有相同的行高1em

这是一些重现问题的标记.表应该只是一行的高度,隐藏溢出的文本.

<!DOCTYPE html>

<html>
  <head>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
      table { width:250px; }
      table tr { height:1em; overflow:hidden; }
    </style>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>This is a test.</td>
        <td>Do you see what I mean?</td>
        <td>I hate this overflow.</td>
      </tr>
    </table>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

html css html-table

55
推荐指数
3
解决办法
10万
查看次数

对齐表头中的文本

它似乎align不适用于第th个元素.这是我的HTML:

<div style="width: 100%; height: 175px; overflow: auto;">
  <table class="grid" id="table">
    <thead>
      <tr>
        <th class="not_mapped_style" style="display: none;" align="center">id</th>
        <th class="not_mapped_style" align="center">DisplayName</th>
        <th align="center">PrimaryEmail</th>
        <th align="center">Age</th>
        <th align="center">Phone</th>
      </tr>
    </thead>
    <caption>Contacts</caption>
    <tbody>
      <tr>
        <td style="display: none;" property_value="0" property_name="id" align="center">0</td>
        <td property_value="rpcuser" property_name="DisplayName" align="center">rpcuser</td>
        <td property_value="admin@domain.com" property_name="PrimaryEmail" align="center">admin@domain.com</td>
        <td property_value="69" property_name="Age" align="center">69</td>
        <td property_value="+722616807" property_name="Hand_Phone" align="center">+18007</td>
      </tr>
    </tbody>
  </table>
</div>
Run Code Online (Sandbox Code Playgroud)

文本对齐对于td元素工作得很好,但是失败了th.为什么?

html html-table

55
推荐指数
3
解决办法
12万
查看次数

标签 统计

html-table ×10

css ×6

html ×6

codeigniter ×1

datatables ×1

fixed ×1

javascript ×1

jquery ×1

json ×1

margin ×1

overflow ×1

padding ×1