设置table中的td宽度不同

类似站内短信的形式的一个table,想要的实现结果如下格式:

设置table中的td宽度不同_第1张图片

刚开始觉得“这里是名字”的td设置宽度为20%就可以了,代码如下:

 <table>
        <tr class="messageTrU">
            <td width="20%">这里是名字td>
            <td>
                割发代首过水电费和东莞市的分公司的分公司的分公司的分公司的风格是大法官水电费噶复读还是介绍给是大法官啥地方个省份的花果山富商大贾的双方各是梵蒂冈水电费和国际化更合适的风格水电费和国际化的风格和风格和是大法官
            td>
        tr>
        <tr class="messageTrTa">
            <td>
                大是大非噶啥等噶水电费噶啥的高发的所发生的法师打发到事发地是发的所发生的发的所发生的发大水发法大使馆富商大贾水电费后如图一提交给分行阿萨德挂号费更恐惧与对付光辉是大法官的非官方松德股房东说共多少个讽德诵功丰东股份电费过水电费
            td>
            <td width="20%">这里是名字td>
        tr>
    table>

然后效果如下:
设置table中的td宽度不同_第2张图片

居然不是我想的那样。


原因:
table中的td当宽度确定的时候,会选择统一的宽度。
解决:

 <table>
        <tr class="messageTrU">
            <td width="20%">这里是名字td>
            <td colspan="2">
                割发代首过水电费和东莞市的分公司的分公司的分公司的分公司的风格是大法官水电费噶复读还是介绍给是大法官啥地方个省份的花果山富商大贾的双方各是梵蒂冈水电费和国际化更合适的风格水电费和国际化的风格和风格和是大法官
            td>
        tr>
        <tr class="messageTrTa">
            <td  colspan="2">
                大是大非噶啥等噶水电费噶啥的高发的所发生的法师打发到事发地是发的所发生的发的所发生的发大水发法大使馆富商大贾水电费后如图一提交给分行阿萨德挂号费更恐惧与对付光辉是大法官的非官方松德股房东说共多少个讽德诵功丰东股份电费过水电费
            td>
            <td width="20%">这里是名字td>
        tr>
    table>

在另一个80%的宽度里设置属性colspan=”2”,这样一来该td实际是两个td了,并且宽度不确定,这样就实现了我的目的。

你可能感兴趣的:(html/css/js,table)