make table adapt screen width // purecss

Question

I am using pure css to design my web page. I have this table/form on my page. Unfortunaltey it exceeds the width of my screen. How can I make the table autoamticall format so that it fits my screen? I would like that each columns "shrinks" until the table fits the screen width of the user.

<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>

score 3 · Accepted Answer · answered Jun 17 '15 at 18:41

set your table width to 100% , also set the text input fields inside each cell to 100% width. here is a working example :

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 adapt screen width // purecss

1 Answers1