为什么表元素的表行(tr)的宽度不行，而高度却可以？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为什么表元素的表行(tr)的宽度不行，而高度却可以？相关的知识，希望对你有一定的参考价值。
这是我的代码。
.table1
background-color: gray;
display: flex;
justify-content: ;
align-items: ;
height: 400px;
margin-left: 40px;
padding-left: ;
.table1 tr
background-color: blue;
height: 50px;
width: 50px;
<table class="table1">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>为什么我可以改变 "TR "的高度 但不能改变宽度?
是的，我知道我可以使用父块上的padding来改变宽度，但是为什么只改变TR元素本身的宽度就不能像改变高度那样呢？
答案
试试设置 flex 关于 tbody 与 flex-direction: column 如下。
.table1 tbody
background-color: gray;
display: flex;
justify-content: ;
align-items: ;
height: 400px;
margin-left: 40px;
padding-left: ;
flex-direction: column;
.table1 tr
background-color: blue;
height: 50px;
.table1 tr td, .table1 tr th
width: 150px;
text-align: left;
<table class="table1">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>另一答案
正如有人提到的，一个 tr 总是100%的表本身的宽度，但高度属性是可调的。这就是为什么你的代码中的高度属性能用，但宽度属性不能用。
要调整你的列的宽度属性，你所要做的就是将你的列的宽度属性锁定在 th 元素。例如，如果你在CSS表中添加以下代码，那么你会看到你的宽度发生变化。
th
width:50px;
或者，为了更具体，你可以做以下操作。
.table1 tr th
width:50px;
你也可以为每一列设置不同的宽度。例如，你的 姓名 列可以是100px，而你的 姓氏 列可以是150px.可能不用说，但你所有列的总和宽度不应超过表本身的宽度。
以上是关于为什么表元素的表行(tr)的宽度不行，而高度却可以？的主要内容，如果未能解决你的问题，请参考以下文章