Табличная верстка

[bdrch]

Доброго времени суток! Данная страница выводит результат из mysql в виде таблицы. Каждая строка является кнопкой, которая переводит пользователя на страницу редактирования строки.

Проблема заключается в том, что я не могу сверстать ширину колонок. Укажите мне на мои ошибки. Заранее благодарен.

<style>
.serch
{
width: 160px;
border: solid 1px #E5E5E5;
padding: 5px;
font-size: 33px;
background: -webkit-gradient( linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF) );
background: -moz-linear-gradient( top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px );
-moz-box-shadow: 0px 0px 8px #f0f0f0;
-webkit-box-shadow: 0px 0px 8px #f0f0f0;
box-shadow: 0px 0px 8px #f0f0f0;
}
.table
{
display: table;
border-collapse: collapse;
border: none;
width: 100%;
margin-top: 10px;
padding: 0px;
}
.table_tr
{
display: table-row;
width: 100%;
height: 50px;
padding: 0;
border: none;
}
.table_td1
{
display: table-cell;
width: 10%;
vertical-align: middle;
}
.table_td2
{
display: table-cell;
width: 10%;
vertical-align: middle;
}
.table_td3
{
display: table-cell;
width: 10%;
vertical-align: middle;
}
.table_td4
{
display: table-cell;
width: 10%;
vertical-align: middle;
}
.table_td5
{
display: table-cell;
width: 10%;
vertical-align: middle;
}
.table_td6
{
display: table-cell;
width: 50%;
text-align: center;
vertical-align: middle;
}
</style>

<form method="post" class="table">
<div class="table_tr">
<div class="table_td1">Дата</div>
<div class="table_td2">Кв</div>
<div class="table_td3">Уч</div>
<div class="table_td4">Фамилия</div>
<div class="table_td5"><input type="text" autocomplete="off" name="selch1" maxlength="8" placeholder="Счетчик" class="serch"><input type="image" name="searchch" src="searchb.png" value=" " align="top"></div>
<div class="table_td6">Событие</div>
</div>
<?
while($row=mysql_fetch_array($result)) {
echo '<button name=edit value="'.$row['id'].'" class="table_tr"><div class="table_td1">'.$row['date'].'</div><div class="table_td2">'.$row['kv'].'</div><div class="table_td3">'.$row['uch'].'</div><div class="table_td4">'.$row['fio'].'</div><div class="table_td5">'.$row['ch1'].'</div><div class="table_td6">'.$row['sob'].'</div></button>';
}
}
?>
</form>

 

[wwt]

1 час назад, bdrch сказал:

Невозможно использовать <button><tr><td></td></tr></button>. А вставить кнопку в каждую ячейку значительно увеличит вес страницы, что недопустимо для конечного пользователя (электрика с gprs интернетом в селе).

https://jsfiddle.net/688cx1wg/

 

[wwt]

Не очень понимаю зачем при генерации таблицы с данными делать это через display: table; и т.д. ? почему не выводить обычную таблицу, собственно для данных она и создана. И вы, при таком подходе, избавитесь от кучи кода в CSS.

[aqua.77]

Таблицами надо делать таблицы. Остальное надо делать блоками. ИМХО

[bdrch]

5 минут назад, wwt сказал:

Не очень понимаю зачем при генерации таблицы с данными делать это через display: table; и т.д. ? почему не выводить обычную таблицу, собственно для данных она и создана. И вы, при таком подходе, избавитесь от кучи кода в CSS.

Я с вами абсолютно согласен. И более того изначально вся страница была на предназначенных для этого тегах <table><tr><td>, НО

Невозможно использовать <button><tr><td></td></tr></button>. А вставить кнопку в каждую ячейку значительно увеличит вес страницы, что недопустимо для конечного пользователя (электрика с gprs интернетом в селе).

Edited December 13, 2016 by bdrch

[SelenIT]

Для электрика в селе вставить одну обычную button в отдельную последнюю ячейку tr-ки, как деды еще делали. А для столичных хипстеров кнопку спрятать и навесить на всю tr обработчик клика с тем же действием, и все будут довольны. Прогрессивное улучшение называется!

А «в лоб» задать кнопке табличное или еще какое-то хитрое отображение, увы, вряд ли выйдет, тем более кроссбраузерно. По-моему, без скрипта тут никак особо не выкрутиться.

[bdrch]

5 часов назад, wwt сказал:

https://jsfiddle.net/688cx1wg/

 

Странно, data-id у меня присваивает, но по клику ничего не происходит.

UPD погружал видимо кривой jquery. Все работает, огромное вам спасибо.

Edited December 13, 2016 by bdrch