Search code examples
htmlformsresponsive-designyui-pure-css

make table adapt screen width // purecss

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>

Solution

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