HTML テーブルがその列にtable-layout
設定されている場合、auto
自動サイズ調整されます。このシナリオを考えると、特定の列を固定幅に保つ方法はありますか? CSS width を使用してみましたが、効果がないようです。
7588 次
3 に答える
4
使用する場合、CSSを使用してこれを行うことができますnth-child
CSS:
.table {
table-layout:auto
}
td, th {
border: 1px solid #999;
padding: 0.5rem;
}
.table1 th:nth-child(1), .table1 td:nth-child(1) {
width: 200px; /*becomes 218px with padding*/
background: hsl(150, 50%, 50%);
}
HTML:
<h3>table 1</h3>
<table class="table1">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>I'm 218px wide!</td>
<td>00001</td>
<td>Blue</td>
</tr>
<tr>
<td>I'm 218px wide!</td>
<td>00002</td>
<td>Red</td>
</tr>
<tr>
<td>I'm 218px wide!</td>
<td>00003</td>
<td>Green</td>
</tr>
</tbody>
</table>
<p> </p>
<h3>table 2</h3>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>I'm 118px wide!</td>
<td>00001</td>
<td>Blue</td>
</tr>
<tr>
<td>I'm 118px wide!</td>
<td>00002</td>
<td>Red</td>
</tr>
<tr>
<td>I'm 118px wide!</td>
<td>00003</td>
<td>Green</td>
</tr>
</tbody>
</table>
ここにデモがあります: http://jsfiddle.net/3dyhE/2/
于 2013-10-08T15:52:31.670 に答える
0
私の場合、すべての列の幅を指定し、使用可能な幅を満たすテーブルに対して相対的に大きくする必要がありましたが、1 つの列の幅を固定したままにしたかったのです。解決策はwidth
、固定幅の列に設定し、自動幅の列にmin-width
&を設定することでした。max-width
table {
table-layout: auto;
text-align: left;
border: 1px solid black;
width: 100%;
}
td, th {
border: 1px solid black;
}
.a {
min-width: 100px;
max-width: 100px;
}
.b {
width: 50px;
}
.c {
min-width: 40px;
max-width: 40px;
}
.d {
min-width: 80px;
max-width: 80px;
}
<table>
<tr>
<th class="a">A</th>
<th class="b">B</th>
<th class="c">C</th>
<th class="d">D</th>
</tr>
<tr>
<td class="a">Very long text here</td>
<td class="b">Very long text here</td>
<td class="c">Very long text here</td>
<td class="d">Very long text here</td>
</tr>
</table>
于 2021-12-13T12:47:27.203 に答える