如何使td宽度固定？

Question

我想让列的宽度与内容一样宽，但现在它看起来像这样：

相关代码如下所示：

我已经尝试了很多方法来解决这个问题，但是既没有奏效，又有什么问题，我该如何解决这个问题呢？

控制台显示如下：

Answer 1

使用colgroup https://jsfiddle.net/j6vdk8c0/

查看此小提琴

<table>
  <colgroup>
    <col width="100px">
    <col width="200px">
    <col width="300px">
    <col width="400px">
  </colgroup>
  <thead>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
  </thead>
</table>

Answer 2

您可以使用display:table代替表格

示例：

＆＃13;

＆＃13;

.table {
   display: table;
   border-collapse: collapse;
}
 
.table .table-row {
   display: table-row;
}
 
.table .table-cell {
   display: table-cell;
   text-align: left;
   vertical-align: top;
   border: 1px solid black;
}

＆＃13;

<div class="table">
	<div class="table-row">
		<div class="table-cell">test</div>
		<div class="table-cell">test1123</div>
	</div>
	<div class="table-row">
		<div class="table-cell">test</div>
		<div class="table-cell">test123</div>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

@wuxue你可以直接使用内联css style =“width：;”或者在css中创建一个类并应用它。