html表列大小
问题描述:
我想知道是否有办法按照我想要的方式调整表的大小? 我想有一个X列的表,其中只有一列可以有一个可变大小,其他人必须适应其大小,同时保持最小宽度。 EX。html表列大小
| Col0 | Col1 | Col 2 | Col3 | Col4 | Col5 |
| dat1 | d | dat3dater | datadata | datatdatadatadata | dat |
| | dat2 | asdasd | datad | datadatadatad.....| |
在这种情况下,第2列使用剩余空间,其他列适应其内容。
这是什么样的最简单的方式?
答
这听起来像是响应式设计。因此,您可以使用框架或简单地使用我的示例,然后根据需要扭曲它。
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
border: none;
text-align: left;
padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2}
<html>
<head>
</head>
<body>
<h2>Responsive Table</h2>
<p>Sample data take from w3schools.com .</p>
<div style="overflow-x:auto;">
<table>
<tr>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>LONG ONE</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
</tr>
<tr>
<td>50</td>
<td>50</td>
<td>50</td>
<td>This wİll be longer so you can see the difference i hope</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>
</body>
</html>
+0
可正常工作。你能向我解释为什么它能这样工作吗?我没有看到任何明确声明LONG ONE列必须使用剩余空间的规则,而其他列必须适应。人们再次抱歉 –
我会尝试stacktable.js – Brian