javascript - 如何使用引导程序使表格具有响应性和吸引力？

Question

我必须使用引导程序以响应和有吸引力的方式显示表格。目前，它看起来像一个简单的表格，我希望它使用引导程序引人注目。

我只使用了简单的 html，并想让它看起来更有吸引力。

这是我的代码-

        var table = $("<table>");
        table.append($("<tr><th>column1</th><th>column2</th></tr>"));

        for (var i = 0; i < 2; i++) {
        var row = $('<tr ><td>' + 'data' + '</td><td>' + 'data' + '</td> 
        </tr>');


        table.append(row);
          }
        $("#table").html(table);

div内容-

        <div id="table">
        </div>

css-

        #table {
        margin-top: 20px;
        border-collapse: collapse;
        width: 500px;
        }

        #table th {
        border: 1px solid black;
        text-align: left;
        }

我正在使用简单的 css 和 html，并希望使用引导程序使我的表格看起来有吸引力且响应迅速。

标签： javascripthtml

Answer 1

如果您使用的是Bootstrap，则无需创建自己的响应类，因为已经有一个可用于表格元素的响应类：

<table class="table responsive">
...
</table>