сделать таблицу адаптировать ширину экрана // purecss

Я использую чистый css для создания моей веб-страницы. У меня есть эта таблица/форма на моей странице. К сожалению, он превышает ширину моего экрана. Как я могу сделать формат таблицы autoamticall так, чтобы он соответствовал моему экрану? Я бы хотел, чтобы каждая колонка «сжималась» до тех пор, пока таблица не будет соответствовать ширине экрана пользователя.сделать таблицу адаптировать ширину экрана // purecss

<html> 
 
\t <head> 
 
\t \t <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css"> 
 
\t \t \t <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway:200"> 
 
\t \t \t <link rel="stylesheet" href="css/layouts/style_pure.css"> 
 
\t \t \t <!--<link rel="stylesheet" type="text/css" href="style.css">--> 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t <!--[if lte IE 8]> 
 
\t \t \t \t <link rel="stylesheet" href="css/layouts/side-menu-old-ie.css"> 
 
\t \t \t <![endif]--> 
 
\t \t \t <!--[if gt IE 8]><!--> 
 
\t \t \t \t <link rel="stylesheet" href="css/layouts/side-menu.css"> 
 
\t \t \t <!--<![endif]--> 
 
\t </head> 
 
\t <body> 
 
\t \t <form class="pure-table"> 
 
\t \t \t <table class="pure-table"> 
 
\t \t \t \t <thead> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <td>Col1</td> 
 
\t \t \t \t \t \t <td>Col2</td> 
 
\t \t \t \t \t \t <td>Col3</td> 
 
\t \t \t \t \t \t <td>Col4</td> 
 
\t \t \t \t \t \t <td>Col5</td> 
 
\t \t \t \t \t \t <td>Col6</td> 
 
\t \t \t \t \t \t <td>Col7</td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t </thead> 
 
\t \t \t \t <tbody> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t \t <input type="text" /> 
 
\t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t \t <input type="text" /> 
 
\t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t \t <input type="text" /> 
 
\t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t \t <input type="text" /> 
 
\t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t \t <input type="text" /> 
 
\t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t \t <input type="text" /> 
 
\t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t \t <input type="text" /> 
 
\t \t \t \t \t \t </td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t </table> 
 
\t \t </form> 
 
\t </body> 
 
</html>

источник

2015-03-07 blckbird

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

http://jsfiddle.net/ggLvLs3e/16/

CSS

.stretch{ 
    width:100%; 
} 

input[type="text"]{ 
    width:100%; 
}

HTML

<table class="pure-table stretch"> 
    <thead> 
     <tr> 
      <th>Col1</th> 
      <th>Col2</th> 
      <th>Col3</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td><input type="text" /></td> 
      <td><input type="text" /></td> 
      <td><input type="text" /></td> 
     </tr> 
    </tbody> 
</table>

источник

2015-06-17 18:41:42 looshi

сделать таблицу адаптировать ширину экрана // purecss

ответ

Смежные вопросы