在添加/删除文本时，如何防止div调整大小？

Question

我有一张有很多记录和搜索框的桌子

<table>
    <tr>
        <td class="col-3">name1</td>
        <td class="col-3">sName1</td>
        <td class="col-3">age1</td>
      </tr>
      <tr>
        <td class="col-3">name..</td>
        <td class="col-3">sName..</td>
        <td class="col-3">age..</td>
      </tr>
      <tr>
        <td class="col-3">nameN</td>
        <td class="col-3">sNameN</td>
        <td class="col-3">ageN</td>
      </tr>
 </table> 

.col-3{
   width:33,33%
}

有些记录可能被显示为“无”，所以如果搜索框返回一个完整的“无”列，它就会被转到零，就好像它没有“witdh:33%”的分布一样。

有人知道如何使元素保持原来的大小，即使它们没有内容？

提前谢谢。

Answer 1

尝试table-layout: fixed以及表的固定宽度

​

table {
  width: 100%;
  table-layout: fixed;
}
.col-3 {
  width: 33, 33%;
  border: 1px solid grey;
}

<table>
  <tr>
    <td class="col-3">name1 askdlhaslkdhsaldsad asjd;kadaj as;dj;asjd as ;asjsd;asjd;ja</td>
    <td class="col-3">sName1</td>
    <td class="col-3">age1</td>
  </tr>
  <tr>
    <td class="col-3">name..</td>
    <td class="col-3">sName..</td>
    <td class="col-3">age..</td>
  </tr>
  <tr>
    <td class="col-3">nameN</td>
    <td class="col-3">sNameN</td>
    <td class="col-3">ageN</td>
  </tr>
</table>

​

Answer 2

试试这个：

<table style="border:1px solid">
    <tr>
        <td style="min-width:50px">one</td>
        <td style="min-width:100px">two</td>
    </tr>
</table>