Question

html css 如何设置以下图片里的样式

两行tr，怎样才能上下不影响，如图，第一行第二行tr长度是一样，而td的长度不一样，而html该怎么写

Answer 1

一个table弄不出这样的效果
<table width="100%" border="1">
<tr>
<td width="150"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td width="80"> </td>
<td> </td>
<td> </td>
</tr>
</table>
分开的话用两个就可以

<table width="100%" border="1">
<tr>
<td width="10"> </td>
<td> </td>
<td> </td>
</tr>
</table>
<table width="100%" border="1">
<tr>
<td width="150"> </td>
<td> </td>
<td> </td>
</tr>
</table>

而且看你图的效果也是用了两个table

Answer 2

分成两个不同的table就行了啊。两个table的其他css设置都完全一样，唯一不同的就是td的宽度

Answer 3

<style>
td {
  border: 1px solid;
}

table {
  width: 300px;
}
</style>
<table>
  <tr>
    <td colspan="2">1</td>
    <td colspan="5">2</td>
    <td colspan="2">3</td>
  </tr>
  <tr> 
    <td colspan="3">4</td>
    <td colspan="3">5</td>
    <td colspan="3">6</td>
  </tr>
</table>

用colspan，不过table布局已经不建议使用了，还是用float比较灵活。

追问

用colspan 始终都是有影响的