table cell width issue_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-04 19:39 出处：网络

I have a table with 2 rows where i need varying cell width as <body bgcolor=\"#14B3D9\"> <table width=\"100%\" border=\"1\" bgcolor=\"#ffffff\">

相关专题：css

I have a table with 2 rows where i need varying cell width as

<body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
    <tr>
        <td width="25%">25</td>
        <td width="50%">50</td>
        <td width="25%">25</td>
    </tr>
    <tr>
        <td width="50%">50</td>
        <开发者_如何学编程;td width="30%">30</td>
        <td width="20%">20</td>
    </tr>
</table>
</body>

I cannot get the width as specified the second row also gets the width of the first row.

to do this with one table you need to introduce more columns and then get the column widths by using colspan so you can get the combined widths you require

to get this to work well across browser you will possibly need to use the <col> and <colgroup> elements : http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4

<body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
<colgroup>
<col width="25%">
<col width="25%">
<col width="25%">
<col width="5%">
<col width="20%">
</colgroup>

    <tr>
        <td>25</td>
        <td colspan="2">50</td>
        <td colspan="2">25</td>     
    </tr>
    <tr>
        <td colspan="2">50</td>
        <td colspan="2">30</td>
        <td>20</td>
    </tr>
</table>
</body>

Actually, you can just have each tr set to display:block, and it will allow you to set different column widths for each row.

You can use nth:child

However it will apply to all rows. This will be relative and not absolute.

    tr>:nth-child(6){ 
    width: 20%;
    }
    tr>:nth-child(7){ 
    width: 80%;
    }

table cell width issue

精彩评论

关注公众号

热门标签

图文推荐

table cell width issue

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：