使两个表具有相同的列宽?

时间:2011-12-21 03:13:59

标签: html

我有两个表,每个表有两列。有没有办法让他们的第0列宽度相同?:

 // table0
 ---------------------------
 |           | words words |
 | apples    | words words |
 |           | words words |
 ---------------------------

 // table1
 ------------------------------------
 |                    | words words |
 | diamond almonds    | words words |
 |                    | words words |
 ------------------------------------

是的,所以理想情况下table0的第0列与table1的宽度完全相同。我需要在两个表之间放置一个标签,否则我只是将它们放在同一个表中并完全避免这个问题。类似的东西:

           Centered Title 0
 ------------------------------------
 |                    | words words |
 | apples             | words words |
 |                    | words words |
 ------------------------------------

           Centered Title 1
 ------------------------------------
 |                    | words words |
 | diamond almonds    | words words |
 |                    | words words |
 ------------------------------------

谢谢

1 个答案:

答案 0 :(得分:1)

只需在<colgroup>

中使用css即可

您的表格

<table border="1">
  <colgroup class="title"></colgroup>
  <colgroup class="description"></colgroup>
  <tr>
    <td>apples </td>
    <td>words words words words words words words</td>     
  </tr>
</table>

<强> CSS

.title{
   width: 100px;   
}   

.description{
    width: 200px;   
}

jsFiddle示例