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

我想这也适合你。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

<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

中

Answer 3

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

在这种情况下，宽度为20px的td使用了一个固定宽度的类，并且输入有一个calc，因为当你使用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/

如何使td元素与输入元素的宽度相同？

3 个答案: