table-layout为fixed时,表格长度平均分配的现象解决


对于表格中内容超出长度改变表格长度需要设置如下属性
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
还有
table的属性able-layout:fixed,这会使表格大小不会因为内容变化而变化。

当表格table-layout为fixed时,其表格宽度由第一行决定,若第一行为一整行时,设定表格的宽度成了一个问题,其下的表格都会平均分配,在css中设置的百分比也不会起效,这是用colgroup配合col标签可以解决问题

 
 
<table width="100%" border="1" style="table-layout:fixed">
        <colgroup >
            <col width=10% >
            <col width=10%>
            <col width=80%>
        </colgroup>
        <tr>
           <td colspan="3">BOOK</td>
        </tr>
        <tr>
            <td>ISBN</td>
            <td>Title</td>
            <td>Price</td>
        </tr>
        <tr>
            <td>3476896</td>
            <td>My first HTML</td>
            <td>$53</td>
        </tr>
    </table>

 

posted @ 2015-10-29 16:23  Mr-Lonely  阅读(559)  评论(0编辑  收藏  举报