Jump to content
  • 0

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


bdrch
 Share

Question

Доброго времени суток! Данная страница выводит результат из 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>

 

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

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

Link to comment
Share on other sites

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

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

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

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

Edited by bdrch
Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

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

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

https://jsfiddle.net/688cx1wg/

 

  • Like 1
Link to comment
Share on other sites

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

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

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

Edited by bdrch
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Shoker2
      Вот мой код:
      <table class="down_table_main" bgcolor="#F7F7F7">     <tr>         <td><button class="down_button_main">Подробнее</button></td>     </tr> </table> Почему-то когда я использую align, ничего не происходит. А в другом коде align работает.
      <table border="0" bgcolor="white" width="800px">     <tr align="center">         <td>             <br>             <img src="https://ru-minecraft.ru/uploads/posts/2018-03/medium/1522109759_cosmicnpcs.jpg" alt="">             <h3>Мод <b>CosmicNPCs</b> - создайте второго игрока и запишите, что он будет делать.</h3>             <p>Интересный мод который позволит снимать ролики без участия других игроков, вы сможете записать свои движения и действия, а потом воспроизвести с произвольным скином, таким образом для записи каких то прикольных моментов вам не нужен второй игрок.</p>         </td>     </tr> </table>  
    • By Alex777-777
      Все привет.
      Использую bootstrap 3, хотя это наверно и не существенно. Необходимо сделать, чтобы у активных кнопок внизу был указатель, как на картинке. Кнопка любого цвета с любой границей, с иконками и текстом. Но проблема именно с треугольником внизу у активной кнопки.

      Не знаю, как к этому подступиться. Толкните в нужном направлении, спасибо.
       
    • By Tanya2021
      Не могу закруглить углы у background-color. В чем проблема? 



    • By Progrmergr
      <button class="but" onclick="tap">Пельмени</button> Как я могу в JS получить слово "Пельмени"?
    • By Bourdun
      Появился вопрос на который я так и не смог найти ответа. Нужно создать регистрацию и авторизацию с базой данных и я не понимаю как подключить php файл к html? В остальном попытаюсь разобраться сам
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy