当其位置绝对时,为什么表格不想100%在thead中

时间:2015-10-15 07:12:41

标签: html-table width

请帮帮我。我需要把桌子固定好。我不能改变HTML,但我只有一个问题。为什么tr不想成为100%,它只是按内容宽度。我必须保存相同的样式和HTML代码。



.row {
    margin: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
    flex-grow: 0;
    flex-shrink: 0;
    position: relative;
    padding-top: 50px;
    box-sizing: border-box;
    overflow: hidden;
    margin-top: 7px;
}
.content_body {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-grow: 0;
    flex-shrink: 1;
    width: 100%;
    height: 100px;
    overflow: auto;
    padding-bottom: 5px;
}
table{
    width: 100%;
    border: 1px solid #dcdcdc;
    box-sizing: border-box;
    border-collapse: collapse;
}

table tr {
    width: 100%;
}

table thead {
    color: #a2a1a1;
    background: none;
    vertical-align: middle;
}

table thead th {
    font-size: 1.2em;
    font-weight: normal;
    text-align: center;
    border: 1px solid #dcdcdc;
    padding: 0.6%;
    box-sizing: border-box;
}

table tbody {
    color: #444;
    background: none;
    vertical-align: middle;
}
table tbody td {
    font-size: 1em;
    font-weight: normal;
    text-align: center;
    border: 1px solid #dcdcdc;
    box-sizing: border-box;
    padding: 0.55% 0.37%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
table th:nth-child(4),
table td:nth-child(4),
table th:nth-child(1),
table td:nth-child(1) {
    width: 20%;
}

table th:nth-child(2),
table td:nth-child(2) {
    width: 12.3%;
}

table th:nth-child(3),
table td:nth-child(3) {
    width: 30%;
}

table th:nth-child(5),
table td:nth-child(5) {
    width: 30%;
}
 table thead {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
} 

<div class="row">
        <div class="content_body">
            <table>
                <thead>
                <tr>
                    <th>Title 1</th>
                    <th>Title 2</th>
                    <th>Title 3</th>
                    <th>Title 4</th>
                    <th>Title 5</th>
                </tr>
                <tr>
                    <th>Title 1.1</th>
                    <th>Title 1.2</th>
                    <th>Title 1.3</th>
                    <th>Title 1.4</th>
                    <th>Title 1.5</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
                                    <tr>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
                                    <tr>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
                                    <tr>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
                                    <tr>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
                                                        <tr>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
                                                        <tr>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
&#13;
&#13;
&#13;

0 个答案:

没有答案