Question

要求：两个table表格在DIV内居中，并且不换行

<div style=" width:1000px; text-align:center; float:left;">

<table border="0" cellspacing="0" cellpadding="0" height="22" style="background: url(claro/images/buttonaction.png) repeat-x; background-position: 0 -23px; font-size: 12px;">
<tr>
<td width="5" height="22" style=" background: url(claro/images/buttonaction.png) no-repeat;"></td>
<td style="line-height: 22px; padding: 0 5px 0 5px; font-size: 12px; cursor: pointer;">按钮1</td>
<td width="5" height="22" style=" background: url(claro/images/buttonaction.png) no-repeat; background-position: -6px 0;"></td>
</tr>
</table>

<table border="0" cellspacing="0" cellpadding="0" height="22" style="background: url(claro/images/buttonaction.png) repeat-x; background-position: 0 -23px; font-size: 12px;">
<tr>
<td width="5" height="22" style=" background: url(claro/images/buttonaction.png) no-repeat;"></td>
<td style="line-height: 22px; padding: 0 5px 0 5px; font-size: 12px; cursor: pointer;">按钮2</td>
<td width="5" height="22" style=" background: url(claro/images/buttonaction.png) no-repeat; background-position: -6px 0;"></td>
</tr>
</table>

</div>

Answer 1

<div style=" width:1000px; text-align:center; float:left; border:solid 1 green">

<table border="1" cellspacing="0" cellpadding="0" height="22" style="background: url(claro/images/buttonaction.png) repeat-x; background-position: 0 -23px; font-size: 12px; display:inline">
<tr>
<td width="5" height="22" style=" background: url(claro/images/buttonaction.png) no-repeat;"></td>
<td style="line-height: 22px; padding: 0 5px 0 5px; font-size: 12px; cursor: pointer;">按钮1</td>
<td width="5" height="22" style=" background: url(claro/images/buttonaction.png) no-repeat; background-position: -6px 0;"></td>
</tr>
</table>

<table border="1" cellspacing="0" cellpadding="0" height="22" style="background: url(claro/images/buttonaction.png) repeat-x; background-position: 0 -23px; font-size: 12px;display:inline">
<tr>
<td width="5" height="22" style=" background: url(claro/images/buttonaction.png) no-repeat;"></td>
<td style="line-height: 22px; padding: 0 5px 0 5px; font-size: 12px; cursor: pointer;">按钮2</td>
<td width="5" height="22" style=" background: url(claro/images/buttonaction.png) no-repeat; background-position: -6px 0;"></td>
</tr>
</table>

</div>

/*为了显示效果我添加了边框,你把边框改回去就行，主要就是给两个table加上display:inline样式*/

Answer 2

<div style=" width:1000px; text-align:center; float:left;">
<table align="center"><tr><td>
<table border="0" cellspacing="0" cellpadding="0" height="22" style="background: url(claro/images/buttonaction.png) repeat-x; background-position: 0 -23px; font-size: 12px;">
<tr>
<td width="5" height="22" style=" background: url(claro/images/buttonaction.png) no-repeat;"></td>
<td style="line-height: 22px; padding: 0 5px 0 5px; font-size: 12px; cursor: pointer;">按钮1</td>
<td width="5" height="22" style=" background: url(claro/images/buttonaction.png) no-repeat; background-position: -6px 0;"></td>
</tr>
</table>

</td><td>
<table border="0" cellspacing="0" cellpadding="0" height="22" style="background: url(claro/images/buttonaction.png) repeat-x; background-position: 0 -23px; font-size: 12px;">
<tr>
<td width="5" height="22" style=" background: url(claro/images/buttonaction.png) no-repeat;"></td>
<td style="line-height: 22px; padding: 0 5px 0 5px; font-size: 12px; cursor: pointer;">按钮2</td>
<td width="5" height="22" style=" background: url(claro/images/buttonaction.png) no-repeat; background-position: -6px 0;"></td>
</tr>
</table></td>
</tr>
</table>
</div>

Answer 3

<table align="center" 。。。。>
两个table都加上align="center" 就可以了
我觉得你可以看懂 其他代码不用改我就不给你写了

Answer 4

在每一个table的style里面添加margin:auto;display:inline-table;

Answer 5

<div style=" width:1000px; text-align:center; float:left;">
<table width="50%" style="float:left;"></table>
<table width="50%" style ="float:right"></table>
</div>