Таблица и "контентная" ширина колонок

klierik · November 8, 2007

Доброго.

Есть следующая таблица (все пихнул в один блок да бы не разбивать на части)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>grid_one_doc</title>


<style type="text/css">

/*** x-grid ***/
.x-grid {
 border: 1px solid #DCEBF7;
}

/* defaults & same options */
.x-grid * { margin: 0px; padding: 0px; border: none; }
.x-grid table {
 border-collapse: collapse;
 border: none;
 width: 100%;
 table-layout: fixed;
}
.x-grid div {
 text-align: left;
 color: #000;
 font-family: Tahoma;
 font-size: 11px;
}
.x-grid div.out {
 /**/
}
.x-grid div.in {
 margin-right: 4px;
 padding-left: 4px;
 _padding-left: 8px;

 overflow: hidden;
}
.x-grid span {
 white-space: nowrap;
}

.x-grid td {
 overflow: hidden; /* for correct overflow in safari */
}

 .x-grid tr, .x-grid td {
 height: 100%;
 vertical-align: middle;
 text-align: center;
 }

/* grid data */
.x-grid .data {
 /**/
}
 .x-grid .data tr, .x-grid .data td {
 height: 25px; /* default lihe height */
 }
 .x-grid .data td {
 border-top: 1px solid #eef6fb;
 border-bottom: 1px solid #eef6fb;
 padding: 0;
 }

 /* line colors */
 .x-grid .data tr { /* static white */
 background-color: #fff;
 }
 .x-grid .data tr.dark { /* static dark */
 background-color: #eef6fb;
 }
 .x-grid .data tr:hover {
 background-color: #dcebf7;
 }
 /* vertical align */
 .x-grid .data tr.v-top td {
 vertical-align: top;
 padding-top: 4px;
 }
 .x-grid .data tr.v-btm td {
 vertical-align: bottom;
 }

 /* horizontal align */
 .x-grid .data td.h-ctr div.in {
 text-align: center;
 }
 .x-grid .data td.h-rht div.in {
 text-align: right;
 }

 /* chekbox */
 .x-grid .data td.chk-box {
 background-color: #dcebf7;
 }
 .x-grid .data td.chk-box input {
 margin: 1px 0;
 }

</style>


</head>

<body>

 <!-- x-grid -->
 <div class="x-grid">

 <!-- data -->
 <table class="data">

 <col width="23"></col>
 <col width=""></col>
 <col width="150"></col>
 <col width=""></col>
 <col width="200"></col>
 <colgroup width="300">
 <col width="50"></col>
 <col width="50"></col>
 <col width="50"></col>
 <col width="150"></col>
 </colgroup>


 <tr>

 <td class="chk-box">
 <input name="" type="checkbox" value="" />
 </td>
 <td><div class="out"><div class="in">
 <span class="asc">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
 </div></div></td>
 <td class="sorted"><div class="out"><div class="in">
 <span class="dsc">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
 </div></div></td>
 <td><div class="out"><div class="in">
 <span class="none">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
 </div></div></td>
 <td><div class="out"><div class="in">
 <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
 </div></div></td>

 <td><div class="out"><div class="in">
 <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
 </div></div></td>
 <td><div class="out"><div class="in">
 <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
 </div></div></td>
 <td><div class="out"><div class="in">
 <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
 </div></div></td>
 <td><div class="out"><div class="in">
 <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
 </div></div></td>

 </tr>
 <tr class="dark v-top">

 <td class="chk-box">
 <input name="" type="checkbox" value="" />
 </td>
 <td><div class="out"><div class="in">
 <span class="asc">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
 </div></div></td>
 <td class="sorted"><div class="out"><div class="in">
 <span class="dsc" style="white-space:normal;">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
 </div></div></td>
 <td><div class="out"><div class="in">
 <span class="none">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
 </div></div></td>
 <td><div class="out"><div class="in">
 <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
 </div></div></td>

 <td><div class="out"><div class="in">
 <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
 </div></div></td>
 <td><div class="out"><div class="in">
 <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
 </div></div></td>
 <td><div class="out"><div class="in">
 <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
 </div></div></td>
 <td style=""><div class="out" style=""><div class="in">
 <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
 </div></div></td>

 </tr>
 </table>

 </div>
 <!-- /x-grid -->


</body>
</html>

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

в конце таблицы 4 столбика. общая их ширина 300рх.

если не задавать ширину колонки, то она начинает "ехать".

а хотелось б что б сумарная их ширина была 300px (ну или заведомо заданое)

и вот ширина каждой колонки зависела от контента.

то есть по умолчанию они все одинаковые (получаеться 25%),

а если контент одной из колонок больше е? ширины,

то пусть он колонку раздвигает за счет свободного пространства остальных колонок.

это вообще реально средствами css/html тут реализовать.

зы: сверху над таблицой так же имееться таблица,

которая в свою очередь является шапкой для этой таблицы.

е? я не приводил в пример так как нет смысла - там разбиение практически такое-же.

зы2: я знаю несколько вариантов решения данной проблемы,

но их применение не оправдано в данном случае.

может кто-то поделиться своей точкой зрения на данный вопрос

Dimitry Wolotko · November 8, 2007

Вроде Эксперт, а пишешь топики не в те разделы.

В "проблемы верстки"

PS - да, да, именно в них.

klierik · November 9, 2007

вопрос спорный, но соглашусь

Sign In

Таблица и "контентная" ширина колонок

Question

klierik

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Dimitry Wolotko

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information