当我输入 add/remove 文本时，如何防止我的 div 调整大小？

Question

我有一个table，里面有很多记录和一个搜索框

<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%
}

一些记录可能显示为 none，因此如果搜索框 returns 是一个完整的 "none" 列，它会换行到 none，就好像它没有具有 "witdh:33,33%" 属性。

有谁知道即使元素没有内容也能保持其原始大小的方法？

提前致谢。

Answer 1

试试这个：

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

Answer 2

尝试 table-layout: fixed 以及 table

的固定宽度

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>

当我输入 add/remove 文本时，如何防止我的 div 调整大小？

How can i can keep my divs from resizing when i add/remove text?

html

css

resize