JSFiddle - React, Tailwind, and code Playground

by icehota

HTML

<link rel="stylesheet" href="//cdn.bootcss.com/datatables/1.10.7/css/jquery.dataTables.min.css">
<script src="//cdn.bootcss.com/datatables/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <h2 class="text-center">data-table test</h2>
    <div class="container">
        <table id="example" class="display table-bordered">
            <thead>
                <tr>
                    <th>报表日期</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                    <th>you</th>
                    <th>meme</th>
                    <th>hehe</th>
                    <th>sheshe</th>
                    <th>itit</th>
                    <th>and</th>
                    <th>hello</th>
                    <th>what</th>
                    <th>ever</th>
                    <th>you</th>
                    <th>sayabout</th>
                    <th>phone</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>提取一般风险准备Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                    <td>System Architect</td>
                </tr>
                <tr>
                    <td>提取一般风险准备Garrett Winters</td>
                  ...

CSS

table thead tr th {
        text-align: center;
        /*white-space: pre!important;*/
    }

    table tbody tr td {
        text-align: right;
    }

    table tbody tr td:first-child {
        text-align: left;
        width: 400px;
    }

    table td {
        width: 400px!important;
    }

JavaScript

$(document).ready(function() {

        var table = $('#example').DataTable({
            // "dom": 'Rlfrtip',
            "ordering": false,
            "info": false,
            // responsive: true,
            // fixedHeader: true,
            paging: false,
            scrollY: '800px',
            scrollX: '100%',
            scrollCollapse: true,
        })

        // new $.fn.dataTable.ColReorder(table)
        // new $.fn.dataTable.FixedColumns(table)

        // 每一列第一个都加个小的叉叉图标, add a delete icon
        $('table tr:eq(0)')
            .children('th')
            .css('vertical-align', 'middle')
            .append('<span class="glyphicon glyphicon-remove" style="cursor: pointer"></span>')

        // 点击之后删除这一列 click the icon to remove this column
        $('span.glyphicon-remove')
            .click(function(event) {
                var tdIndex = $(this).parent('th').index()

                $(this).parent('th').remove()

                $('table tr').each(function() {
                    $(this).find('td').eq(tdIndex).fadeOut()
                })
            })
    })