HTML - две таблицы горизонтально - PullRequest
Новая
       6

HTML - две таблицы горизонтально

15 голосов
/ 19 января 2012

Я пытаюсь отобразить таблицы рядом друг с другом по горизонтали, но это то, что я получаю.
enter image description here 

<tr>
<th>
      <span onclick="toggleDiv('favData', 'favDataImg')" style="cursor: hand;">Favorites <img   name="favDataImg" src="../images/minus.gif" /></span>
</th>
</tr>
<tr>
    <td style="width: 300px; text-align: left; padding-right: 30px;">
<div id="favData" style="display: block;">
<fieldset style="width: 240px;">
<legend>Favorites</legend>
<table border="0" align="left">

<input type="radio" name="publicRadio" value="Public" >Public: </input>

<select  name="publicDropDown">
<option value="Public Dropdown" selected="selected">Public Dropdown</option>
</select>

<br><br>
<input type="radio" name="userRadio" value="User" >User: </input>

<select  name="userDropDown">
<option value="User Dropdown" selected="selected">User Dropdown</option>
</select>

<br><br>
<input type="radio" name="customRadio" value="Custom" >Custom: </input>

</table>
</fieldset>


<fieldset style="width: 240px;">
<legend>Favorites</legend>
<table border="0" align="left">

<input type="radio" name="publicRadio" value="Public" >Public: </input>

<select  name="publicDropDown">
<option value="Public Dropdown" selected="selected">Public Dropdown</option>
</select>

<br><br>
<input type="radio" name="userRadio" value="User" >User: </input>

<select  name="userDropDown">
<option value="User Dropdown" selected="selected">User Dropdown</option>
</select>

<br><br>
<input type="radio" name="customRadio" value="Custom" >Custom: </input>

</table>
</fieldset>



</div>
</td>
</tr>

Ответы [ 9 ]

12 голосов
/ 22 января 2014

Этот ответ взят из ответа Криса Бейкера дубликата вопроса. Пожалуйста, проголосуйте за его ответ.

Можно использовать float: left или display: inline-block в зависимости от содержимого и пространства: 

<table style="display: inline-block">

<table style="float: left">

Эта страница уже настроена с HTML, чтобы попробовать и посмотреть, как она выглядит в браузере: http://jsfiddle.net/SM769/

Документация

Пример * ** 1029 тысяча двадцать-восемь * <table style="float: left"> <tr> <td>..</td> </tr> </table> <table style="float: left"> <tr> <td>..</td> </tr> </table>

8 голосов
/ 19 января 2012

Я думаю, что вам не хватает нескольких строк HTML с начала копирования и вставки, однако вам нужно добавить float:left к CSS первого набора полей.

3 голосов
/ 04 декабря 2018

попробуйте добавить в ваш файл CSS: 

.table-wrapper {
    display:inline-flex;
}

Я пробовал с «display: inline-table», с «float: left» и другими вещами, но ни один из них не работал для меня. Я надеюсь, что это работает для вас!

1 голос
/ 16 сентября 2015 
<!DOCTYPE html>
<html>
<body>

<table style="float: left; border-collapse:collapse; " border=\"1px;\" >
  <tr>
    <td>Jill</td>
    <td>Smith</td>      
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>        
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
</table>


<table style="border-collapse:collapse; " border=\"1px;\">
  <tr>
    <td>Jill jill</td>
    <td>Smith</td>      
    <td>50</td>
  </tr>
  <tr>
    <td>Eveeve</td>
    <td>Jackson</td>        
    <td>94</td>
  </tr>
  <tr>
    <td>Johnjohj</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
</table>

</body>
</html>
1 голос
/ 19 января 2012

Добавление display: table-cell; в таблицы может помочь. http://www.quirksmode.org/css/display.html И вам может понадобиться добавить div с помощью display: table; или добавить это свойство к какому-либо элементу в зависимости от структуры вашей страницы.

1 голос
/ 19 января 2012

Вы должны применить правило CSS к вашим таблицам, чтобы следовать стандартному перемещению документа:

table{ float:left; }

или

<table style="float: left;">.........</table>

PS: Просто убедитесь, что этот блок выбора тегов не повлияет на другие таблицы, в отличие от других, в противном случае рекомендуется использовать идентификаторы или селекторы классов.

1 голос
/ 19 января 2012

Добавьте: 

fieldset
{
    float: left;
}

в ваш CSS.Я скопировал ваш HTML-код в http://jsfiddle.net/S3n6D/ и добавил этот CSS.Вы можете увидеть результат там.

0 голосов
/ 11 июля 2019

Чтобы отобразить две таблицы рядом, вы можете добавить следующий CSS: 

table.table1, table.table2{
    width:49.8%;
    display: inline-table;
}
0 голосов
/ 10 января 2014 
<!DOCTYPE html>

<html>
<head>
<title>tables sideXside2</title>
<style>

table, td  { border-width: 2px; border-style: solid; border-collapse: collapse; padding: 15px; color: #000000; text-align: center; }

table.pos_fixed1 { position:fixed; top:30px; left:10px; }

table.pos_fixed2 { position:fixed; top:30px; left:250px; }

table.pos_fixed3 { position:fixed; top:30px; left:490px; }

</style>

</head>
<body>

<table summary="" width="10%" class="pos_fixed1">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>

<table summary="" width="10%" class="pos_fixed2">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>D</td><td>E</td><td>F</td></tr>
<tr><td>G</td><td>H</td><td>I</td></tr>
</table>

<table summary="" width="10%" class="pos_fixed3">
<tr><td>i</td><td>ii</td><td>iii</td></tr>
<tr><td>iv</td><td>v</td><td>vi</td></tr>
<tr><td>vii</td><td>viii</td><td>ix</td></tr>
</table>

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

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

...