table-layout: fixed;平均分配的问题

2020-08-31  本文已影响0人  XiaoAM

对于表格中内容超出长度改变表格长度需要设置如下属性
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
还有
table的属性able-layout:fixed,这会使表格大小不会因为内容变化而变化。
当表格table-layout为fixed时,其表格宽度由第一行决定,若第一行为一整行时,设定表格的宽度成了一个问题,其下的表格都会平均分配,在css中设置的百分比也不会起效,这是用colgroup配合col标签可以解决问题

<table id="remarks" style="margin: 0 1% 0;width: 98%;table-layout: fixed;" bordercolor="#fff">
                        <colgroup >
                            <col width=10% >
                            <col width=10%>
                            <col width=10%>
                            <col width=10%>
                            <col width=10%>
                            <col width=10%>
                            <col width=40%>
                        </colgroup>
                        <tr>
                            <th width="20">1:</th>
                            <th width="60">2</th>
                            <td min-width="130">3</td>
                            <th width="60">4</th>
                            <td min-width="150">5</td>
                            <th width="45">6</th>
                            <td min-width="150" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">xxxxxxxxxxxxxxxxxxx</td>
                        </tr>
                    </table>

还可以colspan属性合并列

                       <tr>
                            <th width="20">1:</th>
                            <th width="60">2</th>
                            <td min-width="130">3</td>
                            <th width="60">4</th>
                            <td min-width="150">5</td>
                            <th width="45">6</th>
                            <td min-width="150" colspan="5" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">xxxxxxxxxxxxxxxxxxx</td>
                        </tr>
上一篇 下一篇

猜你喜欢

热点阅读