水平对齐多个表？

我想水平多个表。它在Firefox中工作，但不是铬。有任何想法吗？水平对齐多个表？

<!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>

来源

2012-02-23 Ber53rker

我只是cecked在克罗姆，它的正常工作 http://jsfiddle.net/Svbz2/

来源

2012-02-23 23:15:09 Dips

奇怪。也许它被缓存了？ I CTRL + F5'd it ... – Ber53rker 2012-02-23 23:18:32

为了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>

来源

2012-02-23 23:17:34 Zakman411

注意到使用表格作为布局结构并不是'语义正确'的方法。似乎你使用它作为一个Web表单的结构 - 也许考虑使用浮动div来代替？ – Zakman411 2012-02-23 23:21:06

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

来源

2012-02-23 23:18:45 Kurt

水平对齐多个表？

回答

相关问题