水平对齐多个表格?

发布于 2025-01-08 05:20:06 字数 1605 浏览 1 评论 0原文

我想要多个水平表格。它可以在 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>

I want multiple tables horizontally. It works in Firefox, but not Chrome. Any ideas?

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

憧憬巴黎街头的黎明 2025-01-15 05:20:06

我刚刚检查了 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/

I just checked in Chrome, it's working fine

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

棒棒糖 2025-01-15 05:20:06

为了使浮动属性发挥作用,您通常需要指定要浮动的对象的宽度。试试这个:

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

In order for the float property to work, you'll usually need to specify the width of the object you're trying to float. Try this:

<!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>
慈悲佛祖 2025-01-15 05:20:06

我不明白 chrome 怎么会不喜欢这个。是否需要使用多个表?也许您应该根据此页面的目的填写所需的额外文本。更好的方法可能是使用 DIV (定义页面上的部分)或 UL (无列表样式的无序列表),但同样,不知道什么这个页面正在做。

I don't see how chrome wouldn't like this. Is it necessary to use multiple tables? Maybe you should of filled that required extra text with the purpose of this page.. A better approach could be to use DIV (to define sections on the page) or UL (unordered list with no list-style) but again, no idea what this page is doing.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文