make table 自适应屏幕宽度 // purecss

Question

我正在使用纯 css 来设计我的网页。我的页面上有这个 table/form。不幸的是，它超出了我屏幕的宽度。我怎样才能使 table autoamtical 格式适合我的屏幕？我希望每一列 "shrinks" 直到 table 适合用户的屏幕宽度。

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

Answer 1

将 table 宽度设置为 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>

make table 自适应屏幕宽度 // purecss

make table adapt screen width // purecss

html

forms

responsive-design

yui-pure-css