Javascript 创建响应html表

我一直在寻找一个很好的解决方案来创建一个响应性好的html表，我目前正在使用bootstrap来实现这一点。当表格显示在较小的设备（如iPad）上时，表格将可滚动。然而，我想要一个比这更好的解决方案，所以在小型设备上它看起来更整洁、更专业

在iPad上看起来很棒的解决方案示例以及我正在尝试实现的目标：

$（'table'）.DataTable（）；
//见：
// http://www.sitepoint.com/responsive-data-tables-comprehensive-list-solutions

正文{
字体大小：140%；
}
氢{
文本对齐：居中；
填充：20px0；
}
表格标题{
填充：.5em0；
}
表4.dataTable th，
table.dataTable td{
空白：nowrap；
}
p{
文本对齐：居中；
填充顶部：140px；
字体大小：14px；
}

带有数据表的响应表
基于以下内容的响应表示例：
国家
语言文字
人口
中位年龄
面积（平方公里）
阿根廷
西班牙语（官方）、英语、意大利语、德语、法语
41,803,125
31.3
2,780,387
澳大利亚
英语79%，母语和其他语言
23,630,169
37.3
7,739,983
希腊
希腊语99%（官方）、英语、法语
11,128,404
43.2
131,956
卢森堡
卢森堡（国家）法语、德语（均为行政语言）
536,761
39.1
2,586
俄罗斯
俄罗斯人，其他
142,467,651
38.4
17,076,310
瑞典
讲瑞典语、萨米语和芬兰语的少数民族
9,631,261
41.1
449,954
从和检索的数据。
乔治·马特苏科斯的演示
 

由于您不需要任何插件，据我所知，只有三种选择

是一个类似于引导的可滚动表，您已经在使用它了

你可以藏一些不那么重要的柱子。。。您可以通过使用

媒体查询

您可以通过媒体查询调整字体大小，但我认为这不是一个真正的选项，因为这会影响可用性

有几种方法。 我倾向于使用应用于is的meida查询，这样当屏幕太窄时，它会重新格式化（仅通过CSS），使每一行有点像它自己的表

CSS

HTML

响应表
这是完全相同的表，只有@media查询应用于is，因此当屏幕太窄时，它会重新格式化（仅通过CSS），使每一行有点像它自己的表。这使得需要更多的重复和垂直空间，但它适合于水平空间，因此只需要自然的垂直滚动来浏览数据

名字
姓
职位名称
喜爱的颜色
战争还是跋涉？
色情名称
出生日期
梦想度假城市
平均成绩
任意数据
詹姆斯
护士长
主食三明治者
生菜绿
跋涉
迪格比格林
1979年1月13日
高谭市
3.1
RBX-12
这个
打上钩
罪犯分类
蓝色
战争
约翰·史密斯
1968年7月19日
雅典
不适用
Edlund，Ben（1996年7月）。
开玩笑
蓝精灵
送爆炸性的礼物
蓝精灵
蓝精灵
蓝精灵蓝精灵
蓝精灵之家，1945年
新蓝精灵城
4.蓝精灵
一个
辛蒂
贝莱
销售代表
红色
战争
洛里奎维
1956年7月5日
巴黎
3.4
3451
船长
酷
树木破碎机
蓝色
战争
史蒂夫42
1982年12月13日
拉斯维加斯
1.9
在沙发下面

---

我刚刚发布了一个js工具，它可以做到这一点，它基本上使用了datatables.net中的一个系统，在原始行的下面添加了一行包含折叠内容的内容：看看我的，源代码就是全部

希望这有帮助

---

Ps：这个工具依赖于jquery。

这是我想要的，但是是否有一种方法可以更改表格，为每个

行显示
第一列
，然后在单击该行时显示其余列。那么像是行的折叠方法吗？请看。这只是一个快速的黑客向你展示它的可能。当分辨率较低时，单击人名。这正是我想要的。谢谢！：）
@media
    only screen and (max-width: 760px),
    (min-device-width: 768px) and (max-device-width: 1024px)  {

        /* Force table to not be like tables anymore */
        table, thead, tbody, th, td, tr {
            display: block;
        }

        /* Hide table headers (but not display: none;, for accessibility) */
        thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        tr { border: 1px solid #ccc; }

        td {
            /* Behave  like a "row" */
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 50%;
        }

        td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
        }

        /*
        Label the data
        */
        td:nth-of-type(1):before { content: "First Name"; }
        td:nth-of-type(2):before { content: "Last Name"; }
        td:nth-of-type(3):before { content: "Job Title"; }
        td:nth-of-type(4):before { content: "Favorite Color"; }
        td:nth-of-type(5):before { content: "Wars of Trek?"; }
        td:nth-of-type(6):before { content: "Porn Name"; }
        td:nth-of-type(7):before { content: "Date of Birth"; }
        td:nth-of-type(8):before { content: "Dream Vacation City"; }
        td:nth-of-type(9):before { content: "GPA"; }
        td:nth-of-type(10):before { content: "Arbitrary Data"; }
    }

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
        body {
            padding: 0;
            margin: 0;
            width: 320px; }
        }

    /* iPads (portrait and landscape) ----------- */
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
        body {
            width: 495px;
        }
    }

<h1>Responsive Table</h1>

<p>This is the exact same table, only has @media queries applied to is so that when the screen is too narrow, it reformats (via only CSS) to make each row a bit like it's own table. This makes for much more repetition and vertical space needed, but it fits within the horizontal space, so only natural vertical scrolling is needed to explore the data.</p>

<table>
    <thead>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Job Title</th>
        <th>Favorite Color</th>
        <th>Wars or Trek?</th>
        <th>Porn Name</th>
        <th>Date of Birth</th>
        <th>Dream Vacation City</th>
        <th>GPA</th>
        <th>Arbitrary Data</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>James</td>
        <td>Matman</td>
        <td>Chief Sandwich Eater</td>
        <td>Lettuce Green</td>
        <td>Trek</td>
        <td>Digby Green</td>
        <td>January 13, 1979</td>
        <td>Gotham City</td>
        <td>3.1</td>
        <td>RBX-12</td>
    </tr>
    <tr>
      <td>The</td>
      <td>Tick</td>
      <td>Crimefighter Sorta</td>
      <td>Blue</td>
      <td>Wars</td>
      <td>John Smith</td>
      <td>July 19, 1968</td>
      <td>Athens</td>
      <td>N/A</td>
      <td>Edlund, Ben (July 1996).</td>
    </tr>
    <tr>
      <td>Jokey</td>
      <td>Smurf</td>
      <td>Giving Exploding Presents</td>
      <td>Smurflow</td>
      <td>Smurf</td>
      <td>Smurflane Smurfmutt</td>
      <td>Smurfuary Smurfteenth, 1945</td>
      <td>New Smurf City</td>
      <td>4.Smurf</td>
      <td>One</td>
    </tr>
    <tr>
      <td>Cindy</td>
      <td>Beyler</td>
      <td>Sales Representative</td>
      <td>Red</td>
      <td>Wars</td>
      <td>Lori Quivey</td>
      <td>July 5, 1956</td>
      <td>Paris</td>
      <td>3.4</td>
      <td>3451</td>
    </tr>
    <tr>
      <td>Captain</td>
      <td>Cool</td>
      <td>Tree Crusher</td>
      <td>Blue</td>
      <td>Wars</td>
      <td>Steve 42nd</td>
      <td>December 13, 1982</td>
      <td>Las Vegas</td>
      <td>1.9</td>
      <td>Under the couch</td>
    </tr>
    </tbody>
</table>

</div>