如何使 td 元素与其中的输入元素具有相同的宽度？

Question

我有一个表，其中包含 td 元素内的许多输入元素。

<table>
  <tbody>
    <td class="first">
      <div>
        <input type="text" /> 
      </div>
    </td>
  </tbody>
</table>

输入元素的宽度应为 20px。表格的宽度设置为 100%。第一个 td 中的输入元素应该只设置一个最小宽度，以便它会伸展（因为表格有 100% 的宽度）。我希望其他输入具有固定宽度（20px）。当我这样做时，td 元素的宽度比输入元素大得多：

https://jsfiddle.net/cbzuwyrg/

是否可以使 td 元素与输入元素的宽度相同而不在 css 中设置相同的宽度？

这个小提琴显示了我想要实现的目标，但不必将 td 的宽度设置为 20px： https://jsfiddle.net/cbzuwyrg/1/

Answer 1

我认为，如果您正确嵌套它，您正在编写的 scss 会更有用，只需添加一个 calc 并嵌套 scss 代码就可以了。希望对你有帮助。

在这种情况下，宽度为 20px 的 td 使用一个稳定该宽度的类，并且输入具有计算，因为当您使用 100% 宽度时，它们会使用整个空间，直到下一次输入。

萨斯：

table {
  width:100%;
  border-collapse: collapse;

  td {
   border: 1px solid #000;
   //display: inline-block;
   width: 100%;

    div {
      input {
        width: calc(100% - 4px) ;      
        &.td20 {
          width: 20px;
        }
      }
    }
  }
}

HTML：

<table>
<tbody>
  <td class="first">
    <div>
      <input type="text" /> 
    </div>
  </td>
  <td>
    <div>
      <input type="text" class="td20"/> 
    </div>
  </td>
  <td>
    <div>
      <input type="text" class="td20" /> 
    </div>
  </td>
  <td>
    <div>
      <input type="text" class="td20" /> 
    </div>
  </td>
</tbody>
</table>

在这里你可以看到它的工作：https://jsfiddle.net/javierdp/adtj2t3o/8/

Answer 2

我想这对你也有用。

编辑：我编辑了代码，所以所有tds 的大小都与输入相同。

table {
  width:100%;
  border-collapse: collapse;
}
td.first{
  width:auto;
   border: 1px solid #000;
  }
 input[type="text"] {
     width: 100%; 
     box-sizing: border-box;
     -webkit-box-sizing:border-box;
     -moz-box-sizing: border-box;
}

<table>
<tbody>
  <td class="first">
    <div>
      <input type="text" size="2"> 
    </div>
  </td>
  <td class="first">
    <div>
      <input type="text" size="7"> 
    </div>
  </td>
  <td class="first">
    <div>
      <input type="text" size=""> 
    </div>
  </td>
  <td class="first">
    <div>
      <input type="text" placeholder="last" size="" > 
    </div>
  </td>
</tbody>
</table>

代码是 html 和 CSS，没有使用 JavaScript。

Answer 3

<table>
<tbody>
  <td class="first">
    <div>
      <input type="text" /> 
    </div>
  </td>
  <td>
    <div style="width:8px">
      <input type="text" /> 
    </div>
  </td>
  <td>
    <div style="width:8px">
      <input type="text" /> 
    </div>
  </td>
  <td>
    <div style="width:8px">
      <input type="text" /> 
    </div>
  </td>
</tbody>
</table>

将宽度尺寸添加到您的 div 中