Question

我想要水平多个表。它适用于Firefox，但不适用于Chrome。有什么想法吗？

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:#000000;}
table {border:1px solid #FFFFFF; float:left;}
tr, td {background-color:#000000; border:1px solid #00000;}
</style>
</head>

<body>
<table id="t1">

<tr>
    <td><input type="text" /></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td><input type="text" /></td>
</tr>
<tr>
    <td><input type="text" /></td>
    <td></td>
    <td></td>
</tr>
    <tr>
    <td><input type="text" /></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td><input type="text" /></td>
</tr>
<tr>
    <td><input type="text" /></td>
    <td></td>
    <td></td>
</tr>

</table>
<table id="t2">

<tr>
    <td><input type="text" /></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td><input type="text" /></td>
</tr>
<tr>
        <td><input type="text" /></td>
        <td></td>
        <td></td>
    </tr>

</table>
</body>
</html>

Answer 1

我刚刚在Chrome中查看过，它工作正常

<style>
body {background-color:#000000;}
table {border:1px solid #FFFFFF; float:left;}
tr, td {background-color:#000000; border:1px solid #00000;}
</style>

<table id="t1">

<tr>
    <td><input type="text" /></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td><input type="text" /></td>
</tr>
<tr>
    <td><input type="text" /></td>
    <td></td>
    <td></td>
</tr>
    <tr>
    <td><input type="text" /></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td><input type="text" /></td>
</tr>
<tr>
    <td><input type="text" /></td>
    <td></td>
    <td></td>
</tr>

</table>
<table id="t2">

<tr>
    <td><input type="text" /></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td><input type="text" /></td>
</tr>
<tr>
        <td><input type="text" /></td>
        <td></td>
        <td></td>
    </tr>

</table>

http://jsfiddle.net/Svbz2/

Answer 2

为了使float属性起作用，通常需要指定要尝试浮动的对象的宽度。试试这个：

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:#000000;}
table {border:1px solid #FFFFFF; width:200px; float:left;}
tr, td {background-color:#000000; border:1px solid #00000;}
</style>
</head>

<body>
<table id="t1">

<tr>
    <td><input type="text" /></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td><input type="text" /></td>
</tr>
<tr>
    <td><input type="text" /></td>
    <td></td>
    <td></td>
</tr>
    <tr>
    <td><input type="text" /></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td><input type="text" /></td>
</tr>
<tr>
    <td><input type="text" /></td>
    <td></td>
    <td></td>
</tr>

</table>
<table id="t2">

<tr>
    <td><input type="text" /></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td><input type="text" /></td>
</tr>
<tr>
        <td><input type="text" /></td>
        <td></td>
        <td></td>
    </tr>

</table>
</body>
</html>

Answer 3

我不知道chrome会不会喜欢这个。是否有必要使用多个表？也许你应该用这个页面的目的来填充所需的额外文本。更好的方法可能是使用DIV（在页面上定义部分）或UL（没有列表样式的无序列表）但是再次，不知道是什么这个页面正在做。

水平对齐多个表格？

3 个答案: