Question

我遇到了我的引导程序表的设计。表数据是动态生成的，最多包含500列，对于序列中的每个位置都是一列。首先，我试图找到一个解决方案将列包装成多行，但我没有成功，然后我决定创建多个表。

最后一个表包含剩余的列，我希望它们具有与前一列相同的列宽，这在bootstrap中看起来非常棘手，css样式max-width不起作用。也许你知道一个解决方案？感谢。

下面是一个显示问题的最小工作示例。

<html lang = "en">
    <head>
        <title>Table</title>
        <meta charset = "utf-8">
        <!--<meta name = "viewport" content = "width=device-width, initial-scale=1">-->
        <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <style>
            .table-bordered thead tr th{
                text-align: center;
                table-layout: fixed;
                width: 10px;
                max-width: 10px;
                background-color: grey;
            }

            .table-bordered tbody tr td{
                text-align: center;
                width: 10px;
                max-width: 10px;
}

        </style>

    </head>

    <body>

        <div class = "container">
            <div class = "row">
                <div class = "col-md-12">

                    <form role = "form" method = "post" action = "">
                        <?php
                        $posvector = range(0, 25);
                        $poschunks = array_chunk($posvector, 10);

                        foreach ($poschunks as $chunk) {

                            echo ' <table class="table table-bordered"> ';
                            echo ' <thead> ';
                            echo ' <tr> ';
                            foreach ($chunk as $p) {
                                echo ' <th> ' . $p . ' </th> ';
                            }
                            echo ' </tr> ';
                            echo ' </thead> ';
                            echo '<tbody> ';

                            for ($i = 0; $i < count($chunk); $i++) {
                                echo '  <td>  <input type="radio" name="posradio" value="'
                                . $i . '"> </td>  ';
                            }
                            echo ' </tr> ';
                            echo ' </tbody> ';
                            echo ' </table> ';
                            echo ' <br> ';
                        }
                        ?>



                        <input id="submit" type="submit" name="submit_pos" value="Submit" class="btn btn-default">
                    </form>
                </div>
            </div>
        </div>

    </body>
</html>

Answer 1

当你使用没有表格的表格边界时，它应该工作。类表负责覆盖整个视图。

android

Bootstrap固定表宽度为宽表

1 个答案: