Выровнять несколько таблиц по горизонтали? - PullRequest
Новая
       3

Выровнять несколько таблиц по горизонтали?

0 голосов
/ 24 февраля 2012

Я хочу несколько таблиц по горизонтали.Работает в 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>

Ответы [ 3 ]

1 голос
/ 24 февраля 2012

Чтобы свойство 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>
1 голос
/ 24 февраля 2012

Я только что проверил в 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/

0 голосов
/ 24 февраля 2012

Я не понимаю, как хром не понравится это. Нужно ли использовать несколько таблиц? Возможно, вам следует заполнить этот требуемый дополнительный текст с целью этой страницы. Лучшим подходом может быть использование DIV (для определения разделов на странице) или UL (неупорядоченный список без стиля списка), но опять же, понятия не имею эта страница делает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...