Question

我使用纯css来设计我的网页。我的页面上有这个表/表格。不幸的是，它超出了我的屏幕宽度。如何使表自动模式格式适合我的屏幕？我希望每个列“缩小”，直到表格符合用户的屏幕宽度。

<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

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

使表适应屏幕宽度// purecss

1 个答案: