проблема с таблицей

Pato · September 24, 2012

Мужики, помогите сделать красиво таблицу, делал ее на css и вот что получается

как вы видите столбцы с числами не ровные, потому что разное кол-во знаков. Как сделать чтобы все ровно было?

/* Таблица с прайсом */

table    { display: table; background: #000;}
tr       { display: table-row; }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column ; }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
#caption {caption-side: top;}
#caption {caption-side: bottom}
#table {display: table;}
#table {display: table;}
.row {display: table-row; width:100px; color:#270404;}
.cell {display: table-cell;width:965px; text-align:center; background: #e4ddbf;}
.row span:hover {background: #b1967a;}
.cell2 {display: table-cell;width:900px; text-align:center;color:#fff; background: #b1967a;}
.cell3 {display: table-cell;width:900px; text-align:center; background: #cfbfa1;}
.cell, .cell2, .cell3 {padding:3px 0;}
.raz, .dva, .tri { position:relative;}
.raz {right:300px;}
.tri {left:300px;}
.cel1, .cel2, .cel3 { position:relative;}
.cel1 {right:350px;}
.cel2 {right:20px;}
.cel3 {left:320px;}

html код имеет такую структуру


<div class="price">
                    <h3 class="pric">Брус</h3>            

                    <div id="table">

  <div class="row">

    <span class="cell2">
        <span class="raz">Размер</span>
        <span class="dva">Длина, м</span>
        <span class="tri">Цена/шт, грн</span>
    </span>


  </div><!-- Заголовки таблицы -->

  <div class="row">

    <span class="cell">
        <span class="cel1">50x50</span>
        <span class="cel2">4,5</span>
        <span class="cel3">25</span>
    </span>



  </div><!-- Светлый фон ячеек -->

  <div class="row">

    <span class="cell3">
        <span class="cel1">50x40</span>
        <span class="cel2">4,5</span>
        <span class="cel3">20</span>
    </span>



  </div><!-- Темный фон ячеек -->

  <div class="row">

    <span class="cell">
        <span class="cel1">100x50</span>
        <span class="cel2">4,5</span>
        <span class="cel3">40</span>
    </span>



  </div><!-- Светлый фон ячеек -->

  <div class="row">

    <span class="cell3">
        <span class="cel1">100x100</span>
        <span class="cel2">4,5</span>
        <span class="cel3">75</span>
    </span>



  </div><!-- Темный фон ячеек -->

  <div class="row">

    <span class="cell">
        <span class="cel1">150x70</span>
        <span class="cel2">4,5</span>
        <span class="cel3">80</span>
    </span>



  </div><!-- Светлый фон ячеек -->

  <div class="row">

    <span class="cell3">
        <span class="cel1">150x50</span>
        <span class="cel2">4,5</span>
        <span class="cel3">60</span>
    </span>



  </div><!-- Темный фон ячеек -->

  <div class="row">

    <span class="cell">
        <span class="cel1">150x100</span>
        <span class="cel2">4,5</span>
        <span class="cel3">115</span>
    </span>



  </div><!-- Светлый фон ячеек -->

  <div class="row">

    <span class="cell3">
        <span class="cel1">150x200</span>
        <span class="cel2">6</span>
        <span class="cel3">300</span>
    </span>



  </div><!-- Темный фон ячеек -->
    <div class="row">

    <span class="cell">
        <span class="cel1">200x50</span>
        <span class="cel2">6</span>
        <span class="cel3">100</span>
    </span>



  </div><!-- Светлый фон ячеек -->

  <div class="row">

    <span class="cell3">
        <span class="cel1">100x50</span>
        <span class="cel2">6</span>
        <span class="cel3">55</span>
    </span>



  </div><!-- Темный фон ячеек -->
   <div class="row">

    <span class="cell">
        <span class="cel1">180x50</span>
        <span class="cel2">6</span>
        <span class="cel3">90</span>
    </span>



  </div><!-- Светлый фон ячеек -->

  <div class="row">

    <span class="cell3">
        <span class="cel1">120x50</span>
        <span class="cel2">6</span>
        <span class="cel3">60</span>
    </span>



  </div><!-- Темный фон ячеек -->
    <div class="row">

    <span class="cell">
        <span class="cel1">100x100</span>
        <span class="cel2">6</span>
        <span class="cel3">100</span>
    </span>



  </div><!-- Светлый фон ячеек -->

  <div class="row">

    <span class="cell3">
        <span class="cel1">150x50</span>
        <span class="cel2">6</span>
        <span class="cel3">75</span>
    </span>



  </div><!-- Темный фон ячеек -->
    <div class="row">

    <span class="cell">
        <span class="cel1">150x70</span>
        <span class="cel2">6</span>
        <span class="cel3">110</span>
    </span>



  </div><!-- Светлый фон ячеек -->

  <div class="row">

    <span class="cell3">
        <span class="cel1">150x100</span>
        <span class="cel2">6</span>
        <span class="cel3">150</span>
    </span>



  </div><!-- Темный фон ячеек -->
    <div class="row">

    <span class="cell">
        <span class="cel1">150x150</span>
        <span class="cel2">6</span>
        <span class="cel3">230</span>
    </span>



  </div><!-- Светлый фон ячеек -->
   <div class="row">

    <span class="cell3">
        <span class="cel1">200x100</span>
        <span class="cel2">6</span>
        <span class="cel3">200</span>
    </span>



  </div><!-- Темный фон ячеек -->
    <div class="row">

    <span class="cell">
        <span class="cel1">150x60</span>
        <span class="cel2">6</span>
        <span class="cel3">95</span>
    </span>



  </div><!-- Светлый фон ячеек -->






</div>

<h3 class="pric">Доска</h3>            

                    <div id="table">

  <div class="row">

    <span class="cell2">
        <span class="raz">Толщина, мм</span>
        <span class="dva">Вид</span>
        <span class="tri">Цена/куб, грн</span>
    </span>


  </div><!-- Заголовки таблицы -->

  <div class="row">

    <span class="cell">
        <span class="cel1">25</span>
        <span class="cel2">Не обрезная</span>
        <span class="cel3">900</span>
    </span>



  </div><!-- Светлый фон ячеек -->

  <div class="row">

    <span class="cell3">
        <span class="cel1">40</span>
        <span class="cel2">Не обрезная</span>
        <span class="cel3">1000</span>
    </span>



  </div><!-- Темный фон ячеек -->

  <div class="row">

    <span class="cell">
        <span class="cel1">50</span>
        <span class="cel2">Не обрезная</span>
        <span class="cel3">1000</span>
    </span>



  </div><!-- Светлый фон ячеек -->

  <div class="row">

    <span class="cell3">
        <span class="cel1">25</span>
        <span class="cel2">Обрезная</span>
        <span class="cel3">1000</span>
    </span>



  </div><!-- Темный фон ячеек -->

  <div class="row">

    <span class="cell">
        <span class="cel1">40</span>
        <span class="cel2">Обрезная</span>
        <span class="cel3">1000</span>
    </span>



  </div><!-- Светлый фон ячеек -->

  <div class="row">

    <span class="cell3">
        <span class="cel1">30</span>
        <span class="cel2">Доска пола</span>
        <span class="cel3">120</span>
    </span>



  </div><!-- Темный фон ячеек -->

   <div class="row">

    <span class="cell">
        <span class="cel1">30</span>
        <span class="cel2">Блок хаус</span>
        <span class="cel3">130</span>
    </span>



  </div><!-- Светлый фон ячеек -->






</div></br>

Edited September 24, 2012 by Pato

wwt · September 25, 2012

о_О а таблицы не пробовали использовать?

USF · September 25, 2012

используйте таблица. это раз

а ровно разместить можете с помощью text-align:left + padding-left

Sign In

проблема с таблицей

Question

Pato

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

wwt

Link to comment

Share on other sites

USF

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information