Как выровнять эти таблицы в разных Div - PullRequest
Новая
       38

Как выровнять эти таблицы в разных Div

0 голосов
/ 20 мая 2011

Рассмотрим следующую привязку на моем сайте.

enter image description here

Область, выделенная красным, представляет собой таблицу, которая отображается динамически и находится в отдельном элементе div.Нижние 3 строки находятся в разных таблицах в другом div, который является статическим.Поскольку эти две таблицы в основном разные, флажки не выравниваются.Эти элементы являются частью жидкого макета и находятся в левой колонке.Есть ли способ выровнять их, не фиксируя ширину таблицы, строки и столбца?Или, может, обмануть эти две таблицы, полагая, что они на самом деле едины, и выровнять их?

Вот структура 

<div id='dynamic_in_red_border'>
    <table id="one">
    </table>
</div>
<div id="bottom">
    <table id="static">
    </table>
</div>

Надеюсь, мой вопрос ясен.

PS:красная рамка просто для того, чтобы подчеркнуть мою точку зрения, ее нет на реальном интерфейсе

Ответы [ 3 ]

1 голос
/ 20 мая 2011

Вы можете динамически вставлять строки, используя jQuery или чистый JS.Сейчас я сделаю jQuery:

HTML : 

<table id="foo">
  <tr><td>foo</td></tr>
</table>

JavaScript (с jQuery) : 

var td = $('<td>').html('bar');
var tr = $('<tr>').append(td);

$('table#foo').append(tr);
0 голосов
/ 20 мая 2011

Я не проверял это, но это то, что я бы попробовал.

Вы можете попробовать обернуть оба div-контейнера таблицы в div (#tables_container), который имеет position: относительный, затем дать обоим текущим divs ширину 100%.Итак, что-то в строках 

#tables_container {position:relative; width: 20%; } 
/* width to be the left column width*/
#dynamic_in_red_border table, 
#bottom table {width: 100%;}

<div id="tables_container">
  <div id='dynamic_in_red_border'>
    <table id="one">
    </table>
  </div>
  <div id="bottom">
    <table id="static">
    </table>
  </div>
</div>

После согласования ширины таблицы вы можете просто указать ячейки флажка text-align: right.Но если вы хотите выровнять ячейки таблицы, это будет сложнее.

0 голосов
/ 20 мая 2011

Я бы подумал, что это должно работать: 

<style>
div.container {display:table;} /* For a container including both tables */
table {display:table-row-group;}

/* Redundant, but just putting here for experimenting */
tbody {display:table-row-group;}
tr {display:table-row;}
td {display:table-cell;}

/* Add some visible borders */
div, td {border: inset black 2px;}
</style>

... но из моих тестов в Chrome и Firefox он работает только в том случае, если файл имеет истинный XHTML (с расширением XHTML или явным заголовком типа содержимого application / xhtml + xml) или чистый XML (расширение .xml), и только при наличии одного контейнера div.

...