表格布局的替代方法:固定

时间:2015-10-17 19:36:04

标签: html css html-table

我用表创建一个页面。我想打破一个回应的话。 这是我的CSS代码,

body{
        border:0px;
        margin:0px;
        width:100%;
        padding:0;
        height:100%;   
    }
    #container{
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .right-panel {
        -webkit-flex-grow: 1;
        flex-grow: 1;
    }
    .left-panel{
        width:220px;
        min-height:100vh;
        background-color:#222;
    }
    .right-panel{
        min-height:100vh;
        background-color:#eef0ed;
    }
    table{
        width:100%;
        word-break: break-all;
        word-wrap: break-word;
        table-layout: auto;
    }
    td{
        border-bottom:1px solid #ccc;
    }
    .left{
        float:left;   
    }
    .right{
     float:right;   
    }
    .clear{
     clear:both;
    }

这是我的HTML代码,

<body><div id="container"><div class="left-panel">
 </div><div class="right-panel"><div id="content">
        <div class="container-table">
            <table class="tb">
                <tr>
                    <th>
                        Pasdaddadadad
                    </th>
                    <th>
                        SPasdaddadadad
                    </th>
                    <th>
                        DPasdaddadadad
                    </th>
                    <th>
                        LPasdaddadadad
                    </th>
                    <th>
                        APasdaddadadad
                    </th>
                </tr>
                <tr>
                    <td>
                        POPasdaddadadad
                    </td>
                    <td>
                        PePasdaddadadad
                    </td>
                    <td>
                        MaPasdaddadadad
                    </td>
                    <td>
                        asdadadadadada
                    </td>
                    <td>
                        asdadadadadada
                    </td>
                </tr>
            </table>
        </div>
    </div></div></div></body>

我使用了断字。 我把它设置为全部,但它不起作用。 我也用过自动换行。 我把它设置为破解词,但仍然不起作用。

我累了桌子布局:固定。 我认为这条线可以使它发挥作用。但是有一个问题。

在我的布局中,表格应该在右侧。 但是当我使用table-layout:fixed时,它会下降并占据页面宽度的100%。

如何让它保持在右侧? 或表格布局的任何替代方案?

0 个答案:

没有答案