Question

我试图在没有任何运气的情况下提出这个问题，所以我会再试一次。我真的希望有人可以提供帮助。

我想要的是：

表格延伸至100％
第一个输入元素为＆＃34; fill＆＃34;该表格必须是100％
其他输入元素的大小不同
td与输入元素（无空格）的宽度相同
通过仅更改css（无js，无html更改）来实现此目的

在下面的代码片段中，您可以看到我的html表格。我不想以任何方式改变它，我也不想添加任何类。我也不想使用任何javascript。

如果您运行代码段，则可以看到我的问题。 td比输入元素宽得多。我想要第二个，第三个和第四个td来＆＃34;收缩＆＃34;到输入元素的大小。我希望第一个td伸出（因为表必须是100％）。

＆＃13;

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid #000;
}

.small {
  width: 20px;
}

.medium {
  width: 40px;
}

＆＃13;

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

＆＃13;

我知道这可以通过设置td元素的宽度而不是输入来解决，但这不是我要求的。我也知道可以通过将表的宽度设置为auto来解决，但这也不是我想要的。我只想让td元素与输入元素的宽度相同，只使用css。

Answer 1

这是你想要实现的吗？我将第一个td和输入设置为width: 100%;，因此在所有其余div都是其中元素的宽度（由您的类设置）之后，它们将填充表的其余部分。使用box-sizing: border-box，您可以设置它以使边框等对元素的宽度没有影响。您还可以将box-sizing属性设置为仅使用table * { box-sizing: border-box; }的表及其所有元素。

＆＃13;

* {
  box-sizing: border-box;
}
table {
  width: 100%;
  border-collapse: collapse;
}
td {
  border: 1px solid #000;
}
table td:first-child,
table td:first-child input {
  width: 100%;
}
.small {
  width: 20px;
}
.medium {
  width: 40px;
}

＆＃13;

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

＆＃13;

仅使用css / scss使td元素与input元素的宽度相同？

1 个答案: